Home > PrestaShop 9 > Themes > Reference > Javascript events

Table of Contents

Notice: You are browsing the documentation for PrestaShop 9, which is currently in development.

You might want to read the documentation for the current version, PrestaShop 8. Read the current version of this page

JavaScript events

Javascript architecture

It’s recommended to read more about PrestaShop asset management before continuing.

A default store loads two important files on every page:

File	Content
`core.js`	Loads jQuery3, makes ajax calls, defines core methods that all frontend should use
`theme.js`	Bundles all theme specific code and libraries

jQuery is loaded by the core, so each theme will have jQuery v3 available. Do not redefine it.

Events

Dispatch an event

The best way to trigger an event is to use the prestashop object. Here is a simple example:

prestashop.emit(
  'myEventName',
  {
    myData1: 1,
    myData2: 3
  }
);

Listening to events

You can also react to an event emitted by prestashop.emit. Here is a simple example:

if (typeof prestashop !== 'undefined') {
  prestashop.on(
    'myEventName',
    function (event) {
      var eventDatas = {};
      if (event && event.reason) {
        eventDatas = {
          my_data_1: event.reason.myData1,
          my_data_2: event.reason.myData2
        };
      }
    }
  );
}

Dispatched events

PrestaShop will dispatch many events from core.js so your code can rely on it:

Event Name	Description
`updateCart`	On the cart page, everytime something happens (change quantity, remove product and so on) the cart is reloaded by ajax call. After the cart is updated, this event is triggered.
`updatedAddressForm`	In the address form, some input will trigger ajax calls to modify the form (like country change), after the form is updated, this event is triggered.
`updateDeliveryForm`	During checkout, if the delivery address is modified, this event will be trigged.
`changedCheckoutStep`	Each checkout step submission will fire this event.
`updateProductList`	On every product list page (category, search results, pricedrop and so on), the list is updated via ajax calls if you change filters or sorting options. Each time the DOM is reloaded with new product list, this event is triggered.
`clickQuickView`	If your theme handles it, this event will be trigged when you click on the quickview link.
`updateProduct`	On the product page, selecting a new combination will reload the DOM via ajax calls. This event will fire after modifying the combination, but before the ajax call.
`updatedProduct`	On the product page, selecting a new combination will reload the DOM via ajax calls. After the update, this event is fired.
`handleError`	This event is fired after a fail of POST request. Have the `eventType` as first parameter.
`updateFacets`	On every product list page (category, search results, pricedrop and so on), the list is updated via ajax calls if you change filters or sorting options. Each time the facets is reloaded, this event is triggered.
`responsive update`	While browser is resized, this event is fired with a `mobile` parameter.

Triggering delegated events

We use event delegation to make sure that the events are still attached after the DOM was modified (like after an ajax call).

Here is a simple way to trigger a delegated event.

const body = $('body'); // Our events are usually attached to the body

const event = jQuery.Event('click');
event.target = body.find('.js-theClassYouNeed');

body.trigger(event);