Skip to content

openRegisterModal(): Promise<void>

The openRegisterModal is an asynchronous method that allows to open a modal with the register form inside.

Returned value

A returned value has a type of Promise<void> because of potential additional animations and transitions occurring while opening a modal.

Event Bus events

This API method dispatches the following events with the Event Bus:

Example

In this example we create a buy-button for a certain product. We then declare a function that opens a register modal whenever a non authorized user tries to add a product to cart. Such function makes a AuthenticationApi call to check if the user is authorized with the help of isAuthorized method and then uses the openRegisterModal to open a register modal. This function is added on click event for the buy button whenever it is found after the page loads and turbo:load event fires. To read more about Turbo events read the Page Manager API documentation page 

<buy-button product-id="1" variant-id="1" is-buyable="true">
    <div class="product-actions__add-to-basket">
        <button type="button" class="btn btn_primary">Add to cart</button>
    </div>
</buy-button>

useStorefront(async (storefront) => {
    const authenticationApi = await storefront.getApi('AuthenticationApi');

    const handleOpenRegisterModal = async (event) => {
        if (!authenticationApi.isAuthorized()) {
            event.preventDefault();

            await authenticationApi.openRegisterModal();
        }
    }

    document.addEventListener('turbo:load', (event) => {
        const $buyButton = document.querySelector('buy-button');

        $buyButton.addEventListener('click', handleOpenRegisterModal)
    });
});

Authentication API methods reference