UFE External Events

UFE custom events helps you to do custom actions at various phases.

💡

Prerequisite The following part of the article requires development knowledge. Don't do it without proper knowledge.

1. Add to cart event

The UFE_ADDTOCART event will emit when a product is added to cart using UFE widget. You will get added products details along with the event.

The callback function takes an event parameter, which represents the event object dispatched when the 'UFE_ADDTOCART' event occurs.

Inside the callback function, event.detail is used to access the parameters passed with the event. These parameters represent the added product.

Developers can add their custom logic or actions within the callback function to handle the event, such as triggering external analytics for adding the product to the cart.



document.addEventListener('UFE_ADDTOCART', (event) => {

	//Add your code here to execute the action on add to cart
	//Extract the parameters passed with the event
      const params = event.detail;
  });

2. UFE checkout event

The UFE_CHECKOUT event will emit when checkout button is clicked inside the UFE widget.The detail property of the event contains the list of items to be added to the cart.

Event listener for 'UFE_CHECKOUT' event.

This listener executes actions when the checkout button is clicked inside the UFE widget.

The detail property of the event contains the list of items to be added to the cart.


document.addEventListener('UFE_CHECKOUT', (event) => {

	//Add your code here to execute the action on checkout
	//Extract the parameters passed with the event
      const params = event
  });

3. UFE pop-up close event

Subsequently, the popupCloseEvent function is used to create a custom event named UFE_POPUP_CLOSE passing productAdded as a parameter named itemAdded. This event could potentially be used to do certain actions based on the product that was added to the cart.

Event listener for 'UFE_POPUP_CLOSE' event.

This listener executes actions to close an upsell popup based on the product that was added to the cart.

The detail parameter contains parameters related to closing the popup, such as the added product.


document.addEventListener('UFE_POPUP_CLOSE', (event) => {

	//Add your code here to execute the action on pop-up widget close
	// Extract the parameters passed with the event
    const params = event.detail;
                        
  });

4. UFE upsell rejected event

The UFE_ADDTOCART event will emit when the upsell is rejected. The detail parameter is what we us to emit the event.

Event listener for 'UFE_UPSELL_REJECTED' event.

This listener executes actions when the upsell is rejected.

The detail parameter contains data related to the event emission


document.addEventListener('UFE_UPSELL_REJECTED', (event}) => {

	//Add your code here to execute the action on reject event
	// Extract the parameters passed with the event
    const params = event.detail;
                        
  });

Hope you've got some value from this article. Let us know your feedback 🙂 We are excited to hear your thoughts.

Did we miss something? No worries! Message us by clicking the chat icon 💬 inside the app. Or Just email our team at support@helixo.co ✌️