Home About Blog Terms Docs Contact
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);
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);
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;
Try PreProduct today