How to add "Quantity left" in Minimal theme?

Highlighted
Tourist
5 0 1

Hi everyone,

I was trying to follow the instruction in this link to add "quantity left" for items in Minimal theme, however I could not find/match any of the codes mentioned in the tutorial.

https://help.shopify.com/themes/customization/products/show-inventory-quantities

I also took a look at the code in the example shopify provided. However I still don't have a clue... I could not find the  selectCallback function in product_template.liquid nor product.liquid.

Can anyone help me adding "quantity left" onto my page?

Thank you very much and have a great day.

-Alan

 

0 Likes
Excursionist
47 0 5

Hi Alan,

If your products only has 1 variant then you could add this to your product-template.liquid section.

    {% for variant in product.variants %}
    <p>Only {{ variant.inventory_quantity }} left in stock.</p>
    {% endfor %}

 

With a passion for e-commerce!
1 Like
Tourist
5 0 1

Hi John,

Thank you for you help!

What should I do if there are multiple variants?

1 Like
Excursionist
47 0 5

It would depend on how you want to display it. Would you want to show them separately e.g. Red has 3 left, Blue has 4 left, Yellow has 10 left? Or you could total them up..

With a passion for e-commerce!
0 Likes
Tourist
5 0 1

I would like to display them separately beside the quantity selection box.

0 Likes
Shopify Partner
2525 31 566

Hi J, 

you may want to look at this thread on how to adapt the tutorial for the Sectioned Minimal theme.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Tourist
5 0 1

Hi Tim,

Thank you for the feedback.

I followed excatly your instruction in that link and put the code above //Show SKU however it's not doing anything for some reason...

Could you please take a look at my code and tell what did I do wrong?

Much appreciate...

 

 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', {
        product: product,
        onVariantSelected: selectCallback,
        enableHistoryState: true
      });

      // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
      if (product.options.length == 1 && product.options[0] != 'Title') {
        $('.selector-wrapper:eq(0)').prepend('<label for="productSelect-option-0">' + product.options[0] + '</label>');
      }

      // Hide selectors if we only have 1 variant and its title contains 'Default'.
      if (product.variants.length == 1 && product.variants[0].title.toLowerCase().indexOf('default') !== -1) {
        $('.selector-wrapper').hide();
      }
    },

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

      if (variant) {

        // Update variant image, if one is set
        if (variant.featured_image) {
          var newImg = variant.featured_image,
              el = cache.$productImage[0];
          Shopify.Image.switchImage(newImg, el, self.switchImage);
        }

        // Select a valid variant if available
        if (variant.available) {
          // Available, enable the submit button, change text, show quantity elements
          cache.$addToCart.removeClass('disabled').prop('disabled', false);
          cache.$addToCartText.html(translations.add_to_cart);
          cache.$quantityElements.show();
        } else {
          // Sold out, disable the submit button, change text, hide quantity elements
          cache.$addToCart.addClass('disabled').prop('disabled', true);
          cache.$addToCartText.html(translations.sold_out);
          cache.$quantityElements.hide();
        }

        // Regardless of stock, update the product price
        cache.$productPrice.html( Shopify.formatMoney(variant.price, moneyFormat) );
        
       
        //Alan
        if (variant) {
  			if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
   				 if (variant.inventory_quantity > 5) {
      				 jQuery('#variant-inventory').text("Plenty available");
    			}
    			else if( variant.inventory_quantity > 0){
     				 jQuery('#variant-inventory').text('Only ' + variant.inventory_quantity + 'left in stock.');
    			} 
   				else {
      				jQuery('#variant-inventory').text("This product is sold out");
    			}
  		} else {
    	jQuery('#variant-inventory').text("This product is available");
  			}
		} else {
    		jQuery('#variant-inventory').text("");
		}

        // Show SKU
        cache.$SKU.html(variant.sku);

        // Also update and show the product's compare price if necessary
        if (variant.compare_at_price > variant.price) {
          cache.$comparePrice
            .html(Shopify.formatMoney(variant.compare_at_price, moneyFormat))
            .show();
          cache.$comparePriceA11y.attr('aria-hidden', 'false');
          cache.$priceA11y.attr('aria-hidden', 'false');
        } else {
          cache.$comparePrice.hide();
          cache.$comparePriceA11y.attr('aria-hidden', 'true');
        }

      } else {
        // The variant doesn't exist, disable submit button.
        // This may be an error or notice that a specific variant is not available.
        // To only show available variants, implement linked product options:
        //   - http://docs.shopify.com/manual/configuration/store-customization/advanced-navigation/linked-product-...
        cache.$addToCart.addClass('disabled').prop('disabled', true);
        cache.$addToCartText.html(translations.unavailable);
        cache.$quantityElements.hide();
      }
    },
0 Likes
Shopify Partner
2525 31 566

Hey man,

The javascript look legit, but it only updates the element and does not create it. So you need to output an element with id="variant-inventory" from you liquid. LIke so:

<h4 id="variant-inventory">
  {% if product.selected_variant.available %}
    This product is available</h4>
  {% else %}
    This product is out of stock
  {% endif %}
</h4>

 

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
2 0 0

Would this works with Venture theme?

0 Likes
Shopify Partner
2525 31 566

Ok, let's summarize

1. You modify your product.liquid (or product-template.liquid -- the file wich actually displays your product page) by adding this piece of code, prodably somewhere below the product title -- look for {{product.title}} code:

<h4 id="variant-inventory">
  {% if product.selected_variant.available %}
    This product is available</h4>
  {% else %}
    This product is out of stock
  {% endif %}
</h4>

which creates an element with id variant-inventory which will be updated from the javascript later.

2. You modify your theme.js Asset by adding the code below to update that element we've created above when variant changes.

if (variant) {
  if (variant.inventory_management == "shopify" && variant.inventory_policy != "continue") {
    if (variant.inventory_quantity > 5) {
       jQuery('#variant-inventory').text("Plenty available");
    }
    else if( variant.inventory_quantity > 0){
      jQuery('#variant-inventory').text('Only ' + variant.inventory_quantity + 'left in stock.');
    } 
    else {
      jQuery('#variant-inventory').text("This product is sold out");
    }
  } else {
    jQuery('#variant-inventory').text("This product is available");
  }
} else {
    jQuery('#variant-inventory').text("");
}

The tricky part is where to put this code. You have to look for the code which updates the sku or price on product page. For Venture, I'd insert it after about line 2345 (in my version of theme), right above the last closing curly brace of the  _updatePrice: function.

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