Cart

​

Adding a cart to your page

• Cart – A single cart block (list of items + total + checkout).
• Cart Dropdown – A “Cart” trigger (e.g. with item count) that opens a dropdown panel with the same cart inside. Handy in headers or sidebars.

​

Where to find them

1. Open the Elements or Blocks panel.
2. In the Cart category, choose Cart or Cart Dropdown.
3. Drag the block onto your page where you want it (e.g. below the fold for Cart, in the top bar for Cart Dropdown).

• A row per item (name, quantity controls, unit price, line total).
• A footer with Total and a Checkout link.

​

What visitors see

• Item name – From your product/offer (e.g. “1 Bottle”).
• Item image – Product thumbnail (if the product has one).
• Quantity – Current quantity with − and + to decrease or increase.
• Unit price – Price per unit (e.g. “$69.00”).
• Line total – Price × quantity for that item (e.g. “$552.00”).
• Cart total – Sum of all line totals, shown in the footer (e.g. “Total: $552.00”).
• Checkout – Link to continue to checkout.

​

Customizing the cart layout

​

Cart-level variables

​

Per-item row variables

​

Subscription info

<template-if data-condition="item.is_subscription">
  <span>Every [[ item.subscription.frequency ]] [[ item.subscription.frequency_unit ]]</span>
</template-if>

​

Bonus products

<template-foreach data-each="item in cartItems">
  <div class="cart-line">
    <img src="[[ item.image ]]" alt="[[ item.name ]]" />
    <span>[[ item.name ]]</span>
    <span>[[ item.price ]]</span>
    <template-foreach data-each="bonus in item.bonuses">
      <div class="cart-bonus-row">
        <img src="[[ bonus.image ]]" alt="[[ bonus.name ]]" />
        <span>[[ bonus.name ]]</span>
        <span>FREE <s>[[ bonus.retail_price ]]</s></span>
      </div>
    </template-foreach>
  </div>
</template-foreach>

​

Courses

<template-foreach data-each="course in item.courses">
  <div class="cart-course-row">
    <img src="[[ course.cover ]]" alt="[[ course.title ]]" />
    <span>[[ course.title ]]</span>
  </div>
</template-foreach>

<!-- placeholder syntax -->
<span>[[ efCart.total ]]</span>
<span>[[ item.price ]]</span>

<!-- ef-text binding (fallback content shown in builder, replaced at runtime) -->
<span ef-text="efCart.total">$0.00</span>
<span ef-text="item.price">$0.00</span>

​

Quantity controls

​

Cart dropdown

• A trigger (e.g. “Cart” plus the number of items) that visitors click to open the cart.
• A panel that opens below (or in a suitable position) with the full cart inside: same items, quantities, totals, and checkout link.

​

Checkout link

1. The element’s own href attribute (if it is a real path, not # or #checkout).
2. A data-ef-cart-checkout-href attribute on the element.
3. The checkout page configured in your merchant settings (injected as window.efScope.checkout_url).
4. Falls back to /checkout if nothing else resolves.

​

Cart storage

​

JavaScript API

<button @click="window.ef.addToCart('BOTTLE-1')">Add to Cart</button>

<input type="number" @change="window.ef.setCartQuantity('BOTTLE-1', parseInt($event.target.value))" />

​

cart-updated event

window.addEventListener('cart-updated', (e) => {
  console.log('Cart changed:', e.detail.cart);
});

​

Add-to-cart buttons

​

Tips

• Placement – Put the cart or cart dropdown where visitors expect it (e.g. top-right for dropdown, above the fold for a full cart block).
• Sticky / mobile – You can place the cart in a sticky bar or in a mobile menu; the same block works anywhere.
• Multiple carts – You can add more than one cart or dropdown on a page; they all show the same cart data and stay in sync when the visitor changes quantity or adds items.
• Item count badge – Use [[ efCart.count ]] anywhere on the page (e.g. in the header next to “Cart”) to show the total number of items in the cart.
• Savings display – Show [[ efCart.discount_total ]] in the cart footer or [[ item.retail_price ]] beside the unit price to highlight discounts when a retail price is set.
• Subscription label – Use [[ item.is_subscription ]] with template-if to show billing cadence (e.g. “Every 3 months”) only for subscription products.
• Bonuses & courses – Use nested template-foreach on item.bonuses and item.courses to list included free products or digital courses beneath each cart line.