Cart

The Cart component is a slide-out drawer that manages items, quantities, promo codes, and checkout.

What you get

• Drawer UI with item list and totals

• Grouped items by retailer

• Quantity updates and removals

• Promo code support

• Cart persistence across sessions and tabs

• Checkout entry point

Show a cart button (CDN)

<script
  defer
  data-liquid-commerce-elements
  data-token="YOUR_API_KEY"
  data-env="production"
  data-cart-badge-button="header-cart"
  type="text/javascript"
  src="https://assets-elements.liquidcommerce.us/all/elements.js"
></script>

<div id="header-cart"></div>

Cart UI helpers (programmatic)

window.elements.ui.cartButton('header-cart', true);
window.elements.ui.floatingCartButton(true);
window.elements.ui.cartSubtotal('cart-total');
window.elements.ui.cartItemsCount('items-count', { hideZero: true });

Cart actions

window.elements.actions.cart.openCart();
window.elements.actions.cart.closeCart();
window.elements.actions.cart.toggleCart();

await window.elements.actions.cart.addProduct([
  { identifier: '00619947000020', fulfillmentType: 'shipping', quantity: 1 }
], true);

await window.elements.actions.cart.applyPromoCode('SUMMER20');
await window.elements.actions.cart.removePromoCode();
await window.elements.actions.cart.resetCart();

const cart = window.elements.actions.cart.getDetails();

Address behavior

If no address is set, add-to-cart automatically opens the address prompt, then retries the add.

Cart events (examples)

window.addEventListener('lce:actions.cart_item_added', (event) => {
  const { identifiers, itemsAdded } = event.detail.data;
});

window.addEventListener('lce:actions.cart_updated', (event) => {
  const { subtotal, itemsCount } = event.detail.data;
});