Skip to main content

Is there a way to refresh the product data on a Shopify page via Javascript, that also updates Klaviyo’s Back in Stock functionality? We have a Shopify site that has products split by color, but the products are linked and fetched on a single product page. Ideally when another product is fetched, we’d like the Klaviyo Back in Stock to refresh the new product’s data, but I haven’t found a way to do that, so I’m wondering if it’s even possible. Thank you!

@FMSupport The synchronization between Shopify and Klaviyo should occur in real-time, as it is managed through product webhooks.  However, when a user views a product page on their own browser, there might be a slight delay but that is independent of Klaviyo or Shopify.


@whereisjad unfortunately that’s not my experience. When I’m on a product page, and I click a swatch to fetch a new product’s content/data and the new product is out of stock, clicking Klaviyo’s back in stock button errors out. It only works when I refresh the entire page again. So I’m wondering if there’s a Klaviyo back in stock re-initialization method I can call to refresh the product data. 


@FMSupport that is what I meant is that the Klaviyo widget operates on the client side, so it does not receive real-time updates after the page has loaded. Unless the user refreshes the page, the Back in Stock widget will not reflect any new changes made since the initial page load.  You would need to implement something from scratch that could detect product/variant changes on the client side and then allow you to call below if wish to create a Subscribe to Back in Stock event in Klaviyo:

https://developers.klaviyo.com/en/reference/create_client_back_in_stock_subscription

 


@whereisjad ah okay, I got it. I was hoping there was a quick way to refresh the product data on the client side, which is possible with other types of apps such as review apps - they often have some sort of app.init(); method that we can call. Thanks for your help!


@FMSupport you are definitely onto something here.  All I could say is that there isn’t documented way to tap into the init code beneath the Backbone.JS implementation.  If you open the JS console for a Shopify Product page with the Klaviyo BIS add-on you will see something like below:

uKlaviyo / Onsite] Initializing.
onsite.js:144 .Klaviyo / Onsite] Executing: init
onsite.js:144 .Klaviyo / Onsite] Executing: enable
onsite.js:144 .Klaviyo / Onsite] Variants:  6 Unavailable Variants:  0

If you determine a way to tap into it and call the init method, you’ll be my hero.