Reading list Switch to dark mode

    Identify User Actions with JS event in PrestaShop 1.7

    Updated 3 September 2021

    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:

    Start your headless eCommerce
    now.
    Find out More
    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 NamePagesAction
    updateCart Listing pages, Product page and cart page.Add product to cart and cart quantity updates.
    updatedCart Cart pageAfter cart total summary template is updated.
    changedCheckoutStepCheckout pageWhen user clicks any reachable checkout step.
    editAddressCheckout page (Order final summary)When user clicks edit address order final summary.
    updatedDeliveryFormCheckout pageWhen user changes shipping option in checkout.
    editDeliveryCheckout page (Order final summary)When user clicks to edit shipping option order final summary.
    updateProductListListing pages When the product list is updated due to filter or sorting change
    clickQuickViewListing pagesWhen customer clicks on quick view of a product.
    updateProductProduct pageAs soon as customer clicks on combination to change.
    updatedProduct Product pageWhen product template is updated on combination change.
    updatedAddressFormAddress forms (Addresses and checkout page)When user changes the country and state list updates.
    handleErrorsAll pagesTo 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 [email protected].

    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home