Finally Functional Code to Show Inventory Quantity for Different Variants

[hugoindustries]

I searched far and wide and saw a bunch of posts with code to show inventory quantity on the product page but none of them worked properly on products that had variants. It would only show the inventory quantity for the default variant that was selected when the page loads. If you changed the variant, the quantity would not update.

The following is the code I use that works. I'm using Simple theme but this will work with Debut and many other themes.

1. Go to Edit Code of your theme
2. In Sections > product-template.liquid paste the following code wherever you want the text showing the inventory quantities to show up. In my case I chose below the price and above the quantity selection field. 

{% comment %} Inventory tracking on product page {% endcomment %}
          	{% for variant in product.variants %}
                <div InventoryManagment data-id="{{variant.id}}" data-inventory="{{variant.inventory_quantity}}" style="display:none;"></div>
            {% endfor %}
          
          	
            <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
              {% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
              We have <b>{{ current_variant.inventory_quantity }}</b> in stock.
              {% else %}
              {% endif %}
            </div>
{% comment %} END inventory tracking on product page {% endcomment %}​

• Then open Assets > theme.js.liquid and paste the following in whichever section of your theme handles the changing of variant. In other words, every theme has an event handler or section that gets called when the variant is changed by the user. This is where you want to put the following code so that it runs when the variant is changed. Note: YOU MUST HAVE SOMETHING IN THE ELSE STATEMENT OTHERWISE THE TEXT WON'T CHANGE WHEN THE VARIANT CHANGES. For the Simple theme, I pasted this on line 1068 right below the "var variant = options.variant;" line.

      if (variant) { 
        let inventoryHash = document.querySelectorAll('[inventorymanagment]');
      	debugger;
        
        Array.from(inventoryHash).forEach(
        (Selectedvariant)=>{
          if(Selectedvariant.dataset.id == variant.id){
            if(Selectedvariant.dataset.inventory < 10)
            {
              $("#variant-inventory").html("Only <b>"+ Selectedvariant.dataset.inventory +"</b> left in stock. <p>");
            }
            else{
              $("#variant-inventory").html("<p>");
            }
          }
        }
      );

And that's it. It should work now. Shout out to @tim for being a great resource in this forum and answering so many questions. While he didn't directly answer questions for me, his past posts helped me make sense of it all.