Skip to content

Message Storage API

API used to retrieve data related to the current shop like locales, page settings and skin settings.

classDiagram
direction LR

    MessageStorageAPI --> getChannelMessages
    MessageStorageAPI --> removeChannelMessages

    class MessageStorageAPI {
        getChannelMessages(channelName: string): BaseMessage~unknown~[] | undefined
        removeChannelMessages(channelName: string): void
    }

    link getChannelMessages  "../methods/get-channel-messages/"
    link removeChannelMessages  "../methods/remove-channel-messages/"

Get API

To get the Message Storage API use its name messageStorageSystemApi with the getApiSync method.

useStorefront(async (storefront) => {
    const messageStorageApi = storefront.getApiSync('messageStorageSystemApi');
});

Channel Messages

In Storefront, all events dispatched via Event Bus are being stored in a history known as a "channel". Crucially, each channel is named after the specific event it stores. For example, when the addedToFavourites.added event is dispatched, it is stored in a channel also named addedToFavourites.added This API manages the channels allowing you to work with past events. Understanding this mechanism is key to grasping how Storefront events work, as interacting with webcomponents or listening to specific Bus events often involves processing events that have already occurred.

NOTE: When using webcomponents, it is a good practice to ensure all previous events get handled regardless of when a webcomponent gets loaded into the page.

NOTE: When writing your own JS it will be usually necessary to handle all previous events regardless of whether they happened or not. It is a good practice and will ensure consistent behavior especially with lifecycle events like Page Manager events.

Methods

Example

In this example we make a messageStorageSystemApi call to retrieve an array of past events.

useStorefront((storefront) => {
    const messageStorageApi = storefront.getApiSync('messageStorageSystemApi');

    const pastStockChangedEvents = messageStorageApi.getChannelMessages('product.stockChanged');

    if (pastStockChangedEvents.length > 0) {
        pastStockChangedEvents.forEach(({ body: eventBody }) => {
            console.log('perform action on every past event');
        });
    }
});

Example

In this example we make a messageStorageSystemApi call to remove an array of past events.

useStorefront((storefront) => {
    const messageStorageApi = storefront.getApiSync('messageStorageSystemApi');

    messageStorageApi.removeChannelMessages('product.stockChanged');
});

Webcomponent events reference

Models reference