Skip to content

addFlashMessage(flashMessageOptions: TFlashMessageOptions, containerName?: string): string

The addFlashMessage method adds a flash message to the page. It requires an existing flash-messenger webcomponent to be present on the page.

Input parameters

flashMessage

flashMessage is a mandatory parameter of the TFlashMessageOptions type.

containerName (optional)

string is a mandatory parameter that tell the api which flash-messenger should it refer to. If not specified the message will be added to the global flash messenger.

Returned value

addFlashMessage return value is of type string and contains an ID of the added flash message.

Event Bus events

This API method dispatches 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
        });
    });

Flash Messenger API methods reference

Objects reference

Webcomponents reference