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’ll need 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:
What 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.
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’ll need 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:
What 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, any page 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.platformstc];
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.
