Skip to main content
Solved

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

  • February 28, 2022
  • 1 reply
  • 1393 views

Forum|alt.badge.img+2

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?

Best answer by Dov

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 no variant 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, if the search does not return any values, we see this error and the modal does not appear. If you are testing in a dev environment, this error may be due to the fact that variant selectors are missing here (and could work perfectly fine in production if it contains this data).

Also, BIS can be impacted by 3rd party extensions so if you are using 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.

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

1 reply

Dov
Forum|alt.badge.img+61
  • Klaviyo Alum
  • 1493 replies
  • Answer
  • March 1, 2022

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 no variant 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, if the search does not return any values, we see this error and the modal does not appear. If you are testing in a dev environment, this error may be due to the fact that variant selectors are missing here (and could work perfectly fine in production if it contains this data).

Also, BIS can be impacted by 3rd party extensions so if you are using 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.