Identify User Actions with JS event in PrestaShop 1.7
PrestaShop 1.7 front office has a systematic event system which “emits” some events. Furthermore, we can use these events to identify user actions.
For instance, a user changes combination in product page. Therefore the combination and image template is updated. After that it emits “updatedProduct” event. You can use this event to capture this action and identify the updated combination.
To clarify, these events are similar to hooks system in PrestaShop core classes. As you can add PrestaShop core hooks to perform your action in the module. Similarly, you can use theme events to identify user actions and perform your required process.
How to use
Let’s understand these events with an example. For instance, the ‘updatedProduct’ event is emitted on product pages when the product form template is updated on combination change.
These events emit with “prestashop” object in JS. So we will use the same object to apply hook on these events:
prestashop.on("updatedProduct", function(response) {
// The combination is changed
// "response" argument has data related to this event
// Perform your action
});
The argument in the callback function is optional. You can add this whenever you need the event response data in your callback.
List of all events
Here is the list of events to identify user actions that are available in core js of PrestaShop as per latest version:
| Event Name | Pages | Action |
| updateCart | Listing pages, Product page and cart page. | Add product to cart and cart quantity updates. |
| updatedCart | Cart page | After cart total summary template is updated. |
| changedCheckoutStep | Checkout page | When user clicks any reachable checkout step. |
| editAddress | Checkout page (Order final summary) | When user clicks edit address order final summary. |
| updatedDeliveryForm | Checkout page | When user changes shipping option in checkout. |
| editDelivery | Checkout page (Order final summary) | When user clicks to edit shipping option order final summary. |
| updateProductList | Listing pages | When the product list is updated due to filter or sorting change |
| clickQuickView | Listing pages | When customer clicks on quick view of a product. |
| updateProduct | Product page | As soon as customer clicks on combination to change. |
| updatedProduct | Product page | When product template is updated on combination change. |
| updatedAddressForm | Address forms (Addresses and checkout page) | When user changes the country and state list updates. |
| handleErrors | All pages | To handle errors in any of the above events. |
That’s all.
If any issue or doubt in the above process, please feel free to let us know in the comment section.
I would be happy to help.
Also, you can explore our PrestaShop Development Services and a large range of quality PrestaShop Modules.
For any doubt contact us at support@webkul.com.