Variant Quantity - Debut Theme

MikeLockwood
Excursionist
26 2 7

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?

 

Thanks,
Mike
0 Likes
MikeLockwood
Excursionist
26 2 7

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.

Thanks,
Mike
0 Likes
Dbean199
New Member
4 0 0

where did you find it?

0 Likes
MikeLockwood
Excursionist
26 2 7

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.

MikeLockwood_0-1606857271391.png

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. 

Thanks,
Mike
WTCT-DF
New Member
2 0 0

I tried this, but unfortunately it did not work for me.  It did bring up and properly show the current inventory for the default variant, but did not update the displayed inventory when switching variants.  It also made it so that more than are currently available could be added to the cart.  I tried twice on fresh copies of my active version of the theme in case I made a mistake the first time.  I followed what you did exactly, the only difference being the exact line numbers as mine were different from yours.

0 Likes