{"id":329583,"date":"2022-04-14T14:24:24","date_gmt":"2022-04-14T14:24:24","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=329583"},"modified":"2022-04-19T05:02:04","modified_gmt":"2022-04-19T05:02:04","slug":"create-your-custom-javascript-event-in-prestashop-1-7","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-your-custom-javascript-event-in-prestashop-1-7\/","title":{"rendered":"Create your custom JavaScript event in PrestaShop 1.7"},"content":{"rendered":"\n

In this blog, we are going to learn how to create your own JavaScript event in PrestaShop 1.7. In PrestaShop 1.7, there are already some JavaScript events are available like updatedCart<\/code>, updateProduct<\/code>, clickQuickView<\/code>, etc. You can check the list of available JavaScript events using the below link:<\/p>\n\n\n\n

https:\/\/devdocs.prestashop.com\/1.7\/themes\/reference\/javascript-events\/<\/a><\/p>\n\n\n\n

Dispatch an event<\/h2>\n\n\n\n

The best way to trigger an event is to use the prestashop<\/code> object. Here is the syntax:<\/p>\n\n\n\n

prestashop.emit(\n    'yourCustomEventName', \n    { \n        Event data \n    }\n);<\/pre>\n\n\n\n
For example:<\/p>\n\n\n\n
prestashop.emit(\n    'wkCustomJsEventMsg', \n    { \n        title: 'Success', \n        message: 'This is custom test event.' \n    }\n);<\/pre>\n\n\n\n
Listening to events<\/h2>\n\n\n\n
You can listen to this event emitted by prestashop.emit<\/code> using the prestashop<\/code> object. Here is the syntax:<\/p>\n\n\n\n
prestashop.on(\n    'yourCustomEventName',\n    function (eventData) {\n        \/\/ do your stuff here with eventData variable\n    }\n);<\/pre>\n\n\n\n
For example:<\/p>\n\n\n\n
prestashop.on(\n    'wkCustomJsEventMsg',\n    function (event) {\n        $.growl.notice(\n            { \n                title: event.title, \n                message: event.message \n            }\n        );\n    }\n);<\/pre>\n\n\n\n
In this example, I have displayed the custom title and the message passed through prestashop.emit<\/code> method. We listen to wkCustomJsEventMsg<\/code> event and display the message.<\/p>\n\n\n\n
\"image-52\"
Event message<\/figcaption><\/figure><\/div>\n\n\n\n
You can also check our blogs related to this topic:<\/p>\n\n\n\n