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
Hello @romancel Please add this code at the end of product-template.lequid or whatever the file for product
{% if product.options.size == 1 %}
{% 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
1 Like
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.
Then I put in Assets / theme.js another piece of code at the very end.
Save, but this is the result. It did not work.
Please give me website url…
here you go…
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
Hi Parambabla
ok, so I deleted the code from theme.js
and I added the code to product.liquid like this:
but … 
not working
Can you please give me access to your store so that I can spot the issue?
what is your email?
Hi Parambabla,
did you find something?
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
hi,
what you mean by you have solved the issue, its still there…?
There is green variant which is not available, it is not showing in dropdown
aha…but that is out of stock, but there are still variants in the selector that does not exist …
Thank you for reply. It look like your invitation is expired. Please re invite me!
thanks for help…
If you like my solution, then please make my answer accepted as solution and give me like!!!