Conditional Banner: Show promo when customer has one "denim" item in the cart.

This example is for a store that sells clothing and wants to run a special offer on “denim” items. And the offer applies to all items that have the word “denim” in the product title.

This custom HTML section displays a promotional banner encouraging customers to buy a second “denim” item with a discount. The banner only appears when there's exactly one denim product with quantity 1 in the cart.

This code only displays a banner. The discount functionality is provided by a buy x get y discount.

The Code

<div id="denim-promo-banner" class="tw-bg-black tw-text-white tw-text-center tw-py-3 tw-px-4 tw-hidden">
  <p class="tw-m-0">Buy a second denim and get 15% off.</p>
</div>
<script>
  (function() {
    const banner = document.getElementById('denim-promo-banner');
    
    function shouldShowBanner(cartData) {
      if (!cartData || !cartData.items) {
        return false;
      }
      
      const denimItemsWithQtyOne = cartData.items.filter(item => {
        return item.quantity === 1 && 
               item.title && 
               item.title.toLowerCase().includes('denim');
      });
      
      return denimItemsWithQtyOne.length === 1;
    }
    
    function updateBanner(cartData) {
      if (!banner) return;
      
      if (shouldShowBanner(cartData)) {
        banner.classList.remove('tw-hidden');
      } else {
        banner.classList.add('tw-hidden');
      }
    }
    
    const initialCart = window.EliteCart.getCurrentCart();
    if (initialCart) {
      updateBanner(initialCart);
    }
    
    window.EliteCart.onCartChange(updateBanner);
  })();
</script>

How It Works

This section uses EliteCart's JavaScript API to monitor the cart contents and conditionally display a promotional banner.

The Logic:

1. The banner checks if there's exactly one denim item in the cart

2. The denim item must have a quantity of 1

3. If these conditions are met, the banner appears encouraging the customer to add a second denim item

4. When conditions aren't met (no denim, multiple denim items, or quantity > 1), the banner hides

The API:

• window.EliteCart.getCurrentCart() - Gets the current cart state when the page loads

• window.EliteCart.onCartChange() - Listens for any cart changes and updates the banner in real-time

How to Customize

Change the product type: Replace 'denim' with your product keyword:

item.title.toLowerCase().includes('hoodie')
// or
item.title.toLowerCase().includes('sneakers')

Change the message: Update the text inside the <p> tag:

<p class="tw-m-0">Add another pair and save 20%!</p>

Adjust the styling: Modify the Tailwind CSS classes on the banner div:

<!-- Blue banner with padding -->
<div id="denim-promo-banner" class="tw-bg-blue-600 tw-text-white tw-text-center tw-py-4 tw-px-6 tw-hidden">

<!-- Red banner with larger text -->
<div id="denim-promo-banner" class="tw-bg-red-500 tw-text-white tw-text-center tw-text-lg tw-py-3 tw-px-4 tw-hidden">

Change the quantity threshold: Modify the quantity check:

return item.quantity === 2 && // Shows when quantity is 2
       item.title && 
       item.title.toLowerCase().includes('denim');

Match multiple product types:

const keywords = ['denim', 'jeans', 'jean'];
return item.quantity === 1 && 
       item.title && 
       keywords.some(keyword => item.title.toLowerCase().includes(keyword));

Common Use Cases

• Volume discounts: "Add 2 more shirts to unlock 20% off"

• Bundle offers: "Get a matching jacket for 25% off"

• Cross-sells: "Complete the set - add the matching bottoms"

• Loyalty rewards: "VIP members: Add one more item for free shipping"

Installation

1. Go to EliteCart → Cart Designer → Custom Sections

2. Click "Add Custom HTML Section"

3. Paste the code above

4. Customize the message and product keyword for your store

5. Click Save

The banner will now appear dynamically based on your cart contents!

Need help with customization? Contact our support team and we'll help you set it up for your specific use case.