Skip to main content

Cart Attributes

data-qumra-cart-add​

Add a product to cart on click.

<button data-qumra-cart-add="PRODUCT_ID">Add to Cart</button>

<!-- With custom quantity -->
<button data-qumra-cart-add="PRODUCT_ID" data-quantity="3">Add 3</button>

Events: cart:adding → cart:added / cart:error

data-qumra-cart-update​

Update item quantity on change event (for <input> / <select>) or click (for buttons).

<!-- Input: updates on value change -->
<input type="number" data-qumra-cart-update="ITEM_ID" value="2" min="1">

<!-- Button: sets quantity from data-quantity -->
<button data-qumra-cart-update="ITEM_ID" data-quantity="5">Set to 5</button>

Events: cart:updating → cart:updated / cart:error

data-qumra-cart-remove​

Remove item from cart on click.

<button data-qumra-cart-remove="ITEM_ID">Remove</button>

Events: cart:removing → cart:removed / cart:error

data-qumra-cart-clear​

Clear all cart items on click.

<button data-qumra-cart-clear>Clear Cart</button>

Events: cart:cleared / cart:error

Full Example​

<!-- Product Card -->
<div class="product-card">
  <img src="{{ product.image | img_url: '300x300' }}" alt="{{ product.title }}">
  <h3>{{ product.title }}</h3>
  <p>{{ product.price | money }}</p>

  <div class="quantity-selector">
    <button onclick="this.nextElementSibling.stepDown()">-</button>
    <input type="number" id="qty-{{ product._id }}" value="1" min="1" max="99">
    <button onclick="this.previousElementSibling.stepUp()">+</button>
  </div>

  <button
    data-qumra-cart-add="{{ product._id }}"
    data-quantity="1"
  >
    Add to Cart
  </button>
</div>