@Propero
thank you for the suggestion.
however it still only shows inventory for whatever Variant is first loaded, and does not change when you change variants from a drop down selection or similar.
i did manage to get it to work though! in another thread, i read you needed to add this script to theme.js:
if (variant) {
if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
if( variant.inventory_quantity > 0){
jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + 'in stock.');
}
else {
jQuery('#variant-inventory').text("This product is sold out");
}
} else {
jQuery('#variant-inventory').text("This product is available");
}
} else {
jQuery('#variant-inventory').text("");
}
it also had instruction to add something different to the product-template.liquid file, but that didn’t work, so i’m omitting it from this post.
however, using both the original code i posted above AND the theme.js script, it works in an interesting way.
when the page first loads, it uses the product-template.liquid code to show the inventory of the first selected variant. i know this, because i had slightly different text between the 2 code snippets.
when you choose another variant, then the theme.js snippet kicks in and updates for that variant. selecting the original variant continues to use the theme.js code to show the inventory.
so far, i can’t make it show the theme.js code when you first load a page, but that works fine for me. i might continue trying to figure it out, but for now, it seems to work. i’ll check all of my products and see what happens. but you definitely need the theme.js script to make it update as you change variants.
as mentioned in the other thread with the theme.js code, you need to place it in a specific area in the existing code. they suggested to put it in the “variantPriceChange” trigger area, but if my products had the same price, i don’t think it actually changed. i may be wrong, but regardless, i instead placed it at the end of another section, which i’ll post below including the new code needed:
/**
* Event handler for when a variant input changes.
*/
_onSelectChange: function() {
var variant = this._getVariantFromOptions();
this.$container.trigger({
type: 'variantChange',
variant: variant
});
if (!variant) {
return;
}
this._updateMasterSelect(variant);
this._updateImages(variant);
this._updatePrice(variant);
this._updateSKU(variant);
this.currentVariant = variant;
if (this.enableHistoryState) {
this._updateHistoryState(variant);
}
if (variant) {
if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
if( variant.inventory_quantity > 0){
jQuery('#variant-inventory').text('We have ' + variant.inventory_quantity + ' in stock.');
}
else {
jQuery('#variant-inventory').text("This product is sold out");
}
} else {
jQuery('#variant-inventory').text("This product is available");
}
} else {
jQuery('#variant-inventory').text("");
}
},
again, i’m using the Debut theme, so it might look different for each theme. but you need to place this within an area that changes the data when you change variants.
for me this seems to work for now. it feels very complicated for someone who isn’t a code engineer like me, but those familiar with shopify code might think it’s obvious hehe. hopefully this helps others!
