Display variant inventory quantity on product page (Boundless theme)

[Royce]

Hi all,

I am trying to display variant inventory levels, tried a few guides https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-add-quantity-left-in-minimal-theme-421286/... but no luck so far.

The closest I've gotten is by doing this, you can see the actual issue here at https://som01.myshopify.com/products/canvas-bag-01?variant=7721586589738. I displayed both the SKU and variant inventory quantity to show that SKU changes but not the inventory quantity,

Inventory quantity is 100 only for the first variant, and it is 0 for the rest. When other variants are selected, it still shows 100.

To get the inventory quantity and SKU to display, I followed this guide https://help.shopify.com/themes/customization/products/features/show-sku-numbers#add-sku-numbers-to-...:

theme.js.liquid

  // create selector for variant inventory quantity, non-relevant selectors omitted
  var selectors = {
    SKU: '.variant-sku',
    variantInventory: '.variant-inventory'
  };

  // Show SKU
  $(selectors.SKU, this.$container).html(variant.sku);  

  // Show variant inventory quantity using similar code snippet to SKU, placed just below     
  $(selectors.variantInventory, this.$container).html(variant.inventory_quantity);

product-template.liquid

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span>
<span class="variant-sku">{{ current_variant.sku }}</span>

Appreciate your help!!

[tim]

Hi Royce,

the reason is here https://ecommerce.shopify.com/c/api-announcements/t/deprecated-notice-inventory_quantity-and-invento...

Your shop seems to be affected by this change and variant.inventory_quantity is undefined for your variant update function.

[Royce]

Hi Tim, 

Thanks for your reply. Now it all makes sense, can't seem to apply this to any theme. Is there a workaround for this issue?

[tim]

I'd be doing something like this in my liquid:

<script>
 var inv_qty = {};
 {% for var in product.variants %}
   inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
 {% endfor %}
</script>

and use inv_qty[ variant.id ] instead of variant.inventory_quantity in javascript.

This is from the top of my head and not tested in real life.

[Royce]

Hi Tim,

Thank you! It works now. You are truly an expert :)

For anyone who's interested in the updated snippets:

theme.js.liquid

  // create selector for variant inventory quantity, non-relevant selectors omitted
  var selectors = {
    SKU: '.variant-sku',
    variantInventory: '.variant-inventory'
  };

  // Show SKU
  $(selectors.SKU, this.$container).html(variant.sku);  

  // Show variant inventory quantity using similar code snippet to SKU, placed just below     
  $(selectors.variantInventory, this.$container).html(inv_qty[ variant.id ]);

product-template.liquid

<script>
 var inv_qty = {};
 {% for var in product.variants %}
   inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
 {% endfor %}
</script>

<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span>
<span class="variant-sku">{{ current_variant.sku }}</span>

[Royce]

Hi Tim,

It's weird. The code does not seem to work anymore. Tried it on other themes with the same results. Back to square one! 

[tim]

this.selectors.inventory_quantity is not defined, you have this.selectors.variantInventory in this theme...

[Royce]

Thanks Tim! Got it. 

I'm trying to achieve a message display depending on inventory quantity i.e. if 0 display Message 1, else, display Message 2. Tried this but it didn't work. Not sure what's the error... Appreciate your guidance on this! 

        if (inv_qty[ variant.id ]) <= 0 {
          $(this.selectors.variantInventory).text("long wait"); 
        }
        else {
          $(this.selectors.variantInventory).text("short wait");
        }  

[tim]

This is wrong (closing bracket is misplaced): 

 if (inv_qty[ variant.id ]) <= 0 {

 Should be :

 if (inv_qty[ variant.id ] <= 0 ) {

I'd do like this: 

$(this.selectors.variantInventory)
  .text( inv_qty[ variant.id ] > 0 ? "short wait" : "long wait" );

[Royce]

Hi Tim,

Thanks for the clear response. Sorry to trouble you!

Now, the inventory quantity is displayed on page first load instead of the message. Is there a way to display the message on page first load? This is also an issue for products without product variants, where inventory quantity is displayed instead of a message.

Separately, I also have a magnific pop-up on my product page that displays a more detailed message for items with longer shipping times. Is there a way to bind it to the jquery to display it only where estimated delivery time is longer, i.e. inventory quantity <= 0?

Sample of code on my product-template.liquid:

<a class="btn long-shipping-open-popup" href="#long-shipping">  
<i class="fa fa-question-circle-o" aria-hidden="true"></i></a>
.
.
<div id="long-shipping" class="mfp-hide">
{{ pages.long-shipping.content }}
</div>