Message-ID: <840164617.378406.1711662438985.JavaMail.root@confluence-doc2-production> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_378405_1456030728.1711662438980" ------=_Part_378405_1456030728.1711662438980 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html About JavaScript

About JavaScript

PrestaShop 1.7 has reworked a lot of JavaScript code, almost rew= riting everything.

It=E2=80=99s recommended to read more about PrestaShop assets management befor= e 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 hav= e to master are:

File Content
core.js Loads Jquery2, makes Ajax calls, defines core me= thod that all front-end should use
theme.js Bundles all theme specific code and libraries

Events

Dispatch an event

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

=20
prestash=
op.emit(
  'product updated',
  {
    dataForm: someSelector.serializeArray(),
    productOption: 3
  }
);
=20

Dispatched events

PrestaShop will dispatch many events from core.js, which your code can rely on.<= /p>

Event Name Description
updatedCart On the cart page, every time something happens (= change quantity, remove product and so on) the cart is reloaded by Ajax cal= l. After the cart is updated, this event is triggered.
updatedAddressForm In the address form, some input will trigger aja= x calls to modify the form (like country change), after the form is updated= , this event is triggered.
updatedDeliveryForm During checkout, if the delivery address is modi= fied, this event will be triggered.
changedCheckoutStep Each checkout step submission w= ill fire this event.
updateProductList On every product list page (category, search res= ults, price drop and so on), the list is updated via Ajax calls if you chan= ge filters or sorting options. Each time the DOM is reloaded with new produ= ct list, this event is triggered.
clickQuickView If your theme handles it, this event will be tri= ggered when use click on the quick-view link.
updateProduct On 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 e= vents

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.

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

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

body.trigger(event);
=20

 

 

 

------=_Part_378405_1456030728.1711662438980--