Estimated reading time: 2 minutes

Kevin Gordon

Kevin Gordon

Director and Founder

Author Kevin is director of Digital Technology Labs and has been published in NET magazine, the UK’s leading Web Design and Development magazine monthly. Here he talks about how to hide unavailable options on a Shopify dropdown using Javascript.

TL;DR

A quick overview of how to hide unavailable options on a dropdown on Shopify. Add code to the back end of your Shopify site to help with this.

how_to_hide_unavailable_options_in_shopify

How to unhide unavailable options on a Shopify dropdown.

What’s the problem?

Say you have a complex set of multiple variants. E.g. image-type / size / usage-rights, in three different dropdowns but not every item you have in Shopify needs all the options available. How can you automatically hide the options you don’t need?

What Shopify offers

Shopify provides instructions for hiding unavailable options here: https://shopify.dev/tutorials/customize-theme-hide-variants-that-are-sold-out

However, it doesn’t work for multiple variants, and for when you’re using a non-standard or premium template.

What can I do?

This piece of code needs to be added to the product-template.liquid file, at the end (ahead of the metadata stuff). You can copy and paste from here.

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

This is a good piece of code / this bit works. Make sure it’s being rendered in your page, and the browser is not caching the old version. I did this by adding a console.log(“debb 1”);

What next?

Then edit the themes.js.liquid file.

Here it gets tricky though!

I took part of this:

$(document).ready(function() {
     if (typeof product_variants_removed != “undefined”) { // was there items to be removed?
          var $addToCartForm = $(‘form[action=”/cart/add”]’);
          if (window.MutationObserver && $addToCartForm.length) {
               var config = {
                    childList: true,
                    subtree: true
               };
               product_variants_removed.forEach(function(item) {
                    $(‘.single-option-selector option’).filter(function() {
                         return $(this).text() === item;
                    }).remove();
               });
          }
     }
});

And part of this:

$(document).ready(function() {
          $(‘.single-option-selector__radio’).trigger(‘change’);
          if (typeof product_variants_removed != “undefined”) { // was there items to be removed?
               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() {
                         product_variants_removed.forEach(function(item) {
                              $(‘#ProductSelect-option-size-‘ + item).remove();
                              $(‘label[for=ProductSelect-option-size-‘ +item + ‘]’).remove();
                         });
                         observer.disconnect();
                    });
                    observer.observe($addToCartForm[0], config);
               $(‘.single-option-selector__radio’).trigger(‘change’);
          }
     }
});

 

And wrote the following code:

//console.log(“debb10”);
$(document).ready(function() {
     if (typeof product_variants_removed != “undefined”) { // was there items to be removed?
          //console.log(“Should remove unavailable variants”);
         var $addToCartForm = $(‘#addToCartForm – product – template’);
         if (window.MutationObserver && $addToCartForm.length) {
             var config = {
               childList: true,
               subtree: true
               };
               // product_variants_removed.forEach(function(item){
               // $(‘.single-option-selector’).filter(function() { return $(this).text() === item; }).remove();
               // });
               product_variants_removed.forEach(function(item) {
                    console.log(item);
               });
               product_variants_removed.forEach(function(item) {
                    var firstSlashPosition = item.indexOf(‘/ ‘);
                    //console.log(‘firstSlashPosition: ‘ + firstSlashPosition);
                    var firstSubstring = item.substring(0, firstSlashPosition);
                    //console.log(‘firstSubstring’ + firstSubstring);
                    $(‘.single – option – selector option’).filter(function() {
                         return $(this).text() === firstSubstring;
                    }).remove();
               });
          }
          //console.log(config);
     } else {
          //console.log(“prouduct_variants_removed was undefined”);
     }
});

Please note!

The critical pieces to consider when integrating the code into your template is that the options have the “single-option-selector” class.

Then if the Shopify code was not working as the product_variants_removed had three variants separated by ” / “.

So, I have done a substring, to extract just the first piece of the variants, and blocked these. This works, and the other sub-options are therefore blocked.

Hope that helps!

If you need any of the above clarified please reach out. I love coding, love making code better and love helping others with their code.

Check out other awesome blog content:

Evolution of our business cards

Evolution of our business cards

This is about the evolution of our business cards. Our business cards are evolving here at Digital Technology Labs! When we got the 'new' rebranding this is what our business card looked like.   Then I met Martin Engleman at his eBang networking afternoon, and he...

read more

Want to get more help or further guidance?

Thank you.

Thanks for visiting. Cheerio! Cheers and bye for now. So, farewell and hope to see you soon.

We've been Digital Technology Labs.

Bye

Socials



"Your business, beautifully crafted online".

Website development + Software development + Web design

 

Copyright © 2020 Digital Technology Labs Limited (Company No: 11577499) | Terms  | PrivacyCookies | Areas served
Web design Langdon Hills | Web design Basildon | Web design Essex