JavaScript in yStore

yStore storefronts use Alpine.js for reactivity. The plugin provides a set of JavaScript utilities that make it easy to work with the store from your templates.

JavaScript Events

Client-side events you can listen to in Alpine components or plain JS.

window.dispatchMessages()

Show toast / notification messages from any script on the page.

Section Data

Access pre-loaded server data from Alpine components without extra fetches.

x-defer Directive

Lazy-load Alpine components after page load for better performance.

The window.yui object

yStore exposes a global window.yui object on every storefront page. It contains:

window.yui = {
    cartId: 'abc123',      // current cart/quote ID
    siteId: 1,             // Craft site ID
    currency: 'EUR',       // active currency code
    isLoggedIn: false,     // customer login state
    customer: null,        // customer object (when logged in)
}

Use this in Alpine components instead of making extra API calls for basic context.

Making API calls

Use the native fetch API with the GraphQL endpoint:

const response = await fetch('/api', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        query: `{ cart(cartId: "${window.yui.cartId}") { items { sku qty } } }`
    })
});
const { data } = await response.json();

For REST endpoints, use the path directly:

const response = await fetch('/actions/yui/cart/totals', {
    method: 'GET',
    headers: { 'X-Cart-Id': window.yui.cartId }
});

CSRF tokens

Mutation requests (POST, PUT, DELETE) require a valid CSRF token. Include it in your request headers:

headers: {
    'X-CSRF-Token': window.csrfTokenValue,
    'Content-Type': 'application/json'
}