show¶

show is a DOM event that occurs whenever the backdrop is showed.

Remember that h-backdrop by default is placed outside the main content of the page which means that the events may not be directly reachable to any element inside the document. In order to catch them make sure to use document.addEventListener instead of this.addEventListener.

Event body¶

none

Example¶

In this example we listen to show event and perform an action whenever it's emitted.

useStorefront(async (storefront) => {
    document.addEventListener('show', () => {
        console.log('Backdrop is visible now');
    });
});

Example¶

As stated above, the backdrop events may not reach the components inside the main content of the page.

useStorefront(async (storefront) => {
    const $productVariants = document.querySelector('product-variants');

    $productVariants.addEventListener('show', (event) => { // this might never fire
        console.log('Backdrop is visible now');
    });
});