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

Highlighted
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
0 Likes
Highlighted
Excursionist
320 47 69

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

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
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
 
 
 
0 Likes
Highlighted
Excursionist
320 47 69

Please remove the script tag inside if condition

 

parambabla_0-1598527503396.png

 

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
10 0 0

Hi,

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

 

test 4.jpg

0 Likes
Highlighted
Excursionist
320 47 69

Please give me website url...

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
10 0 0
0 Likes
Highlighted
Excursionist
320 47 69

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

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
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

0 Likes
Highlighted
Excursionist
320 47 69

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

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes