So, you want to target customers that have something in their cart (or nothing in their cart). This is a good use case for Ecommerce customers that want to offer a little incentive when they have added 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. Below is the custom JS where the class is “shopping-cart” and the number of items is displayed in a badge. This custom JS will live in the “After Document Ready” section of your Custom JS.

//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 2 new rules available to you:

#primercart-zero (Target people with nothing in their cart)

— or —

#primer-cart-one-or-more (Target people with 1 or more item in their cart)

You would use the HTML Exists JQuery rule for this.