In most cases, the variant id of a product is reflected in the URL when the variants of the product are changed.
In some Shopify themes, changing product variants doesn't affect the URL. Our app uses the variant id from the URL to recognize sold out items and display the notification button. If it can't find a variant id, the button won't display.
Although we have tried several methods to make the app compatible with these themes and in most cases it is, there may still be some themes that require more attention.
We have added the ability to add our HTML input and update the variants for these themes. Here's how you can do it:
Add the Code to Your Product Page: Begin by adding the following code to your product page.
_RestockConfig = window._RestockConfig || {}; _RestockConfig['developer_mode_variant_listener'] = true;
This creates a hidden HTML input element that our application will use to track the variant id.
<input type="hidden" id="restock-variant-change" />
2. Update the Value of the Input with Each Variant Change: Now, you need to create a function that updates the value of the input element with the selected variant id each time a variant change occurs. Here's a sample function:
function yourVariantChangeMethod(variant) {
...
const restockInput = document.getElementById('restock-variant-change'); restockInput.value = variant.id;
...
}And that's it! You've set up your theme to manually update variant ids. If you encounter any issues or need help implementing this solution, don't hesitate to reach out to our support team.