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.