Search widget events

This feature allows you to listen to events dispatched by the search widget when users perform searches, giving you access to search results and product data outside the widget.

1

Search event

When users perform searches, there are cases where you'll need access to the returned products (or product IDs) outside the widget.

Custom event:

const searchEvent = new CustomEvent('abtasty_search', {
    detail: {
        results,
        widgetId, // current widget unique ID
    }
});

Listen to the event:

window.addEventListener('abtasty_search', (event) => {
    const { results, widgetId } = event.detail;
    console.log(widgetId, results);
});

2

Search result event

An event is triggered for each product when it's added to the search results list. Use this to perform actions on individual products.

Custom event:

const productEvent = new CustomEvent('abtasty_search_result', {
    detail: {
        resultElement: resultHTMLElement,
        index,    // index of the element in the hits array
        widgetId, // current widget unique ID
    }
});

Listen to the event:

window.addEventListener('abtasty_search_result', (event) => {
    const { widgetId, index, resultElement } = event.detail;
    console.log(widgetId, index, resultElement);
});