Showing the stock quantity per variant

New Member
4 0 0

Hi everyone,

I'm new here.  ;)

Just wondering if you could please help me?

I have used the following in product-template.liquid to show inventory quantity and it seems to work well when the page loads, accurately showing the stock quantity of the default variant.

            {% comment %} Inventory tracking on product page {% endcomment %}
            <div id="variant-inventory" class="{% unless current_variant.available %} hide {% endunless %}">
              {% if current_variant.inventory_management == "shopify" and current_variant.inventory_policy != "continue" %}
              We have {{ current_variant.inventory_quantity }} left in stock.
              {% else %}
              This product is available.
              {% endif %}
            </div>

PROBLEM IS: When I select another variant, the stock value doesn't update.

Do I use selectCallback somehow to review the stock quantity of the selected variant?  If so, how should I do that?

I've done some research and apparently refreshing the page each time a new variant is selected is not good practice, but I'm stuck and need your help.

 

Thanks for taking the time to read this, and I appreciate any help you can offer.

Regards,

John

0 Likes
Shopify Partner
1663 50 174

The code you provided is the server side template that shopify renders into a final html,css,js version then serves to your customers browser(client) when they change the variant that is only using html,css,javascript on the customers local computer to update the display, this means:

You need to update the logic that selectCallback uses to display variant information to now include the new logic of updating the stock. For some themes a catch is wheter or not that data is present in the customers browser for use in javascript or if it needs to fetch it from shopify. This also means updating the text.

90% your gonna want to change this:

We have {{ current_variant.inventory_quantity }} left in stock.

to 

We have <span class="variant_inventory_quantity">{{ current_variant.inventory_quantity }}</span> left in stock.

So you can target it in javascript.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
4 0 0

Thanks for your reply Paul.

I've updated that piece to your suggestion.

How do I now have it update the stock value as they select new variants?

 

0 Likes
Shopify Partner
1663 50 174

 How do I now have it update the stock value as they select new variants?

You need to update the logic that selectCallback uses to display variant information to now include the new logic of updating the stock. For some themes a catch is wheter or not that data is present in the customers browser for use in javascript or if it needs to fetch it from shopify. This also means updating the text.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
4 0 0

Sorry for being dumb, I'm a total noob when it comes to this.   ;(

Currently, in theme.js.liquid the following selectCallback exists:

 

    initProductVariant: function() {
      var self = this;
      var product = this.productSingleObject;

      var selectCallback = function(variant, selector) {
        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart: theme.productStrings.addToCart,
            sold_out: theme.productStrings.soldOut,
            unavailable: theme.productStrings.unavailable
            
          }
        });
      };

      this.optionSelector = new Shopify.OptionSelectors(
        'ProductSelect-' + this.sectionId,
        {
          product: product,
          onVariantSelected: selectCallback,
          enableHistoryState: this.enableHistoryState
        }
      );

 

What do I need to change/add to have it update the stock?

 

Many thanks,

J.

0 Likes
Shopify Partner
1663 50 174

You'll need to trace the function self.productPage({ and figure out how it's changing the page then make it change the quantity selector, here it's being given an object.

Provide a shopify store name with storefront password, or theme preview so others can see what's going on.

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes
New Member
4 0 0

Hi Paul,

Here is the preview:

https://z85y0s2a8rrsnxpg-27245338.shopifypreview.com

 

Many thanks,

J.

0 Likes
Shopify Expert
2613 49 614

John, simply search for the following comment in theme.js.liquid:  // Show SKU

That's the approximate location where you should put the code to update your inventory. There is a but though -- check this thread: https://ecommerce.shopify.com/c/ecommerce-design/t/display-variant-inventory-quantity-on-product-pag...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like
Tourist
3 0 7

Hi All,

Firstly, a huge thanks to Tim for his awesome answers. I really want ted to make this work simply, and i didn't see any threads with the exact answer due to the differences in templates, or were out of date.

I'll just add to this with my experience, and how i got this working.....

Theme: Debut
File: Assets > theme.js 
Find the function: theme.Product = (function() {
(or search for SKU: '.variant-sku',     ... around line 2763)

and after SKU, add the following:

variantInventory: '.variant-inventory',

Next, find the function:  _updateSKU: function(evt) {
.. around line 3167

Underneath

// Update the sku
$(this.selectors.SKU).html(variant.sku);

add

$(this.selectors.variantInventory).html(inv_qty[ variant.id ]);
//alert(variant.sku + ' - ' ); 

Save the file...

Next, open your prodct template (I created a new one, but we'll use product.template.liquid as the example)

File: Sections > product.template.liquid

Search for <h1 class="product-single__title">{{ product.title }}</h1>

and place the following code under, or wherever you want it to appear.

<p>We have <strong class="variant-inventory">{{ current_variant.inventory_quantity }}</strong> tickets available.</p>


Next, at the end of this file, simply add the following code:
 

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

Save the file, and test.

hope this helps others.

 

 

7 Likes

I love you Tim <3

And thanks Ryan for placing all together and be so precise on where to write each piece of code. For newcomers (as me) is pretty helpful.

1 Like