Display variant inventory quantity on product page (Boundless theme)

Shopify Partner
2000 25 539

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();
}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
Shopify Partner
12 0 1

Hi Tim,

This is perfect. Thank you so much for your guidance :)

0 Likes
New Member
2 0 0

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.

0 Likes
Shopify Partner
2000 25 539

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. 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
2 0 0

Hi Tim,

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

Thanks.

0 Likes
Shopify Partner
16 1 0

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 2thread 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. 

0 Likes
Shopify Partner
16 1 0

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");
        }

 

0 Likes
New Member
1 0 0

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

You are the man!

0 Likes
New Member
4 0 0

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 ]);

 

0 Likes
New Member
4 0 0

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?

0 Likes