Display variant inventory quantity on product page (Boundless theme)

Shopify Partner
2000 25 539

Hey stereo,

the code should work for most themes, it's hard to tell what's wrong without seeing your store -- share a preview link.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
4 0 0

hi Tim,

 

my website address is www.kingstoneimports.ca

 

As for the code, it looks like below. SKU is working great, but inventory quantity is not changing, it is whatever variant is selected when the page loads. As I said, maybe I should put the code somewhere else in theme.js.liquid? It is at the end now. I kept the code, you can see it at the bottom of a product page

product-template.liquid:

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

<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span>
<span class="variant-sku">{{ current_variant.sku }}</span>

 

theme.js.liquid:

  // create selector for variant inventory quantity, non-relevant selectors omitted
  var selectors = {
    SKU: '.variant-sku',
    inventory_quantity: '.variant-inventory'
  };

  // Show SKU
  $(selectors.SKU, this.$container).html(variant.sku);  

  // Show variant inventory quantity using similar code snippet to SKU, placed just below     
  $(selectors.inventory_quantity, this.$container).html(inv_qty[ variant.id ]);
0 Likes
New Member
6 0 0

Guys,

 

I would appreciate some help here.

I have read the thread but I am looking for a simple solution to only show the stock quantity per each variant.

 

I have used some of the codes but the quantity is not changing depending on variant.

 

My shop is www.biostraws.ie 

 

Thank you in advance for your help.

0 Likes
New Member
1 0 0

Hi BioStraws. I see that the variants quantity is working in your store now. I tried with the codes above and its not changing the quantities on different variations until I hit the refresh button. How did you get it resolved? I am using the sunrise theme

0 Likes
New Member
1 0 0

I'm working on my fiancee's shop because I have more experience with code. I'm trying to accomplish this (update inventory counts on variant selection) and I'd love to do the suggested tweaks but her theme (Pipeline) doesn't have a theme.js.liquid ... she has a shop.js.liquid that has a section I think(?) is updating the price and image. It looks like this:

 

theme.Variants = (function() {

  /**
   * Variant constructor
   *
   * @param {object} options - Settings from `product.js`
   */
  function Variants(options) {
    this.$container = options.$container;
    this.product = options.product;
    this.singleOptionSelector = options.singleOptionSelector;
    this.originalSelectorId = options.originalSelectorId;
    this.enableHistoryState = options.enableHistoryState;
    this.currentVariant = this._getVariantFromOptions();

    $(this.singleOptionSelector, this.$container).on('change', this._onSelectChange.bind(this));
  }

  Variants.prototype = _.assignIn({}, Variants.prototype, {

    /**
     * Get the currently selected options from add-to-cart form. Works with all
     * form input elements.
     *
     * @return {array} options - Values of currently selected variants
     */
    _getCurrentOptions: function() {
      var currentOptions = _.map($(this.singleOptionSelector, this.$container), function(element) {
        var $element = $(element);
        var type = $element.attr('type');
        var currentOption = {};

        if (type === 'radio' || type === 'checkbox') {
          if ($element[0].checked) {
            currentOption.value = $element.val();
            currentOption.index = $element.data('index');

            return currentOption;
          } else {
            return false;
          }
        } else {
          currentOption.value = $element.val();
          currentOption.index = $element.data('index');

          return currentOption;
        }
      });

      // remove any unchecked input values if using radio buttons or checkboxes
      currentOptions = _.compact(currentOptions);

      return currentOptions;
    },

    /**
     * Find variant based on selected values.
     *
     * @param  {array} selectedValues - Values of variant inputs
     * @return {object || undefined} found - Variant object from product.variants
     */
    _getVariantFromOptions: function() {
      var selectedValues = this._getCurrentOptions();
      var variants = this.product.variants;

      var found = _.find(variants, function(variant) {
        return selectedValues.every(function(values) {
          return _.isEqual(variant[values.index], values.value);
        });
      });

      return found;
    },

    /**
     * Event handler for when a variant input changes.
     */
    _onSelectChange: function() {
      var variant = this._getVariantFromOptions();

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

      if (!variant) {
        return;
      }

      this._updateMasterSelect(variant);
      this._updateImages(variant);
      this._updatePrice(variant);
      this.currentVariant = variant;

      if (this.enableHistoryState) {
        this._updateHistoryState(variant);
      }
    },

    /**
     * Trigger event when variant image changes
     *
     * @param  {object} variant - Currently selected variant
     * @return {event}  variantImageChange
     */
    _updateImages: function(variant) {
      var variantImage = variant.featured_image || {};
      var currentVariantImage = this.currentVariant.featured_image || {};

      if (!variant.featured_image || variantImage.src=== currentVariantImage.src) {
        return;
      }

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

    /**
     * Trigger event when variant price changes.
     *
     * @param  {object} variant - Currently selected variant
     * @return {event} variantPriceChange
     */
    _updatePrice: function(variant) {
      if (variant.price === this.currentVariant.price && variant.compare_at_price === this.currentVariant.compare_at_price) {
        return;
      }

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

    /**
     * Update history state for product deeplinking
     *
     * @param  {variant} variant - Currently selected variant
     * @return {k}         [description]
     */
    _updateHistoryState: function(variant) {
      if (!history.replaceState || !variant) {
        return;
      }

      var newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + variant.id;
      window.history.replaceState({path: newurl}, '', newurl);
    },

    /**
     * Update hidden master select of variant change
     *
     * @param  {variant} variant - Currently selected variant
     */
    _updateMasterSelect: function(variant) {
      $(this.originalSelectorId, this.$container).val(variant.id);
    }
  });

  return Variants;
})();

I'd love to just add a this._updateQuantity call and function, but I don't know what the function should look like. Help?

0 Likes