Skip to main content
Version: 2.0.0

JavaScript Events

These are browser events, not PHP events

This page documents client-side JavaScript events dispatched via window.dispatchEvent. They run in the browser and are used to coordinate decoupled Alpine.js components on a page.

Events are central to how yStore's frontend works. Decoupled components communicate state changes with each other through the event/subscriber pattern, keeping components independent and extensible.

The list below covers the most commonly used events. It is not exhaustive.

private-content-loaded​

yStore loads all customer section data together as a single structure. When the data is available, the private-content-loaded event is dispatched on window. All components that require section data subscribe to this event.

Listen with native JavaScript:

window.addEventListener('private-content-loaded', event => {
    const data = event.detail.data;
    // data.cart, data.customer, data.wishlist, etc.
});

Or with Alpine.js:

<div @private-content-loaded.window="prop = event.detail.data.sectionname"></div>

All section data is available under event.detail.data. The keys are section names (e.g. cart, customer, wishlist).

info

yStore does not use Knockout.js observables. Section data changes are propagated only through the private-content-loaded event — there is no automatic reactive binding.

reload-customer-section-data​

Dispatch this event from any component to force a fresh reload of all customer section data. There is no automatic invalidation — components are responsible for triggering reloads when they know data has changed.

window.dispatchEvent(new Event('reload-customer-section-data'));

To invalidate cached section data in browser storage without immediately reloading it:

const browserStorage = yui.getBrowserStorage();
if (browserStorage) {
    browserStorage.removeItem('yui-cache-storage');
}

For full details on section data, see Working with sectionData.

toggle-minicart-sidebar​

Dispatch this event to open the mini-cart drawer. Once the mini-cart is visible, dispatching the event again does not close it.

window.dispatchEvent(new Event('toggle-minicart-sidebar'));

clear-messages​

Clears all splash / notification messages rendered by the message component. Dispatching this has no payload.

window.dispatchEvent(new Event('clear-messages'));

Listening in Alpine.js components​

Alpine.js makes it straightforward to subscribe to window events using the .window modifier. Events with a detail payload can be accessed via $event.detail:

<div
    x-data="{ cartCount: 0 }"
    @private-content-loaded.window="cartCount = $event.detail.data.cart?.itemCount ?? 0"
>
    <span x-text="cartCount"></span>
</div>

Dispatching custom events​

You can dispatch your own events to coordinate custom components with the same pattern:

// Dispatch
window.dispatchEvent(new CustomEvent('my-store-event', {
    detail: { productId: 42 }
}));

// Listen (Alpine.js)
// @my-store-event.window="handleEvent($event.detail)"

// Listen (plain JS)
window.addEventListener('my-store-event', event => {
    console.log(event.detail.productId);
});