---
title: "Pre-order javascript events"
slug: "pre-order-javascript-event"
date: "2022-03-28T19:29:18+00:00"
modified: "2025-03-25T03:05:35+00:00"
author: "admin"
canonical: "https://preproduct.io/docs/pre-order-javascript-event/"
---

> 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 once PreProduct initializes on product pages (if the product is on pre-order). Use the [Cart Session](https://preproduct.io/docs/pre-order-cart-session/) events if you need events capable of firing on every page.

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

##### Button Click Event

Fires when the pre-order button is clicked:

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

##### Conversion Event

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

```javascript
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](https://shopify.dev/docs/api/ajax/reference/cart).

```javascript
 {
	"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.

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