Create your custom JavaScript event in PrestaShop 1.7

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, updateProduct, clickQuickView, etc. You can check the list of available JavaScript events using the below link:

https://devdocs.prestashop.com/1.7/themes/reference/javascript-events/

Dispatch an event

The best way to trigger an event is to use the prestashop object. Here is the syntax:

prestashop.emit(
    'yourCustomEventName', 
    { 
        Event data 
    }
);

For example:

prestashop.emit(
    'wkCustomJsEventMsg', 
    { 
        title: 'Success', 
        message: 'This is custom test event.' 
    }
);

Listening to events

You can listen to this event emitted by prestashop.emit using the prestashop object. Here is the syntax:

prestashop.on(
    'yourCustomEventName',
    function (eventData) {
        // do your stuff here with eventData variable
    }
);

For example:

prestashop.on(
    'wkCustomJsEventMsg',
    function (event) {
        $.growl.notice(
            { 
                title: event.title, 
                message: event.message 
            }
        );
    }
);

In this example, I have displayed the custom title and the message passed through prestashop.emit method. We listen to wkCustomJsEventMsg event and display the message.

You can also check our blogs related to this topic:

• Identify User Actions with JS event in PrestaShop 1.7
• How to perform action after PrestaShop javascript events in V1.7

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.