loadMoreProducts

loadMoreProducts is a DOM event that occurs whenever the new items are being loaded inside the h-storefront-search webcomponent.

Event body

The loadMoreProducts body has a TLoadMoreProductsEventBody type which represents the details of the removed item from the history. It is optional so it might not exist.

Example

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

useStorefront(async (storefront) => {
    document.addEventListener('loadMoreProducts', (event) => {
        const detail = event.detail;

        if (!detail) return;

        const { page, moduleInstanceId } = detail;

        console.log(`Elements from page ${page} are being loaded for search with id ${moduleInstanceId}`);
    });
});

Example

In this example we use a Search API to load more products.

useStorefront(async (storefront) => {
    const searchApi = await storefront.getApi('SearchApi');

    const $exampleElement = document.querySelector('my-element');

    handleLoadMoreProducts($exampleElement);

    document.addEventListener('loadMoreProducts', (event) => {
        if (!event.detail) return;

        const { searchPhrase, page, moduleInstanceId } = event.detail;

        const moreProducts = await searchApi.searchForProducts(searchPhrase, page);

        console.log('more products have been loaded', moreProducts);

        // Assuming this component has a method for handling more products.
        // We could also write the method globally if needed.
        $element.exampleHandleMoreProducts(moreProducts);
    });
});