Instantly Reward Your Big Spenders On The Cart Page

It is raining coupons! Or it will be for your big spenders if you implement this modification.

While there are discount rules for driving customer loyalty, coupon codes can be a better option as they offer more nuanced control over the discount settings. It also allow you to track the discounts directly to the order. However, the drawback to coupon codes is that they are not automatically applied to an order. You have tosend them via email, or rely on other slower means to promote them. This modification solves this issue by automatically adding a message to your cart page that instantly rewards big spenders with their own coupon code.

Let's get to it!

Instructions

1. Login to your control panel and navigate to Design -> Theme Files/Edit HTML & CSS and open the Panels/CartContent.html file.

2. Add the following code to the bottom of the file, right after the last </div> tag:

   
   <script type="text/javascript">
   $(document).ready(function(){
   var couponCode = "";
   var successMessage = "Congratulations! Here is a coupon code to use on your purchase: <strong> " + couponCode + "</strong>";
   var minPurchase = 100;
   var cartTotal = parseFloat("%%GLOBAL_CartTotal%%".substring(1));
   if(cartTotal >= minPurchase) {
       $("#CartHeader").after('<div class="InfoMessage">' + successMessage + '</div>');
   }
   });
   </script>
   
   

3. You will need to change the couponCode variable to the coupon code that you want your customers to use. You can also change the minimum purchase amount from 100 to your desired value by modifying the minPurchase variable.

4. Save the changes.

How It Works

The code compares the cart total to the minimum purchase amount. If the total is equal or greater than the minimum purchase amount then it will show the customer a message with the coupon code at the top of the cart page. You can change the message by modifying the successMessage variable, and the coupon code by modifying the couponCode variable.

Instructions

If the message does not appear at the top of the cart... then make sure that the CartHeader panel is in the cart.html file. The code looks like this: %%Panel.CartHeader%% and it needs to be in the cart.html for it to function correctly..

If the cart total is equal or larger than the minimum purchase amount and the message still does not appear at the top of the cart... then you are probably using a currency with more than one character as the currency code. You will need to adjust the substring from 1 to 2 or 3 depending on how many letters are in the currency code. If that sounds too confusing, then let us help!

For all other questions, comments, or modifications... contact our Bigcommerce developers!