PreProduct can integrate with JavaScript frameworks like React and other single-page applications.

Lifecycle #

PreProduct watches for changes on:

• Buttons tagged with data-native-pre-order-btn
• Or the PreProduct snippet element div#preproduct-pledge

It monitors changes to:

• data-id attribute
• data-starting-variant attribute

When these attributes change, PreProduct automatically re-requests and reinitializes as needed, ensuring your pre-order functionality stays in sync with your SPA’s state.

Tracking Selected Variants #

If your products have variants, keep the current selection in sync by maintaining a variant parameter in the page URL. Here’s how:

1. Listen for the change event on your variant selector
2. Update the URL with the new variant ID:

variantSelector.addEventListener('change', (e) => {
    let variantId = e.target.value;
    
    // Update URL with new variant
    let url = new URL(window.location.href);
    url.searchParams.set("variant", variantId)
    window.history.pushState(null, "", `${url.pathname}${url.search}`);

    // Trigger locationchange event
    let locationChangeEvent = new Event('locationchange');
    window.dispatchEvent(locationChangeEvent);
});

This ensures PreProduct stays synchronized with your selected variant as customers browse your store.