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 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.

PPcartSession.items

push #

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

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.

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.

PPcartSession.clear()

increment #

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

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.

PPcartSession.decrement(
  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. e.g. redirect to your cart page or redirect to checkout.

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.

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:

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;
  });
});