Shopify themes, liquid, logos, and UX
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
Please remove the script tag inside if condition
Hi,
I did it, I removed the tags, but sill the same.....
Please give me website url...
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?
parambabla.soft@gmail.com
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!!!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024