Skip to content

Flash Messenger API

API used to communicate with the Flash Messenger in order to manage Flash Messages on the page.

classDiagram
direction LR
    FlashMessengerApi --> addFlashMessage
    FlashMessengerApi --> addFlashMessages
    FlashMessengerApi --> removeFlashMessage
    FlashMessengerApi --> removeAllFlashMessages
    FlashMessengerApi --> parseAndAddFlashMessages

    class FlashMessengerApi {
        addFlashMessage(flashMessageOptions: TFlashMessageOptions, containerName?: string) string
        addFlashMessages(flashMessageOptions: TFlashMessageOptions[], containerName?: string) string[]
        removeFlashMessage(id: string, containerName?: string) void
        removeAllFlashMessages(containerName?: string) void
        parseAndAddFlashMessages(flashMessages: TFlashMessenger, containerName?: string) void
    }

    link addFlashMessage "../methods/add-flash-message/"
    link addFlashMessages "../methods/add-flash-messages/"
    link removeFlashMessage "../methods/remove-flash-message/"
    link removeAllFlashMessages "../methods/remove-all-flash-messages/"
    link parseAndAddFlashMessages "../methods/parse-and-add-flash-messages/"

Get API

To get the Flash Messenger API use its name FlashMessengerApi with the getApiSync method.

useStorefront(async (storefront) => {
    const flashMessengerApi = storefront.getApiSync('FlashMessengerApi');
});

Methods

Event Bus events

Methods of this API dispatch the following events with the Event Bus:

Example

Making a Flash Messages API call to add a flash message to a Flash Messenger webcomponent with the name="my-flash-messenger" attribute if it exists.

    useStorefront(async (storefront) => {
        const flashMessengerApi = storefront.getApiSync('flashMessengerApi');

        flashMessengerApi.addFlashMessage({
            content: `You got a new message`,
            type: 'info',
            isCloseable: true,
            timeout: 10000
        }, 'my-flash-messenger');
    });

    <flash-messenger name="my-flash-messenger"></flash-messenger>

Example

Making a Flash Messages API call to add a flash message to a global Flash Messenger webcomponent.

    useStorefront(async (storefront) => {
        const flashMessengerApi = storefront.getApiSync('FlashMessengerApi');

        flashMessengerApi.addFlashMessage({
            content: `You got a new message`,
            type: 'info',
            isCloseable: true,
            timeout: 10000
        });
    });

Example

Making a Flash Messages API call to remove a flash message from a Flash Messenger webcomponent with the name="my-flash-messenger" attribute if it exists.

    useStorefront(async (storefront) => {
        const flashMessengerApi = storefront.getApiSync('flashMessengerApi');

        flashMessengerApi.addFlashMessages([
            {
                content: `Message 1`,
                type: 'warning',
                isCloseable: true
            },
            {
                content: `Message 2`,
                type: 'success'
            }
        ], 'my-flash-messenger');
    });

    <flash-messenger name="my-flash-messenger"></flash-messenger>

Webcomponents reference

Objects reference