Integrate "Back in stock" button in shopify pages, instead of product page.

Question

Hello all, I am currently trying to integrate the “Back in stock” button/modal on a landing page of a Shopify store.

So far I managed to correctly add the button, my main problem is that it looks like that the onsite.js is not loading the product/variation information. Without that data, when clicking on the button I get a “Uncaught TypeError: Cannot read properties of undefined (reading '0')”.

Checking the console it looks like Klaviyo / Onsite is loading, but it does not initialize the product data, like it does in the product page:

[Klaviyo / Onsite] Initializing.
[Klaviyo / Onsite] Executing: init
[Klaviyo / Onsite] Executing: enable

While on the product page i get:

[Klaviyo / Onsite] Initializing.
[Klaviyo / Onsite] Executing: init
[Klaviyo / Onsite] Executing: enable
[Klaviyo / Onsite] Variants: 5 Unavailable Variants: 5
[Klaviyo / Onsite] Selected Variant: 12345

I skimmed through the documentation but I cannot find anything useful, is there anything I can look for to initialize the product data correctly?

Thanks

retention · Accepted Answer

Hi ​@orfra, welcome to the community!If you want to add a “Back in Stock” button on anywhere outside of the product page, then you’llneed to use the “Back in Stock” API endpoint and pass in all the information that it requires programmatically. This also means you may have to recreate the button and the modal experience as well.You can read more about that here:Set up back in stock via APIWhat I haven’t tried, and maybe it will work, is if you can load the selected Product (and all it’s variables including the Variant ID) into the Page. What the onsite.js is looking for is a reference to a selected Variant ID so it knows the specific Product/Variant to subscribe the user to, and to know if it’s out of stock. However, this might be hacky as I don’t think the Back in Stock snippet code was designed to do this on a Page.

orfra · Answer

Hi ​@orfra, welcome to the community!If you want to add a “Back in Stock” button on anywhere outside of the product page, then you’llneed to use the “Back in Stock” API endpoint and pass in all the information that it requires programmatically. This also means you may have to recreate the button and the modal experience as well.You can read more about that here:Set up back in stock via APIWhat I haven’t tried, and maybe it will work, is if you can load the selected Product (and all it’s variables including the Variant ID) into the Page. What the onsite.js is looking for is a reference to a selected Variant ID so it knows the specific Product/Variant to subscribe the user to, and to know if it’s out of stock. However, this might be hacky as I don’t think the Back in Stock snippet code was designed to do this on a Page.I dug deeper in the onsite.js, and I am quite sure the required setup for the BIS button only runs on 2 sections of a Shopify site, anypage under the “/products” or “/collections” URLs, as of these two blocks of code:initialize: function (c) {c = this.settings().get("platform");var e = this.settings().get("is_quick_view");this.platform_implementation = g.platforms[c];this.model.set("is_quick_view", e);this.model.set("collection_urls", this.settings().get("collection_urls"));if (this.platform_implementation.isProductPage()) {this.model.set("is_on_collections_page",!1), this.createProductPageTrigger();}else if (this.platform_implementation.isCollectionsPage(null,this.model.get("collection_urls"))) {this.model.set("is_on_collections_page",!0), this.createCollectionPageTriggers();}else {this.model.set("is_on_other_page", !0);return}this.model.set("is_on_other_page",!1)},With the Shopify specifics that are:g.platforms.shopify.isProductPage = function (c) {c || (c = k.location.toString());return !!c.match(/\/products\//)};g.platforms.shopify.isCollectionsPage =function (c, e) {c || (c = k.location.toString());if (Array.isArray(e) && 0 < e.length) {for (var h = 0; h < e.length; h++) if (c.match(e[h])) return !0;return !!c.match(/\/collections\//)}};I can’t hack around using the “collections” logic, because it does not consider the product variations, so I guess the only option is to use the “Back in stock” via the API.

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials

Scanning file for viruses.

This file cannot be downloaded