انتقل إلى المحتوى الرئيسي

HTML Data Attributes

The Store SDK provides HTML data attributes for zero-JavaScript interactions. Add attributes to your HTML elements and the SDK handles everything automatically — no JavaScript required.

How It Works​

  1. Add data-qumra-* attributes to your HTML elements
  2. The SDK automatically binds click/change handlers
  3. Operations are executed and events are emitted
<!-- This button adds to cart without any JavaScript -->
<button data-qumra-cart-add="{{ product._id }}">Add to Cart</button>

Dynamic Elements (SPA Support)​

The SDK uses a MutationObserver to automatically bind dynamically added elements. No manual initialization needed — elements added to the DOM after page load are auto-detected.

// This element will be automatically bound
document.body.innerHTML += `
  <button data-qumra-cart-add="PRODUCT_ID">Add</button>
`;

Combining with Events​

Data attributes trigger the same events as JavaScript SDK methods. Use event listeners for UI feedback:

<button data-qumra-cart-add="{{ product._id }}">
  Add to Cart
</button>
qumra.on('cart:adding', () => {
  // Show loading spinner
});

qumra.on('cart:added', (payload) => {
  // Update cart count in header
  document.getElementById('cart-count').textContent = payload.cart.totalQuantity;
});

qumra.on('cart:error', (payload) => {
  // Show error toast
  showToast(payload.error.message);
});