App to hide unavailable or sold-out variants

Solved
Padster
Explorer
49 5 10

Hi there, 

 

Looking for an app to hide unavailable or sold-out variants.

I tried to code it in but I can't seem to do it & there's no help on here for it.

So any apps that are cheap & can hide them is wot im looking for.

Be my hero(ine).

 

Thanks,

: Paddy

0 Likes

Hi,

 

You can follow the tutorial below 

Hide out-of-stock products from your collections

Before you can hide out-of-stock products from your collections, you need to enable inventory tracking in your Shopify admin. Inventory tracking automatically keeps track of the inventory level of each product that you carry.

Steps:

  1. Enable inventory tracking for your products.

  2. Change the automated collection conditions for each of your collections, and add the following conditions:

    • For Products must match, select all conditions.
    • For Inventory stock, select is greater than and enter 0.

 

Setting collection conditions

This procedure makes sure that your automated collections don't contain any products that are out of stock, and that those products won't appear to your customers. Any out-of-stock products will appear in your collections again after you receive inventory.

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. kanakiyajay@gmail.com
Padster
Explorer
49 5 10

This is an accepted solution.

Thanks @kanakiyajay for response.

I figured out how to do it with some random code for 'linked options' in the end.

For those wanting to know how, checkout this thread https://community.shopify.com/c/Shopify-Design/Variants-Link-product-options/m-p/742959#M185490

 

Regards,
@Padster 

0 Likes
shahzad-hafeez
Tourist
4 0 2

You can hide sold out and not available variants without installing any App. Here are the steps:

  1. go to product-template.liquid file and paste the following code at the end of the file.

 

 

{% if product.options.size >= 1 %}
  <script>
    var product_variants_available = [
      {%- for variant in product.variants -%}
        {%- if variant.available -%}
          `{{ variant.title }}`,
        {%- endif -%}
      {%- endfor -%}
    ];
    var product_options_count = {{ product.options.size }};
  </script>
{% endif %}​

 

 

  • find out theme.js file and paste the below code: 

 

 

function sortMap(map) {
  try {
    map.forEach(function(valueList, key, map) {
      map.get(key).sort();
    });
  } catch(err){
  }
}

function updateList(option, updatedList) {
  try {
    var selectedValue = $(option).children("option:selected").val();
    var index = -1;

    // remove previous list
    $(option).find('option').remove();

    //update list with new values
    for (var i=0; i<updatedList.length; i++) {
      $(option).append($('<option>', { 
        value: updatedList[i],
        text : updatedList[i] 
      }));

      if (updatedList[i] == selectedValue) {
        index = i;
      }
    }
    //update previous selected value	
    if (index != -1) {
      $(option).val(updatedList[index]).change(); 
    } else if (updatedList[0]){
      $(option).val(updatedList[0]).change();
    }
  } catch(err){
  }
}

function updateListByMap(options, map) {
  try {
    var selectedValue1 = $(options[0]).children("option:selected").val();
    map.forEach(function(valueList, key, map) {
      if (key == selectedValue1) {
        updateList(options[1], valueList);
      }
    });
    //remove option-2 values on empty map
    if (map.size == 0) {
      $(options[1]).find('option').remove();
    }
  } catch(err){
  }
}

function updateListByMap1(options, map1) {
  try {
    var selectedValue1 = $(options[0]).children("option:selected").val();
    var selectedValue2 = $(options[1]).children("option:selected").val();
    var variant = selectedValue1+" / "+selectedValue2;
    map1.forEach(function(valueList, key, map) {
      if (key == variant) {
        updateList(options[2], valueList);
      }
    });
    //remove option-3 values on empty map
    if (map1.size == 0) {
      $(options[2]).find('option').remove();
    }
  } catch(err) {
  }
}

function removeImages(colorSelector) {
  try{
    var colorOptions = $(colorSelector).find('option');
    var imageOptions = $('.product-single__thumbnails-product-template').find('li');
    if (imageOptions.length != colorOptions.length) {
      // hide previous images
      $(imageOptions).hide();
      
      //show availabe variants images
      for (var l=0; l<colorOptions.length; l++) {
      	var colorName = $(colorOptions[l]).val();
		$("#"+colorName).show();
      }
      
    }
  } catch(err){
    console.log(err);
  }
}

$( document ).ready(function() {
  if( typeof product_variants_available != "undefined" && typeof product_options_count != "undefined") {
    var $addToCartForm = $('form[action="/cart/add"]');
    if (window.MutationObserver && $addToCartForm.length) {
      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {
        observer.disconnect();
      }
      var config = { childList: true, subtree: true };
      var observer = new MutationObserver(function() {
        try{
          var options = $('.single-option-selector');
          if (product_options_count == 1 && options[0].length != product_variants_available.length) {
            updateList(options[0], product_variants_available);
            
          } else if (product_options_count == 2 || product_options_count == 3) {
            var map = new Map();
            var map1 = new Map();
            var list = [];
            // initialize map & list with values
            for (var i=0; i<product_variants_available.length; i++) {
              var variant = product_variants_available[i].split("/");
              var key = variant[0].trim();
              var value = variant[1].trim();
              if(map.has(key)) {
                if (map.get(key).includes(value) == false) {
                  map.get(key).push(value);
                }
              } else {
                map.set(key, [value]);
                list.push(key);
              }	
            }
            //sort map values
            if (product_options_count == 3) {
              sortMap(map);
            }
            //initialize map1 if there are three options
            if (product_options_count == 3) {
              // initialize map1 with values
              for (var i=0; i<product_variants_available.length; i++) {
                var variant = product_variants_available[i].split("/");
                var key = variant[0].trim() +" / "+ variant[1].trim();
                var value = variant[2].trim();
                if(map1.has(key)) {
                  map1.get(key).push(value);
                } else {
                  map1.set(key, [value]);
                }	
              }
            }
            //update option-1
            updateList(options[0], list);
            //update option-2
            updateListByMap(options, map);
            //update option-3 based on option count
            if (product_options_count == 3) {
              updateListByMap1(options, map1);
            }
            //add event on option-1 change
            $(options[0]).change(function () {
              updateListByMap(options, map);
              if (product_options_count == 3) {
                updateListByMap1(options, map1);
              }
            });
            //add event on option-2 change
            if (product_options_count == 3) {
              $(options[1]).change(function () {
                updateListByMap1(options, map1);
              });
            }
          }
          // remove the images of not available variants
          var selectors = $('.selector-wrapper');
          var colorSelectorIndex = -1;
          for (var k=0; k<selectors.length; k++) {
          	var label = $(selectors[k]).find("label").text();
            if (label.trim().toLowerCase().includes("color")) {
            	colorSelectorIndex=k;
            }
          }
          if (colorSelectorIndex!=-1) {
          	removeImages(options[colorSelectorIndex]);
          }
        } catch(err){
        }
        observer.disconnect();
      });
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }
});​

 

 

NOTE:

anrdunn
New Member
2 0 1

@shahzad-hafeez , can this be coded to a Sort By function too? For example, when on a collections page I want all of our products to display. But when I use the Sort By filter I would like only products to show if they have one or more available variants in stock.

0 Likes
Macx
New Member
1 0 0

Hi shahzad, can this be used for product.customizable template? If yes, are there any modifications to the coding? Help please! Thanks!

0 Likes
LanaBarinova
New Member
1 0 0

Thank you so much, that worked for me!

0 Likes
noode
New Member
3 0 0

Hi There, This works but I'm wondering how to create variants that only select one option. For example if I create a variant for 1kg then I have to input an option into all of the remaining options meaning all of the other options will display. They tick 1kg and it will still show "flavour 2", "flavour 3" etc. selectors. I'm trying to have a single product page with a quantity selector built into the product options. The idea here is that the customer will pick say 3 Kg from the product options and that will trigger the visibility of all 3 flavour option selectors. We want them to be able to buy just 1kg and have just one flavour selector visible but if they tick 2 or 3 KG then they have a flavour selector for each subsequent KG - we currently have this working with bold product options but it doesn't work with our new subscription app. Any thoughts or suggestions? 

0 Likes
chnsvn
New Member
1 0 0

Hey noode, did you find a solution for this?

0 Likes