Overview

You can target customers that have something in their cart (or nothing in their cart). This is a good use case for ecommerce brands that want to offer an incentive when customers add something to their cart and are about to leave.

Essentially, you want to look in your HTML/CSS to see what class is displayed to show the item number.

Custom JavaScript

Below is the custom JavaScript where the class is “shopping-cart” and the number of items is displayed in a badge. This custom code will live in the “After Document Ready” section of your Custom JavaScript.

//Badge Targeting
var badgeVal = '';
if (JQUERY_PRIMER('#shopping-cart').length) {
    badgeVal = JQUERY_PRIMER('#shopping-cart').find('span.badge').eq(0).html();
}

if (!badgeVal || badgeVal === '' || badgeVal === '0') {
    //They have zero items in their cart
    JQUERY_PRIMER('body').append('');
    PRIMER_CUSTOM_JS.log('primer-cart-zero');
} else {
    //They have one or more items in their cart
    JQUERY_PRIMER('body').append('');
    PRIMER_CUSTOM_JS.log('primer-cart-one-or-more');
}

You now have two new rules available to you:

• #primercart-zero (Target people with nothing in their cart)
• #primer-cart-one-or-more (Target people with one or more item in their cart)

Use the HTML Exists JQuery rule for this.