hide¶

hide is a DOM event that occurs whenever the backdrop is hidden.

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 hide event and perform an action whenever it's emitted.

useStorefront(async (storefront) => {
    document.addEventListener('hide', () => {
        console.log('Backdrop is hidden 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('hide', (event) => { // this might never fire
        console.log('Backdrop is hidden now');
    });
});