Variant Quantity - Debut Theme

[MikeLockwood]

I would like to add an available quantity label on the product page for the selected variant.  I figured I could use variant.inventory_quantity but that does not exist in the current_variant variable set in the product-template.liquid file.  Also, when you select a variant the current_variant variable is not updated.  I understand that this is being updated in a callback type function but if the property does not exist in the item then I can't update it.  Not sure what to do here.  My intent is to use the inventory quantity to set the max value of the quantity selection input therefore not allowing a use to add more than is available to their cart and not have to display an error if they do add more.

Thoughts?

[MikeLockwood]

So with a little work I found my own solution.  Took a bit of editing the theme.js file.  From what I found the existing code out there strictly depends on you having SKU's setup for your products.  Not sure we are using them as it is just 2 people now.  So I had to make some changes and add some functions so that for the Quantity it checks the variant.id value and then can change the text as needed.

[Dbean199]

where did you find it?

[MikeLockwood]

Dbean199,

I have actually extended this more than I originally planned, so please forgive the extra long response.

First, I added the following code to the products-template.liquid file just before the schema section.  This created an area of Variant ID's along with the inventory quantity.

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

 From there you can simply add some text to the product-template.liquid like the following to show the available quantity.

          {% if current_variant.inventory_quantity == 0 %}
             <span class="variant-inventory variant-sold-out"> {% include 'fa-icon-tag' %} We are currently out of stock on this item!</span>
            {% else %}
            <span class="variant-inventory">We have a total of {{ current_variant.inventory_quantity }} in stock!</span>
          {% endif %}

After that all the changes would be in the theme.js file.

The simplest way would be to write code in the "_updateSKU: function(evt)" function to rewrite the content of the span.  You would need to change the second code block to just be a single span.  What I did was the following.

In between the "_updateSKU: function(variant)" and "_updateHistoryState: function(variant)" functions I added the following code, around line 860 for me.

_updateInventory: function(variant){
      if (variant.id === this.currentVariant.id) {
        return;
      }

      this.$container.trigger({
        type: 'variantInventoryChange',
        variant: variant
      });
    },

In the "_initVariants: function()" function around line 6730 for me I added to the function the following

this.$container.on(
        'variantInventoryChange' + this.settings.namespace,
        this._updateInventory.bind(this)
      );

I then added the following to the function " _onSelectChange: function() " around line 770

this._updateInventory(variant);

and completed this by writing my own function between "_updateSKU: function(evt)" and _enableZoom: function(el, index), somewhere around 7450 area.

_updateInventory: function(evt) {
      var variant = evt.variant;

      // Update the Inventory & Set the max on the selector
      if (inv_qty[ variant.id] == 0)
        {
          $(this.selectors.variantInventory).html("<i class='fas fa-flag icons-fa'></i> We are currently out of stock on this item!").addClass('variant-sold-out');
          $(this.selectors.quantity).attr('disabled', 'disabled');
        } else {
          $(this.selectors.variantInventory).html("We have " + inv_qty[ variant.id] + " in stock!").removeClass('variant-sold-out');
          $(this.selectors.quantity).removeAttr('disabled');
        }
      $(this.selectors.quantity).attr('max', inv_qty[ variant.id]);
    },

Now when someone flips between variants they see the message just below the options selector telling them how much we have in stock.  This last bit of code also forces a max value on the inventory selector so that a user can't add more to the cart than is currently available.

The only drawback to all of this is that if someone else makes a purchase of something you have added to your cart these numbers don't update.  Have not had the time to play around to figure that out yet.

 I hope this helps.