Display variant inventory quantity on product page (Minimal theme)

Solved
Highlighted
Shopify Partner
17 1 6

The intention is to show product variant inventory details on the product page.

This should change as the variant changes, exactly as the price changes.

 

After reading various posts with a similar question, I failed to find an answer and wrote my own code, which is not working.

 

The approach taken was to add a place holder in the sections/product-template.liquid and to use jquery to change the text from productPage: function(options) in assets/theme.js

 

To my surprise, I found that inside productPage variant.inventory_quantity is not defined, whereas variant.price is.

To explain better the problem I am pasting below the differences between the original Minimal Theme and the one I am using.

 

diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
181a182,190
>           <div id="variant-inventory">
>           {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
>             In Stock ( {{ variant.inventory_quantity }} )
>           {% else %} 
>             Print On Demand ( {{ variant.inventory_quantity }} )
>           {% endif %}
>           </div>

diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1042
>         if (variant.inventory_quantity)
>         {
>           if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") 
>           {
>             if ( variant.inventory_quantity > 0){
>               jQuery('#variant-inventory').text('In Stock (' + variant.inventory_quantity + ')');
>             } 
>             else {
>               jQuery('#variant-inventory').text('Print On Demand');
>             }
>           } else {
>             jQuery('#variant-inventory').text("This product is available");
>           }
>         } else {
>           jQuery('#variant-inventory').text('variant.inventory_quantity undefined for price ' + variant.price);
>         }
>       } else {
>         jQuery('#variant-inventory').text("");
>       }
>       
>       if (variant) {

 

 

And here is what I get in a product page:

First Variant

First VariantFirst Variant

 

Second Variant

Screenshot 2020-11-19 at 17.51.07.png

i.e: both show that inventory_quantity is undefined but price is well defined !!!!!!

 

0 Likes
Highlighted
Trailblazer
245 1 51

Hi @martinR1 

I see that you have it working on your website. I am using Minimal as well and would love to be able to show the variant inventory. Would you mind sharing the final code?

Thanks,

Leila

0 Likes
Highlighted
Shopify Partner
17 1 6

This is an accepted solution.

I got the solution by looking at the way different people tried solved similar issues.

The problem I found as described in my initial message is that the variant object that arrives to productPage is incomplete, i.e, it is not a full ShopifyAPI::Variant.

So, the solution is to assign to a global object all possible variant inventor_quantity and retrieve the appropriate one at productPage time.

 

The following are the differences applied to the original Minimal theme.

diff -w -i original/sections/product-template.liquid myversion/sections/product-template.liquid
0a1,7
> <script>
>   window._VARIANTS = {};
>   {% for variant in product.variants %}
>     window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
>   {% endfor %}
> </script>
> 
207a215,227
>             <div class="product-inventory-available">
>               <div id="variant-inventory">
>               {% if variant.inventory_management == "shopify" and variant.inventory_quantity > 0 %}
>                 In Stock ( {{ variant.inventory_quantity }} )
>               {% else %} 
>                 Print On Demand ( {{ variant.inventory_quantity }} )
>               {% endif %}
>               </div>
>                <div id="variant-inventory2">
> 			    Delivered next week.
>                </div>
>             </div>
>           

diff -w -i original/assets/theme.js myversion/assets/theme.js
1021a1022,1045
>         var quantity = _VARIANTS[variant.id];
> 
>         if (!quantity) {
>           quanrtity = 0
>         }
>           
>         if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
>         {
>           if ( quantity > 0){
>             jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
>             jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
>           }
>           else {
>             jQuery('#variant-inventory').text( 'Available: Print on demand.');
>             jQuery('#variant-inventory2').text('Delivered next week.');
>           }
>         } else {
>           jQuery('#variant-inventory').text("This product is available");
>         }
>       } else {
>         jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
>       }
> 
>       if (variant) {

 

 

 

Highlighted
Trailblazer
245 1 51

Hi @martinR1 

I really appreciate your reply and for taking the time to post that:)

It seems like it would be working for me except the code added to theme.js is breaking my store. (Variant selector is gone, main navigation drop down menu is gone and a couple other things.)

I'm unfamiliar with js. I could not find similar code to edit so I just pasted it to the file:/

0 Likes
Highlighted
Shopify Partner
17 1 6

You probably inserted the code in the wrong place ( or did not remove the diffs prefixes ">" )

The diff numbers are telling you where to insert with respect to the original code.

1021a1022,1045

 The numbers say that at line 1021 you should insert lines 1022 to 1045

Here is the context where you should be inserting:

    productPage: function(options) {
      var self = this;
      var moneyFormat = options.money_format;
      var variant = options.variant;
      var translations = options.translations;

      if (variant) {
=====> INSERT HERE <=====

 

 

So it should look as follows:

 ... 
productPage: function(options) {
      var self = this;
      var moneyFormat = options.money_format;
      var variant = options.variant;
      var translations = options.translations;

      if (variant) {
        var quantity = _VARIANTS[variant.id];

        if (!quantity) {
          quanrtity = 0
        }

        if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue")
        {
          if ( quantity > 0){
            jQuery('#variant-inventory').text( 'Available: ' + quantity + ' in stock.');
            jQuery('#variant-inventory2').text('Delivered next day (if ordered before 1pm).');
          }
          else {
            jQuery('#variant-inventory').text( 'Available: Print on demand.');
            jQuery('#variant-inventory2').text('Delivered next week.');
          }
        } else {
          jQuery('#variant-inventory').text("This product is available");
        }
      } else {
        jQuery('#variant-inventory').text('quantity undefined for price ' + variant.price);
      }

      if (variant) {
        // Update variant image, if one is set
        if (variant.featured_image) {
          var newImg = variant.featured_image;
          self.switchImage(newImg.id);
        }

        // Select a valid variant if available
       ...
Highlighted
Trailblazer
245 1 51

Thank you @martinR1 . It is working perfectly. 

I did put it in the wrong place. My line numbers are different but it wouldn't have made a difference. I wouldn't have known where to place the code if you hadn't told me. Thanks again! You made my day. 

Leila

Highlighted
New Member
2 0 0

Hello,

@martinR1  am setting up my site with the minimal theme https://emily-keating-designs.myshopify.com/ and I would love for my customers to be able to see the quantity available for an item on the product page, instead of finding their desired quantity unavailable at the checkout stage where it can be frustrating. Will the code you have posted here work even though I don't have variants set up? Although I don't really know the coding, I can at least get to the edit code section and make little changes here and there if I can figure out where it goes. TIA for any advice. 

-Emily

0 Likes
Highlighted
New Member
6 0 0

I'm trying to get this working as well, I have a quick question @martinR1 .  In one of your sections it shows:

 

if (!quantity) {
          quanrtity = 0
        }

 

is there a misspelling there, should "quanrtity" be "quantity"? 

0 Likes
Highlighted
Shopify Partner
17 1 6

Hello Emily,

 

I have not tested it with a product with no variants, however, I just created a test product with no variants. Looking at the JSON associated with it it does have one single variant, as a container for the data that would otherwise exist for each variant. It does make sense to implement a generic solution for no variants as just one variant.

So I suggest you do try my fix. And please let the world know if it works

Highlighted
New Member
6 0 0

I am new to Shopify terminology, but I believe this product from my page has no variants:  https://midwestmealworms.com/collections/all/products/sifting-tray

and it works / shows inventory, as do my products w/ variants.

0 Likes