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>

[tim]

Royce, 

the initial output should be done in Liquid. Javascript code is only run (usually) when visitor changes the drop-downs (clicks the swatches). So you basically need to repeat the javascript logic in your initial liquid  and instead of 

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

do this

<span class="variant-inventory">
 {% if current_variant.inventory_quantity > 0 %}
   Delivery Estimate: 2-4 working days
 {% else %}
   Delivery Estimate: 3-4 weeks
 {% endif %}
</span>
<a class="btn long-shipping-open-popup" href="#long-shipping"
 {% if current_variant.inventory_quantity > 0 %}
   style="display:none"
 {% endif %}
>  
   <i class="fa fa-question-circle-o" aria-hidden="true"></i>
</a>

And in your javascript :

if( inv_qty[ variant.id ] > 0 ){
	$( this.selectors.variantInventory ).text("Delivery Estimate: 2-4 working days"); 
	$( '.long-shipping-open-popup' ).hide();
} else {
	$( this.selectors.variantInventory ).text("Delivery Estimate: 3-4 weeks");
	$( '.long-shipping-open-popup' ).show();
}

[Royce]

Hi Tim,

This is perfect. Thank you so much for your guidance 🙂

[wearesoy_Admin]

HI Tim and Royce,

I am using the boundless theme and having a bit of an issue. I only have basic knowledge so please bare with me.

I have followed the instructions the code from "For anyone who's interested in the updated snippets:" comment posted by Royce.

However, when I change the variant in the dropdown selector, only the SKU updates. The Inventory number fails to update. I have noticed that when I refresh, I am calling the URL with "?variant=6776886886446" at the end, then the right inventory number is correct on load. 

Any help would be appreciated.

Thanks in advance.

[tim]

Looks like there is something wrong with the javascript part of the code.

It would be much easier to troubleshoot if you share your storefront password and a link to "offending" product. 

[wearesoy_Admin]

Hi Tim,

I have share the info to your email tairli@yahoo.com

Thanks.

[KVWebTest]

Hi Tim! Thank you for your service to the community. It seems like you are the true expert on this issue. 

I've read through this thread and tried to apply the code here to my site but no luck. I'm pretty good with logic but not so good with javascript. The logic portion works as expected but I haven't gotten any javascript to refresh the quantity displayed when I select a new variant. 

I've also tried what yourself and others have suggested on these threads: thread 1 , thread 2, thread 3. But nothing seems to work to refresh the current_variant.inventory_quantity. 

When I manually refresh the page the info updates correctly. So it seems like it's available to be refreshed. It's just a matter of how. 

I'm using the Minimal theme. 

[KVWebTest]

This seems to have solved it - here's the js syntax that works for Minimal:

        if ( variant.inventory_quantity >=1 ){
		$('#variant-inventory').html('We have ' + variant.inventory_quantity + 'of this');
        } 
        else {
        $('#variant-inventory').html("normal fab time");
        }

[Arthur_Cruz]

Registered in this forum just to say: thank you, Tim!

You are the man!

[stereo]

Hi, have anybody solved this for Brooklyn theme?? So far my SKU is updating, but inventory quantity stays at what variant page was loaded at. I think I tried every combination now and it is still not working. 

This is product-template.liquid:

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

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

and this is theme.js.liquid:

  // create selector for variant inventory quantity, non-relevant selectors omitted
  var selectors = {
    SKU: '.variant-sku',
    inventory_quantity: '.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.inventory_quantity, this.$container).html(inv_qty[ variant.id ]);

[stereo]

Have anybody found a solution for Brooklyn? I modified product-template.liquid and theme.js.liquid but it is still not updating. Maybe I paste the code in theme.js.liquid somewhere in a wrong place? Where should it go?