---
title: "Pre-order cart session"
slug: "pre-order-cart-session"
date: "2024-01-13T08:37:06+00:00"
modified: "2025-03-25T03:09:20+00:00"
author: "admin"
canonical: "https://preproduct.io/docs/pre-order-cart-session/"
---

> The `PPcartSession` class is available on any page with PreProduct’s `<script>` tag. It’s usually not necessary to interact with, but does expose some public methods for more complex pre-order flows. It’s declared on the `window` object and is available as soon as the `ppCartSessionLaunched` event has fired.
> 
> Adding items to the `PPcartSession` will submit items to your Shopify cart if you have the[ front-end redirect](https://preproduct.io/docs/front-end-redirects/) set to “Redirect to cart (mixed with buy-nows)”, otherwise it will follow PreProducts regular user flow for checking out.

The following section lists the available public methods for `window.PPcartSession`.

### items

A getter method to return an array of every item currently in the `PPcartSession`.

```javascript
PPcartSession.items
```

### push

Pushes an item to the pre-order cart session, combining quantities for any existing items with the same ID.

```javascript
PPcartSession.push({
  id: 12345, // Number (variant ID)
  quantity: 2, // Number (quantity of units)
  sellingPlan: 67890, // Number (selling_plan ID)
  name: "Blue t-shirt", // String (variant name)
  properties: {},   // Object (cart line item properties)
  src: ".../pretty-image.png", // String (variant image) 
  unitPrice: 2999  // Number (coinage)
});

```

### forcePush

Adds an item into the cart session without validations, overwriting existing items with the same variant ID.

```javascript
PPcartSession.forcePush({
  id: 12345, // Number (variant ID)
  quantity: 2, // Number (quantity of units)
  sellingPlan: 67890, // Number (selling_plan ID)
  name: "Blue t-shirt", // String (variant name)
  properties: {},   // Object (cart line item properties)
  src: ".../pretty-image.png", // String (variant image) 
  unitPrice: 2999  // Number (coinage)
});

```

### clear

Clears all items from the pre-order cart session.

```javascript
PPcartSession.clear()
```

### increment

Increments the quantity of a specific item in the cart session.

```javascript
PPcartSession.increment(
  12345, // Number (variant ID)
  2 // Number (number to increase quantity by)
);
```

### decrement

Decrements the quantity of a specific item in the cart session.

```javascript
PPcartSession.<span style="background-color: initial; font-family: inherit; font-size: inherit;">decrement</span>(
  12345, // Number (variant ID)
  2 // Number (number to decrease quantity by)
);
```

### submitToPlatform

Submits the items in the cart. The result of this will vary depending on your [front-end redirect setting](https://preproduct.io/docs/front-end-redirects/). e.g. redirect to your cart page or redirect to checkout.

```javascript
PPcartSession.submitToPlatform()
```

### Events

There are various events fired throughout the cart session lifecycle on the main `window` object. Each has the following payload where applicable.

```javascript
event.detail: {
   itemAddition: {id: 123, ...}, // item added or null if negative change
   items: [{id: 123, ...}, {id: 456, ...}] // array of the current items in the cart session, 
}
```

If you want to stop PreProduct mid flow, mark the `event.detail.handled` property as `true`. (Useful when specific redirect actions or upsell flows are needed)

List of events:

- `ppCartSessionLaunched`
- `ppCartSessionTransactionReady`
- `ppCartSessionTransactionStart`
- `ppCartSessionTransactionFinish`
- `ppCartSessionConverted`

### Dynamically updating pre-orders as they’re made

PreProduct lets you tap into certain Javascript events and update the `event.detail.itemAddition` property. This updated version of the item will then be respected by PreProduct.

Supporting events:

- `ppCartSessionTransactionReady`
- `ppCartSessionTransactionStart`

For example, if you wanted to update the line item properties depending on the customer’s selected form inputs:

```javascript
window.addEventListener('ppCartSessionTransactionReady', (e) => {
  const form = document.querySelector('#fancy-form');
  const inputs = form.querySelectorAll('input[type="text"]');

  inputs.forEach((input) => {
    e.detail.itemAddition.properties[input.name] = input.value;
  });
});
```