Child pages
  • About JavaScript
Skip to end of metadata
Go to start of metadata

PrestaShop 1.7 has reworked a lot of JavaScript code, almost rewriting everything.

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

A default store loads a lot less files in 1.7 compared to 1.6, there are no specific files per page for instance. The 2 new important files you have to master are:

core.jsLoads Jquery2, makes Ajax calls, defines core method that all front-end should use
theme.jsBundles all theme specific code and libraries


Dispatch an event

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

  'product updated',
    dataForm: someSelector.serializeArray(),
    productOption: 3

Dispatched events

PrestaShop will dispatch many events from core.js, which your code can rely on.

Event NameDescription
updatedCartOn the cart page, every time 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.
updatedAddressFormIn 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.
updatedDeliveryFormDuring checkout, if the delivery address is modified, this event will be triggered.
changedCheckoutStepEach checkout step submission will fire this event.
updateProductListOn every product list page (category, search results, price drop 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.
clickQuickViewIf your theme handles it, this event will be triggered when use click on the quick-view link.
updateProductOn the product page, selecting a new combination will reload the DOM via Ajax calls. After the update, this event is fired.
More events?Contribute to the doc to describe more events!

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.

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

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





  • No labels