Useful for headless stores using Javascript frameworks like React etc.

Lifecycle #

PreProduct will watch it’s snippet (div#preproduct-pledge) for any changes to the data-id allowing it to re-request and initialise as needed. It’s just important to make sure any data-starting-variant attributes set on the snippet or primary pre-order button belong to the new product id.

Keeping track of the currently selected variant #

If you use variants, you’ll also need to keep a 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);