{"id":303290,"date":"2021-08-27T17:48:55","date_gmt":"2021-08-27T17:48:55","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=303290"},"modified":"2021-09-03T04:41:25","modified_gmt":"2021-09-03T04:41:25","slug":"identify-user-actions-with-js-event-in-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/","title":{"rendered":"Identify User Actions with JS event in PrestaShop 1.7"},"content":{"rendered":"\n

PrestaShop 1.7 front office has a systematic event system which “emits” some events. Furthermore, we can use these events to identify user actions. <\/p>\n\n\n\n

For instance, a user changes combination in product page. Therefore the combination and image template is updated. After that it emits “updatedProduct<\/em><\/strong>” event. You can use this event to capture this action and identify the updated combination.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

How to use<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

These events emit with “prestashop” object in JS. So we will use the same object to apply hook on these events:<\/p>\n\n\n\n

prestashop.on("updatedProduct", function(response) {\n    \/\/ The combination is changed\n    \/\/ "response" argument has data related to this event\n    \/\/ Perform your action\n});<\/pre>\n\n\n\n
The argument in the callback function is optional. You can add this whenever you need the event response data in your callback.<\/p>\n\n\n\n
List of all events<\/h2>\n\n\n\n
Here is the list of events to identify user actions that are available in core js<\/a> of PrestaShop as per latest version:<\/p>\n\n\n\n
\n
\n
\n
Event Name<\/td>Pages<\/td>Action<\/td><\/tr>
updateCart  <\/td>Listing pages, Product page and cart page.<\/td>Add product to cart and cart quantity updates.<\/td><\/tr>
updatedCart <\/td>Cart page<\/td>After cart total summary template is updated.<\/td><\/tr>
changedCheckoutStep<\/td>Checkout page<\/td>When user clicks any reachable checkout step.<\/td><\/tr>
editAddress<\/td>Checkout page (Order final summary)<\/td>When user clicks edit address order final summary.<\/td><\/tr>
updatedDeliveryForm<\/td>Checkout page<\/td>When user changes shipping option in checkout.<\/td><\/tr>
editDelivery<\/td>Checkout page (Order final summary)<\/td>When user clicks to edit shipping option order final summary.<\/td><\/tr>
updateProductList<\/td>Listing pages <\/td>When the product list is updated due to filter or sorting change<\/td><\/tr>
clickQuickView<\/td>Listing pages<\/td>When customer clicks on quick view of a product.<\/td><\/tr>
updateProduct<\/td>Product page<\/td>As soon as customer clicks on combination to change.<\/td><\/tr>
updatedProduct <\/td>Product page<\/td>When product template is updated on combination change.<\/td><\/tr>
updatedAddressForm<\/td>Address forms (Addresses and checkout page)<\/td>When user changes the country and state list updates.<\/td><\/tr>
handleErrors<\/td>All pages<\/td>To handle errors in any of the above events.<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
That\u2019s all.<\/p>\n\n\n\n
If any issue or doubt in the above process, please feel free to let us know in the comment section.<\/p>\n\n\n\n
I would be happy to help.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Also, you can explore our PrestaShop Development Services<\/a>  and a large range of quality PrestaShop Modules<\/a>.<\/p>\n\n\n\n
For any doubt contact us at support@webkul.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/a><\/p>\n","protected":false},"author":264,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-303290","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nIdentify User Actions with JS event in PrestaShop 1.7 - Webkul Blog<\/title>\n<meta name=\"description\" content=\"PrestaShop has systematic event system to identify user actions such as change combination and add to cart etc. Here is how you can use them.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Identify User Actions with JS event in PrestaShop 1.7 - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"PrestaShop has systematic event system to identify user actions such as change combination and add to cart etc. Here is how you can use them.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-27T17:48:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-03T04:41:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Ram Chandra\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ram Chandra\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\"},\"author\":{\"name\":\"Ram Chandra\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/abcd2edf640c51cd905386b99118ad71\"},\"headline\":\"Identify User Actions with JS event in PrestaShop 1.7\",\"datePublished\":\"2021-08-27T17:48:55+00:00\",\"dateModified\":\"2021-09-03T04:41:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\"},\"wordCount\":420,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\",\"url\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\",\"name\":\"Identify User Actions with JS event in PrestaShop 1.7 - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2021-08-27T17:48:55+00:00\",\"dateModified\":\"2021-09-03T04:41:25+00:00\",\"description\":\"PrestaShop has systematic event system to identify user actions such as change combination and add to cart etc. Here is how you can use them.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Identify User Actions with JS event in PrestaShop 1.7\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/abcd2edf640c51cd905386b99118ad71\",\"name\":\"Ram Chandra\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a237e2b96f2a8989c930db6c377971a3d52601b0bba3c5e3dc79a88205178d26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a237e2b96f2a8989c930db6c377971a3d52601b0bba3c5e3dc79a88205178d26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Ram Chandra\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/ram-chandra178\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Identify User Actions with JS event in PrestaShop 1.7 - Webkul Blog","description":"PrestaShop has systematic event system to identify user actions such as change combination and add to cart etc. Here is how you can use them.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/","og_locale":"en_US","og_type":"article","og_title":"Identify User Actions with JS event in PrestaShop 1.7 - Webkul Blog","og_description":"PrestaShop has systematic event system to identify user actions such as change combination and add to cart etc. Here is how you can use them.","og_url":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2021-08-27T17:48:55+00:00","article_modified_time":"2021-09-03T04:41:25+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Ram Chandra","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Ram Chandra","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/"},"author":{"name":"Ram Chandra","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/abcd2edf640c51cd905386b99118ad71"},"headline":"Identify User Actions with JS event in PrestaShop 1.7","datePublished":"2021-08-27T17:48:55+00:00","dateModified":"2021-09-03T04:41:25+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/"},"wordCount":420,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/","url":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/","name":"Identify User Actions with JS event in PrestaShop 1.7 - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2021-08-27T17:48:55+00:00","dateModified":"2021-09-03T04:41:25+00:00","description":"PrestaShop has systematic event system to identify user actions such as change combination and add to cart etc. Here is how you can use them.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/identify-user-actions-with-js-event-in-prestashop-1-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Identify User Actions with JS event in PrestaShop 1.7"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/abcd2edf640c51cd905386b99118ad71","name":"Ram Chandra","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a237e2b96f2a8989c930db6c377971a3d52601b0bba3c5e3dc79a88205178d26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a237e2b96f2a8989c930db6c377971a3d52601b0bba3c5e3dc79a88205178d26?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Ram Chandra"},"url":"https:\/\/webkul.com\/blog\/author\/ram-chandra178\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/303290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/264"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=303290"}],"version-history":[{"count":10,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/303290\/revisions"}],"predecessor-version":[{"id":304273,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/303290\/revisions\/304273"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=303290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=303290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=303290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}