JavaScript

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:

File Content
core.js Load Jquery2, make ajax calls, define core method that all frontend should use
theme.js Bundles all theme specific code and libraries

Read more (about their priority).

Events

Dispatch an event

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

prestashop.emit(
  'product updated',
  {
    dataForm: someSelector.serializeArray(),
    productOption: 3
  }
);

Dispatched events

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

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');
event.target = body.find('.js-theClassYouNeed');

body.trigger(event);