how to hide product variants that do not exist in the product selector - theme Debut

romancel
New Member
10 0 0
Hi, this is probably a classic question that has arisen here for several years. I went through the applications, I also edited the code according to the updated instructions on this forum, but unfortunately nothing worked. If anyone knows how to do this, thank you for your answer. theme Debut
Replies 19 (19)

Hardik29418
Shopify Partner
2859 407 1073

Hello @romancel Please add this code at the end of product-template.lequid or whatever the file for product

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

 

And at the end of theme.js or custom.js, add this code

$( 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) {
      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){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });
        observer.disconnect();
      });
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }
});

 

If you use Brooklyn, then at the bottom of the file, paste the following code:

$( 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');
    }
  }
});

 

 

If this solution works, please click on accepted as solution and like!!! Thank you for wonderful question

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0
 
Hi Parambabla, unfortunately it didn't work. At the end of product-template.liquid I pasted the code, like this. I tried to put it at the very end as well.
 
test 1.jpg
 
 Then I put in Assets / theme.js another piece of code at the very end.
 
test 2.jpg
 
Save, but this is the result. It did not work.
 
test 3.jpg
 
 
 
Hardik29418
Shopify Partner
2859 407 1073

Please remove the script tag inside if condition

 

parambabla_0-1598527503396.png

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

Hi,

I did it, I removed the tags, but sill the same.....

 

test 4.jpg

Hardik29418
Shopify Partner
2859 407 1073

Please give me website url...

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

Hardik29418
Shopify Partner
2859 407 1073

I think, I spotted the issue

Please place this code 

 

 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){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });
        observer.disconnect();
      });
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }

 

 

below

 

 

 var product_variants_removed = [
      {%- for variant in product.variants -%}
        {%- unless variant.available -%}
          `{{ variant.title }}`,
        {%- endunless -%}
      {%- endfor -%}
    ];

 

 

So whole code should like this

var product_variants_removed = [
      {%- for variant in product.variants -%}
        {%- unless variant.available -%}
          `{{ variant.title }}`,
        {%- endunless -%}
      {%- endfor -%}
    ];

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){
          $('.single-option-selector option').filter(function() { return $(this).text() === item; }).remove();
        });
        observer.disconnect();
      });
      observer.observe($addToCartForm[0], config);
      $('.single-option-selector').trigger('change');
    }
  }

 And remove code from theme.js

And then please try

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

Hi Parambabla

 

ok, so I deleted the code from theme.js

 

and I added the code to product.liquid like this:

test5.jpg

but ... 😞 not working

Hardik29418
Shopify Partner
2859 407 1073

Can you please give me access to your store so that I can spot the issue?

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

what is your email?

Hardik29418
Shopify Partner
2859 407 1073

parambabla.soft@gmail.com

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

Hi Parambabla,

did you find something?

Hardik29418
Shopify Partner
2859 407 1073

yes, I have solved the issue and emailed you. If you wanted this solution, then please click on accepted as solution and give me like!!!

Thank you

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

hi,

what you mean by you have solved the issue, its still there....?

Hardik29418
Shopify Partner
2859 407 1073

There is green variant which is not available, it is not showing in dropdown

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

aha...but that is out of stock, but there are still variants in the selector that does not exist .....

Hardik29418
Shopify Partner
2859 407 1073

Thank you for reply. It look like your invitation is expired. Please re invite me!

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
romancel
New Member
10 0 0

thanks for help....

Hardik29418
Shopify Partner
2859 407 1073

If you like my solution, then please make my answer accepted as solution and give me like!!!

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email