My variant.inventory_quantity is undefined

[MoniAli]

Hi,

I'm using the Brooklyn theme and attempting to allow customers to continue purchasing items that are out of stock, but displaying a message on the variant page that says "This product is on backorder, please expect delayed shipping". 

I've added some console logging to my theme.js and it seems that my variant object has no attribute named inventory_quantity, and when I try to console.log(variant.inventory_quantity) it comes up as undefined. 

I was wondering why this might be, and where the inventory would be tracked then so that I could conditionally display a message?

Willing to hire a developer if needed, thanks!

My site: https://www.eastlinq.com (password is eastlinq)

[KarlOffenberger]

The JSON object for product and product variants doesn't have all / same properties as the Liquid object which is why you don't have the variant quantities. Instead, you have the available property of type boolean. However, if you set inventory to allow purchase when out of stock, that available property will be true even when inventory level is 0. So it's of little use for warning customers that it's actually unavailable and would require some waiting for restocking / shipping.

In order to get that, you'd need to modify your product template, add an extra <script /> element where you'd serialise the product variant.inventory_quantity along with variant ID using the Liquid | json filter. Then in your theme.js you need to find the bit of JS that handles the switching between variants on product page so that you load your extra JSON data, associate the inventory levels of variants with the already existing variants objects and do your backorder notification from there on.

Hope this helps!

p.s. if not, Shopify Experts are for hire here or job postings can be made here.

[kenkinneen]

Hi,

Unfortunately you can't use liquid tags in Javascript. 

You can also see this guide here on making a separate product template when the stock is 0, would that help?

Thanks,

Ken.

[MoniAli]

Hey so I'm trying to implement your solution, and it turns out in my product-template.liquid even when I just try displaying {{variant.inventory_quanitity}} nothing is displayed. Do you know what the issue could be here? Shouldn't that display the number (for example: 5 if 5 are in stock) on the page?

[JeremyDevmore]

Are you inside a product variant loop or have you assigned a variant to a the variant variable?

[AlecuMarian]

First, save your variants stocks in a JS global variable in product-template.liquid

            {% comment %} Inventory tracking on product page {% endcomment %}
            <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
              {% if current_variant.inventory_management == "shopify" %}
              	<span class="variant-inventory-number">{{ current_variant.inventory_quantity }}</span> in local stock!
              {% else %}
              	This product is available.
              {% endif %}
            </div>
            
            <script>
              window._VARIANTS = {};
              {% for variant in product.variants %}
              	window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
              {% endfor %}
            </script>

Then, in theme.js.liquid, in productPage callback, right before "// Also Show SKU", add the following:

        if (variant.inventory_management == "shopify") {
          var quantity = _VARIANTS[variant.id];
          
          jQuery('.variant-inventory-number').text(quantity > 0 ? quantity : 0);
          
        }

[Nate_Daily]

I manage the code for a few Shopify themes. variant.inventory_quantity used to return an integer, but now as of 2019, is not included in the json object, that is why it is undefined. But if your store was created before 2019 variant.inventory_quantity will return the current quantity.

[spbp]

Perfect, this works! Thank you

[Bill6]

So how are you now getting the variant.inventory_quantity?  

[spbp]

I am using AlecuMarian's global _VARIANTS method. It is working with the free Simple theme; check out the "Only <x> left in stock" text at https://shopnowbuycheap.com/products/ring-light.