Overview

Want to use a "Free Shipping" minimum threshold to encourage shoppers to add more to their shopping carts?  Here's how you can detect shopping cart value and tell customers how much more they need to add to qualify for free shipping.

In this example, an ecommerce website offers Free Shipping for orders over $49.

We need to determine if the Total Cart Value is under $49 and if it is, automatically determine how much they need to get free Shipping. Then display a Lightbox with how much they need to add to their cart to qualify for free shipping.

Detect and display value

1. Determine shopping cart value.

2. Determine if shopping cart is under $49.

3. If under $49, determine how much they need to add to the cart.

4. Display value found in Step #3 in the lightbox.

Custom JS (the customer in this case is using WooCommerce)

After document ready

var cartButton = document.getElementById('cartBtn');
var cartValueElement = cartButton.getElementsByClassName('woocommerce-Price-amount amount')[0];
var cartValue = parseFloat(cartValueElement.innerText.replace("$",""));
window.PRIMER_API.cartValue = cartValue;
PRIMER_CUSTOM_JS.log(“Test:::: cartValue: ” + cartValue);

Custom HTML

<div id='freeshipping_undervalue_desktop' style = 'font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-style: normal;text-decoration: none;text-align: center;font-size: 20px;color: rgb(255, 255, 255);'>You only need $[INSERT_VALUE] to get </div>
<script>
var textElement_overvalue_desktop = document.getElementById('freeshipping_undervalue_desktop');
var cartValue = parent.PRIMER_API.cartValue;
if (cartValue < 49)
{
var value = 49 – cartValue;
textElement_overvalue_desktop.innerText = 'You only need '+ '$' + value +' to get';
}
</script>