Events

Events are a powerful way to track user interactions with your storefront. You can subscribe to events and send them to your analytics provider or use them to trigger other actions.

What are events?

Events are emitted by Ralph UI components and can be subscribed to in your application. The event system is built on top of store modules and uses Vuex to manage state.

When extending Ralph UI components, you can emit events from your component and subscribe to them in your application.

How to use events

To subscribe to events you simply use the subscribe method from the events store module. The subscribe method takes two arguments: event and callback. The event argument is the name of the event you want to subscribe to and the callback argument is the function that will be called when the event is emitted.

Example:

// Subscribe to the cart:add event
this.$store.subscribe((mutation, state) => {
  if (mutation.type === 'events/push') {
      const eventType = mutation.payload.type
      const eventData = mutation.payload.data
      // Do something with the data
      if (eventType === 'cart:add') {
          log('Cart add event received', eventData)
          log('Current state', state)
      }
  }
});

Events list

List of all events that are emitted by Ralph UI components.

Component	Event	Payload
widget	click	{ href }
menu	click	{ item }
search	click	{ type, data }
cart	add	{ item, product }
cart	remove	{ item, product }
page	impression	{ route }
product	click	{ product, page, index, pageSize }
product	impression	{ product, page }
product-detail	impression	{ product }
favorite	add	{ productId, product }
favorite	remove	{ productId, product }
checkout	impression	{}
checkout	update	{ checkout }
checkout	purchase	{ order }
user	login	{}
user	logout	{}
user	register	{}
user	password-reset	{ email, resetKey }
user	delete	{}
newsletter	subscribe	{ email }