Dollars Until Free Shipping Tutorial

This short tutorial shows how to display a message to the customer letting them know how much more they have to spend in order to obtain free shipping.

In the header of the view cart or single page checkout screen branding you can use the following code snippet. This code uses the catalog Velocity code to perform some simple math calculations and display the appropriate message to the customer.

#set ($freeThreshold = $formatHelper.parseBigDecimal("100"))
#if ($cart.getSubTotalAsBigDecimal() < $freeThreshold)
  #set ($neededUntilFree = $freeThreshold.subtract($cart.getSubTotalAsBigDecimal()))
  You will receive free shipping if you spend $${neededUntilFree} more.<br/>
#end

First navigate to the screen branding by clicking:

Inside of the view cart header paste the snippet into the header as shown below.

If we preview the cart now it should look something like this:

Let's take some time to digest what exactly this code is doing. Below is the first line of the code.

#set ($freeThreshold = $formatHelper.parseBigDecimal("100"))

This line basically takes the value of 100 and converts it into a numeric object known as a BigDecimal for comparison later. If you wanted to change the threshold of free shipping for this calculation just change the 100 to something else. Make sure that you leave the quotes around the value. Now on to the next line of code.

#if ($cart.getSubTotalAsBigDecimal() < $freeThreshold)

This line simply compares the subtotal of the cart to the threshold. We don't want to display a message to the customer if they've already cleared the required amount. The line of code below will now calculate the difference that they need to add to their cart to receive the free shipping.

#set ($neededUntilFree = $freeThreshold.subtract($cart.getSubTotalAsBigDecimal()))

We are performing a simple subtraction calculation and assigning the value to a variable. Finally we print the actual message to the customer.

You will receive free shipping if you spend $${neededUntilFree} more.<br/>

Notice that we have two dollar signs in a row. The first one is actually sent to the customer's browser. The second one is part of the Velocity syntax.