Adding a Calculator to the Basket

Adding a Basket Calculator

If you would like your online store basket to show an automatic calculator, you can use the code below.

Creating an 'Add X to get free delivery' message

Here the calculator will compare the basket value with a nominal value and show a message. In this example the store owner:
  1. Offers free delivery on orders over £50
  2. Charges delivery on orders under £50
  3. Wants to show the customer what value of goods they need to add to the basket in order to get the free delivery

Stage One - Empty Basket

If the customer hasn't added an item to the basket, a starting message can appear showing what the overall offer is for Free Delivery.


Original Empty Basket shows a qualifying value message

Stage Two - Low Value Basket

The customer has added an item to the basket, but the value does not yet qualify for the offer. A message can appear showing what the difference is in order to qualify for the Free Delivery offer.

Low Order: Basket shows what they need to add to qualify for free delivery

Stage Three - High Value Basket

The customer has added enough items to the basket and the value now qualifies for the offer. A message can appear to confirm the order now qualifies for the Free Delivery offer.
Qualifying Order: Basket shows they now get free delivery over £50

The Code

Only 2 pieces of code need adding in order to show the message.

The Javascript Calculator

  1. In the Shopit admin, navigate to Sales Channel > Design > Edit > Edit Template Code
  2. Go to the /checkout/basket.html.twig page
  3. After the final div but before the {% endblock %}, add the following script code:
<script>
// Free Delivery message
  // Get the basket total value
  var basketTotal = parseFloat('{{ basket.itemTotal|number_format(2) }}');

  // Check if the basket total is equal to 0 or empty
  if (basketTotal === 0 || isNaN(basketTotal)) {
    var message = 'Free Delivery over £50';
  } else if (basketTotal < 50) {
    var difference = (50 - basketTotal).toFixed(2);
    var message = 'Add £' + difference + ' to qualify for free delivery.';
  } else {
    var message = 'You get free delivery!';
  }

  // Display the appropriate message
  document.getElementById('delivery-message').innerText = message;
</script>

You should change the variables accordingly:
  1. var message = 'Free Delivery over £50'; is the message that is shown at stage one
  2. else if (basketTotal < 50) is the cutoff value for the offer to begin (change the 50)
  3. (50 - basketTotal).toFixed(2) is another cutoff value for the offer to begin (change the 50)
  4. var message = 'Add £' + difference + ' to qualify for free delivery.'; is the text surrounding the 'difference' calculated above (Change 'Add' and/or ' to qualify for free delivery')
  5. var message = 'You get free delivery!'; is the success message (change the text)

Display the message on the basket page

Here we have chosen to add it to the right hand order summary box:
  1. In the Shopit admin, navigate to Sales Channel > Design > Edit > Edit Template Code
  2. Go to the /checkout/component/summary.html.twig page
  3. After the table displaying the order details, and before the final <div>, add the following code:
<div id="delivery-message">
    <!-- Calculator result will be displayed here -->
  </div>

You could choose to display this calculated message in the main basket area, in the header or footer, as a popup or even on the product details page. Wherever you choose, use the <div id="delivery-message"></div> code.

    • Related Articles

    • Adding New Users

      Shopit allows you to add an unlimited number of users to manage all or parts of your eCommerce store. Understanding Roles Creating a role allows you to define what a user can view and edit, and which sales channels they have access to. Once created, ...

    • Managing your Robots.txt file

      The Default robots.txt file As default, shopit has a robots.txt file that reads: User-agent: * Allow: / Disallow: /search Disallow: /login Disallow: /account Disallow: /checkout Sitemap: https://{{ app.request.host }}/sitemap.xml You can check this ...

    • Creating Forms for your website

      Shopit gives users the ability to create multiple contact forms across your website, using the Messages/Forms feature. We also store your messages in the admin area as a backup to you forwarding them to a nominated third party email address/group. ...