Sometimes you may need to perform certain actions based on our Product Personalizer app. For that, we have some custom events that listen and perform your action based on those events. In this article, we are going to talk about these custom events.
There are two types of custom event hooks Product Personalizer currently provides.
- App Initialized Custom Event
- Add To Cart Custom Event
Let’s discuss these two custom event hooks and how you can utilize them.
1. App Initialized Custom Event Hook:
Let’s say you want to do something after the Product Personalizer app has been loaded to the product page. You might need to perform some task that requires confirmation that the Product Personalizer app has been initialized. You can simply do that by listening for the “pplrAppInitiated” custom event.
When the Product Personalizer app is fully loaded on the product page, it adds a custom event named “pplrAppInitiated” to the browser window object. You can listen for the “pplrAppInitiated” event
You can follow the example below:
Here is the code for you:
This code needs to be added at the very beginning of the head of the HTML
// Listen for the pplrAppInitiated custom event
window.addEventListener('pplrAppInitiated' , function(e) {
// check if pplr has loaded
})
2. Add To Cart Custom Event Hook:
Let’s say you want to perform some tasks but before that, you want to make sure Product Personalizer customizations have been added to the cart. In that case, you can make use of the “pplrAddToCartCompleted” custom event. Whenever customers complete their customization and press the Add to Cart button, the “pplrAddToCartCompleted” custom event gets added to the window object. In order to make use of this custom event, you have to ensure it does not redirect to the cart page. It should stay on the same product page instead. You can turn a setting to do that in Product Personalizer app settings.
Now let’s see how you can use this custom event:
Here is the code for you:
// Listen for the pplrAddToCartCompleted custom event
window.addEventListener('pplrAddToCartCompleted' , function(e) {
// check if the add to cart event has fired
})That’s how you can use custom events provided by Product Personalizer. Hope this article was helpful to you 🙂