Show Quantity in stock on Product Page and have it change per variant - Latest working method?

Highlighted
Excursionist
21 0 4

Hi,

I'm using the Debut theme. 

I've looked through maybe 10 threads on this subject, and each one has sort of "piece-meal" solutions and I can't seem to make it work even after trying all sorts of combinations.

I'm posing this question again to hopefully get a concise and clear method of accomplishing the task

So far, I've been able to post the following code after my Product Price area in product-template.liquid:

 <p>              
           <div id="variant-inventory">
 {% if product.variants.first.inventory_management == "shopify" %}
    {% if product.variants.first.inventory_quantity > 0 %}
       We currently have {{ product.variants.first.inventory_quantity }} in stock.
    {% else %}
       The product is out of stock
    {% endif %}
 {% else %}
    This product is available
 {% endif %}
</div>
           </p> 

 

 

 

I paste it after the "<p class="product-single__price product-single__price-" section and it sits where I want on the page.

This works, but only pulls up the Inventory number for the default Variant that loads on the page.

From what I've read, I think that some sort of script is needed to make it change the number when a new Variant is selected.

Again, I've looked through many threads and tried all the solutions posted there, but none of them worked. I'm not a code engineer by any means, but can figure things out usually. This is definitely a stretch for me. 

I've seen references to putting a script in theme.liquid or theme.js, but again, nothing has worked.

Does anyone have a definitive solution to allowing the code I posted above to change when a different Variant is selected by the customer?

 

Thanks!

 
 
0 Likes
Highlighted
Shopify Partner
552 67 89

@Chris_Luke 

your code looks for first variant only hence the issue , please change this to as below and see

<p>              
           <div id="variant-inventory">
 {% if product.selected_or_first_available_variant.inventory_management == "shopify" %}
    {% if product.selected_or_first_available_variant.inventory_quantity > 0 %}
       We currently have {{ product.selected_or_first_available_variant.inventory_quantity }} in stock.
    {% else %}
       The product is out of stock
    {% endif %}
 {% else %}
    This product is available
 {% endif %}
</div>
           </p>
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Excursionist
21 0 4

@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!

 
 
 
 
 
1 Like