How can I use Advanced Search's JavaScript events in my theme or module?

From version 5.4.0, Advanced Search exposes its JavaScript events through PrestaShop's native event system as well as through the existing jQuery events. Your theme or another module can listen for these events to react to filter changes or refresh its own components after a search update.

This integration is available in both the standard version and the PRO version on storefronts where the native PrestaShop event system is available. Events specific to a PRO feature, such as skipping a step, require that feature.

This FAQ is intended for developers and theme integrators. Add the code to a JavaScript file loaded by your theme or integration module.

Listen through PrestaShop's native event system

Use prestashop.on() with the event's exact name. The following example runs when Advanced Search has completed its result-display setup:

if (typeof prestashop !== 'undefined' && typeof prestashop.on === 'function') {
    prestashop.on('as4-After-Set-Results-Contents', function (idSearch, context) {
        console.log('Advanced Search results updated', idSearch, context);
        // Reinitialize your theme's custom components here if needed.
    });
}

The callback receives the search engine ID followed by the context value supplied by the module. The context identifies the module's update path, for example showAsResponse; it is not the response HTML or a browser event object.

To react to a criterion change, you can use:

prestashop.on('as4-Criterion-Change', function (idSearch, idCriterionGroup, value, label, controlType) {
    console.log('Criterion changed', idSearch, idCriterionGroup, value, label, controlType);
});

Load this second example only after the PrestaShop event system is available, as in the first example.

Available events

Event names keep their historical as4- prefix, including in Advanced Search 5. Names and capitalization must be used exactly as shown.

idSearch identifies the search engine and idCriterionGroup identifies its criteria group. This is useful when several search engines appear on the same page. searchMethod and stepSearch contain the module's current search-mode values.

For as4-Criterion-Change, the arguments depend on the control: controlType can be link, select, checkbox or range. The value can be a single value or an array for a multiple selection; numeric interval changes can pass null for the value and label. These arguments do not contain the complete search selection, and a control change does not by itself guarantee that a new product list has already been displayed.

The Before-Set-Results-Contents event marks entry into the module's result-display setup routine. It should not be used as a guarantee that the previous product-list HTML is still present.

Do existing jQuery listeners still work?

Yes. The existing jQuery events remain supported. A listener such as the following continues to work:

$(document).on('as4-After-Set-Results-Contents', function (event, idSearch, context) {
    console.log('Advanced Search results updated', idSearch, context);
});

The callback signatures are different: jQuery supplies an event object first, followed by the module's arguments. A listener registered with prestashop.on() receives only the module's arguments, with no leading event object. When moving an existing listener to the native event system, adapt its parameters accordingly.

Choose one event system for each action. Registering the same action with both jQuery and prestashop.on() will execute it twice because the module emits through both systems.

When should I register my listeners?

Register them once, after the PrestaShop event system is available and before the events you need to observe. If you need the initial search-block initialization events, your listener must be registered before that initialization runs: past events are not replayed.

Search blocks and their contents may be initialized again after updates. Avoid registering a new copy of the same listener inside every search callback, and make your component initialization safe to repeat. For result-display integrations, use an appropriate result-display event and filter on idSearch when your action applies to a particular engine.