Skip to main content
This page covers cart usage: cartItems, item properties, and data attributes for quantity and remove. For checkout-only topics (totals, form fields, coupon, payment), see Checkout.

​
Scope: cartItems / items

cartItems (or items) is an array of line items. The cart plugin fills it; UI updates are reactive when cart scope changes.
Item propertyDescriptionIn template
codeProduct/cart line codeUse with qty/remove data attributes
nameProduct name[[ item.name ]]
imageProduct image URL[[ item.image ]]
quantityQuantity[[ item.quantity ]]
priceUnit price (formatted)[[ item.price ]] — do not use formatPrice
totalLine total (formatted)[[ item.total ]] — do not use formatPrice
price and total are already formatted. Use [[ item.price ]] and [[ item.total ]] as-is. See Functions for when to use formatPrice.

​
Quantity and remove (data attributes)

Use these so the cart plugin handles +/- and remove without custom script:
AttributeElementPurpose
data-cart-qty-minusButtonDecrease quantity
data-cart-qty-plusButtonIncrease quantity
data-cart-qty-removeButton/linkRemove line (set qty to 0)
data-code="[[ item.code ]]"Same element or parentSo the plugin receives the actual product code
data-disable-when-oneMinus button (optional)Disable when item.quantity <= 1
Example: 
<template-foreach data-each="item in cartItems">
  <div class="cart-line">
    <img alt="[[ item.name ]]" src="[[ item.image ]]" />
    <span>[[ item.name ]]</span>
    <button type="button" data-cart-qty-minus data-code="[[ item.code ]]" data-disable-when-one aria-label="Decrease">−</button>
    <span>[[ item.quantity ]]</span>
    <button type="button" data-cart-qty-plus data-code="[[ item.code ]]" aria-label="Increase">+</button>
    <span>[[ item.total ]]</span>
    <button type="button" data-cart-qty-remove data-code="[[ item.code ]]" aria-label="Remove">Remove</button>
  </div>
</template-foreach>
You can wrap the Remove button in <template-if data-condition="cartItems.length > 1"> so it only shows when there is more than one item (use &gt; for > in data-condition). For custom behavior, use @click with window.ef.addToCart(code, options?, quantity?), window.ef.setCartQuantity(code, quantity), or window.ef.removeFromCart(code, allowClear?) if the app exposes window.ef.

​
Order bumps (on checkout)

On checkout pages, bump cards use these data attributes so the bump-products plugin can toggle and style:
AttributeWherePurpose
data-bump-code="[[ bump.code ]]"Card/containerPlugin adds .selected / .bump-selected when selected
data-bump-checkbox="[[ bump.code ]]"CheckboxLinks checkbox to bump code
data-bump-toggle="[[ bump.code ]]"Label or clickable wrapperClick toggles the checkbox
name="bump" or name="bump[]", value="[[ bump.code ]]"CheckboxForm submit and plugin read selected codes
For scope (checkout.bump_products, checkout.selectedBumpLines) and full offer vs added template pattern, see Checkout — Order bumps.

​
Summary

  • Use cartItems and [[ item.* ]]; item.price and item.total are already formatted.
  • Use data-cart-qty-minus/plus/remove and data-code for qty and remove.
  • Bumps: use data-bump-* attributes; scope and patterns are in Checkout.