Lets you run custom front-end code whenever a product is on pre-order. Useful for all kinds of situations.

This event will fire whenever PreProduct launches (only for products on pre-order)

window.addEventListener('ppJustLaunched', () => {
   //do something good here
}, false)

This event will fire whenever the converting pre-order button is clicked.

window.addEventListener('ppConvertingButtonClicked', () => {
   //do something great here
}, false);

This event will fire after the pre-order item has been added to the cart or checkout.

window.addEventListener('ppJustConverted', () => {
   //do something even greater here
}, false)

All events provide detail data in the below format. With the “items” value following Shopify’s AJAX format.

 {
	"id": 23334, // PreProduct internal ID
 	"productId": 4593157046349, // Shopify product REST ID
 	"items": // AJAX '/cart/add.js' payload
 		[
 			{
 				"id": "32316569321549"
 				"properties": {
	 				"Estimated shipping": '214 days'
 				}
 				"quantity": "1"
 				"selling_plan": "1984823373"
 			}
 		]
 	}
}

If you want to stop PreProduct from executing mid pre-order addition, you can listen for one of the custom events and then set the event.detail.handled value to true.

window.addEventListener(`ppJustConverted`, (e) => {
    e.detail.handled = true;
    console.log("PreProduct stopped after adding to cart")
})