Displaying number of variants available

Highlighted
New Member
3 0 0

Hello,

I'm wondering if it's possible to show the number of variables currently available. I'm able to display the total number of variants but I don't want to include variants that are out of stock in  the total. The variable needs to be outputted inside the following loop:

{% for product in collections.upcoming-games.products %}

{% endif %}

Thanks

Alex

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

Hey there Alex!

I'll need a bit more detail - are you looking to output the total number of available variants? Or are you looking to show the number of available variants per product? 

Cheers,

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Highlighted
New Member
3 0 0

I would like to show the number of available variants per product.  I would like to add it within this block of code: http://pastie.org/private/xlxsz3wnewobo7ovkvktea

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

Gotcha. I think that should be possible, let me just try it out on my test shop. Will report back shortly!

-tetchi

www.tetchi.ca | www.twitter.com/t3tchi
0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
489 0 42

This should do the trick!

 

    {% assign num = 0 %}
    {% assign temp = 0 %}
    {% for variant in product.variants %}
       {% if variant.available %}       
          {% capture temp %}{{ num | plus: 1 }}{% endcapture %} 
       {% endif %}
    {% assign num = temp %}
    {% endfor %}  
     Available: {{ num }}

This would need to go inside the forloop for your products in your collection. You can see it in action here: https://crona-llc4353.myshopify.com/collections/all

Cheers!

-tetchi

 

www.tetchi.ca | www.twitter.com/t3tchi
Highlighted
New Member
3 0 0

Perfect! Thanks!

0 Likes
Highlighted
New Member
2 0 0

This is the only code that works (I've tried about 20 different ones).

Could you convert this into JavaScript?

0 Likes
Highlighted
New Member
2 0 0

Answering my own question here as I've figured it out -- hope this helps someone else.

	// The product object - product.variants array 
	var productVariants = data['variants'];
	
	// The total count of Variants, in the array of Variants that are available (variant.available object)
     	var  variantTotal = 0;

	for (var i = 0; i < productVariants.length; i++) {
           if (productVariants[i].available) {
             ++variantTotal 
           	}	
       	 };

My theme's product page was entirely javascript so I needed to figure this out. They also prepared the "data" part so that it was able to use all the available product/variant objects out there (https://shopify.dev/docs/themes/liquid/reference/objects/product)

Seems simple I guess for most but I'm just starting to learn to code so this was a bit rough to figure out.

0 Likes
Highlighted
Shopify Partner
10 1 0

Beautiful solution tetchi, thank you.

Just in case the reader need to add conditional logic based on the value of the variable num, please take into account that for some strange reason although the variable is being treated with a plus artifact is still considered as a string, so be sure that you compare that value with a string, not a number.

 

 

{% assign num = 0 %}
{% assign temp = 0 %}

{% for variant in product.variants %}
   {% if variant.available %}       
      {% capture temp %}{{ num | plus: 1 }}{% endcapture %} 
   {% endif %}
	{% assign num = temp %}
{% endfor %}  

{% if num == '1' %}

{% else %}

{% endif %}

 

0 Likes