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

Store SDK

The Store SDK (window.qumra) is a client-side JavaScript library available in all theme pages. It provides a unified interface for cart operations, event communication, and HTML auto-binding.

Quick Start

// Cart operations
const cart = await qumra.cart.add('PRODUCT_ID', 2);
console.log(cart.totalPrice, cart.totalQuantity);

// Event bus
qumra.on('cart:added', (payload) => {
console.log('Added!', payload.cart);
});

// Debug mode
qumra.debug(true);

Architecture

ObjectPurpose
qumra.cartCart module — add, update, remove, clear, fetch, get
qumra.filtersFilters module — search, add, toggle, range, searchText, sort, clear, section rendering
qumra.on() / off() / emit() / once()Event bus — pub/sub communication
qumra.EVENTSEvent name constants
qumra.debug()Toggle console logging for all events

qumra vs __qumra__

window.qumrawindow.__qumra__
PurposeSDK (methods & events)Server-rendered context data
MutabilityRead & WriteRead-only
AvailableAfter SDK loadsImmediately on page

Event Bus

The event bus allows communication between SDK modules, theme scripts, and third-party integrations.

qumra.on(event, callback, options?)

Subscribe to an event.

qumra.on('cart:added', (payload) => {
console.log(payload.cart.totalPrice);
});

Options:

OptionTypeDescription
oncebooleanAuto-unsubscribe after first call
prioritynumberHigher runs first (default: 0)
elementElementAuto-cleanup when element removed from DOM
// Priority: analytics runs before UI update
qumra.on('cart:added', updateUI, { priority: 1 });
qumra.on('cart:added', trackAnalytics, { priority: 10 });

// Auto-cleanup: listener removed when element is removed
qumra.on('cart:added', handler, { element: document.getElementById('cart-widget') });

qumra.off(event, callback)

Unsubscribe from an event.

const handler = (payload) => console.log(payload);
qumra.on('cart:added', handler);
qumra.off('cart:added', handler);

qumra.emit(event, data?)

Emit an event to all subscribers.

qumra.emit('custom:event', { key: 'value' });

Wildcard matching:

qumra.on('cart:*', handler);  // matches cart:added, cart:removed, etc.
qumra.on('*', handler); // matches ALL events

qumra.once(event, callback)

Subscribe once (auto-unsubscribe after first call).

qumra.once('cart:added', (payload) => {
showWelcomeMessage();
});

qumra.debug(enabled)

Toggle debug logging. When enabled, all events are logged to console with timestamps.

qumra.debug(true);
// [qumra:debug] cart:added { cart: {...} }