Single-page apps/stores

Useful for headless stores using Javascript frameworks like React etc.

On a single page app, PreProduct’s script may not get reinitialized for each new product page. This causes an issue where the pre-order front-end doesn’t load. The below snippet solves this by listening to a custom event (we’ve used Gatsby’s `onRouteUpdate` here).

window.addEventListener(`onRouteUpdate`, () => { 
   window.preproduct = null, window.meta = null;
   window.Shopify = null, window.PP_storedButtons = null;
   var ppPledgeDiv = document.getElementById("preproduct-pledge");

   if (ppPledgeDiv){
     window.PPisHeadless = true;
     PPgetListingViaAPI()
   }
})


If you use variants, you’ll also need to keep the variant= param in the page’s URL set to the currently selected variant. Listening for a change event on your variant field is a good way to go. Then running something similar to the below to populate the variant URL param.

let url = new URL(window.location.href);
url.searchParams.set("variant", variantId)
window.history.pushState(null, "", `${url.pathname}${url.search}`);
let locationChangeEvent = new Event('locationchange');
window.dispatchEvent(locationChangeEvent);


If your product pages use different buy-now button instances, you may need to tell PreProduct to re-evaluate the buttons on the page (that way it can smoothly hide and unhide them when needed).
This can be done by running the below:

window.PP_storedButtons = null;