PreProduct provides custom Javascript events that let you run front-end code for pre-order products. Here’s a guide for the available events.

Launch Event #

Fires when PreProduct initializes for a product on pre-order. Use the Cart Session events for pages where multiple pre-order products are present (like collection pages).

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

Button Click Event #

Fires when the pre-order button is clicked:

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

Conversion Event #

Fires after adding a pre-order item to cart/checkout:

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

Event Details #

All of the above events provide data in the below format. The items value follows the Shopify AJAX API 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"
 			}
 		]
 	}
}

Stopping PreProduct Mid-Flow #

To interrupt PreProduct during a 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")
})