Events

As our app is used in many scenarios, we need a way to notify external components, plugins and Javascript code in Customization about some important events of the app. For example, a developer may want to hook to an event to know when the data from the server is pulled.

Core events

Here is the list of the events used in the USF application

init

This event is raised when the USF app is ready and DOM elements have been parsed. It's similar to jQuery document ready event. In the event handlers of this event you can initialize your components, classes. This example demonstrates how to register for the init event:

usf.event.add('init', function(){
    console.log("Hey I'm ready");

    // create my first Vue component
    RVue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>`
    })
});

sr_updating

This event is invoked when the widget is about to pull data from the indexing server. This give you a chance to manipulate the request like translate the search term.

sr_updated

This event is invoked when the widget has pulled data from the indexing server. This give you a chance to manipulate the received data.

sr_viewChanged

This event is invoked when the widget layout is changed from grid to list or vice versa.

is_hide

This event is invoked when the instant search popup is hidden.

is_show

This event is invoked when the instant search popup is shown.

mobile_changed

This event is raised when the client width is changed and it triggers the mobile breakpoint specified in App settings -> Advanced -> Mobile breakpoint.

resize

This event is raised when the browser window is resized.

usf.event.add('resize', sender, function({width}){
    console.log('New width: ' + width);
});

rerender

This event is invoked when the widget needs to rerender all its elements. You can raise this event to force the widget to rerender.

preview_show

This event is invoked when the product preview modal is about to show. You can raise this event to show the product preview modal programmatically.

usf.event.raise('preview_show', null, pluginData);

Register and raise a custom event

Developer can also register, raise, and remove events using usf.event.add, usf.event.raise, and usf.event.remove respectively.

Register for an event

This example demonstrates how to register to my-click custom event.

var eventDlg = function(sender, evtArgs){
    alert('My data: ' + evtArgs.data);
};

usf.event.add('my-click', eventDlg);

Raise an event

Then you can raise my-click custom event as shown below:

Remove an event

When you no longer need to subscribe to an event, use usf.event.remove to unsubscribe to an event:

usf.event.remove('my-click', eventDlg);