Klaviyo BackInStock modal unable to read ID when product variant changes.

Question

I’ve been dealing with some issues related to the Klaviyo backinstock modal and a shopify store. The issue is whenever you load the page, and then select a new product variant (that is out of stock) and click the “Notify me when available” button, you get a “Uncaught TypeError: Cannot read properties of undefined (reading 'id')”.

The interesting thing about this issue is it only happens when you load the page, and then select a variant that is out of stock. If you reload the page with this variant selected, the modal will work fine. I looked into the Klaviyo code and can see that it either selects the ID from the query params in the URL, or from a hidden form field. When i change the product variant, the URL is still averrable to provide the ID.

I’ve tried to reinit Klaviyo all together when the variant is changed, but i am still getting this issue. Has anyone experienced this before?

Dov · Accepted Answer

Hi@freebird,Thanks for sharing this with the community.This error typically tells us that the Klaviyo BIS script is not able to determine the products/variants on the page. For example, if there are novariant selectors on the page (size, color, etc.).The Klaviyo BIS script finds the product variant ID by searching the DOM for the variant_select with the matching id, however, ifthe search does not return any values, we see thiserror and the modal does not appear. If you are testing in a dev environment, this error may be due to the fact thatvariant selectors are missing here (and could work perfectly fine in production if it contains this data).Also,BIS can be impacted by3rd party extensions so if you areusing any other plugins or extensions related to product selectors/product pages, I recommend disabling them for the purposes of testing.I hope that is helpful.

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials