Hey!
I am trying to hide the variants of my product that are unavailable or sold-out to make it easier for shoppers.
I have two variants per product, size and pages, and the combination of both are not always available or is sold out. How can I only display the options available for the client.
I am using the Shopify 2.0 version of the theme Prestige. This is my website
Thanks
Catalina
Related post with solution https://community.shopify.com/topic/1033654
It may need to be adapted to OS2.0 themes by finding the appropriate section/snippet for the given theme.
Hey Paul,
Thank you, I tried that, but what the code is doing is combining available options and making them into one value on both dropdown menus, but when selected, it displays as unavailable (I am guessing because it can’t be matched with the inventory tracking)
I would want each dropdown menu to display only available options for that variant, so what size and what paper is available in that size.
https://catalinasanchez.ca/products/sparkly-jean-hard-cover (for this product in particular, size available: plain | Paper available: plain)
Thanks,
Catalina
Hey Paul,
Thank you, I tried that, but what the code is doing is combining available options and making them into one value on both dropdown menus, but when selected, it displays as unavailable (I am guessing because it can’t be matched with the inventory tracking)
I would want each dropdown menu to display only available options for that variant, so what size and what paper is available in that size.
https://catalinasanchez.ca/products/sparkly-jean-hard-cover (for this product in particular, size available: plain | Paper available: plain)
Thanks,
Catalina
In case if you are still looking, I have created a function for both sold outs and unavailable variants, you can use that to hide soldouts or unavailable variants.
{
key: ‘_updateVariantsNSD’,
value: function _updateVariantsNSD(newVariant, previousVariant) {
this.productData[‘variants’].forEach(function (variant) {
if (variant[‘option1’] === $(‘.SizeSwatch__Radio[name=“option-0”]:checked’).val()) {
$.each( $(‘.SizeSwatch__Radio[name=“option-1”]’), function( key, value ) {
if (variant[‘option2’] === $(value).val() ){
console.log(variant);
if(variant.available){
$(value).parent().removeClass(‘soldout’);
}
else{
$(value).parent().addClass(‘soldout’);
}
}else{
// $(value).parent().addClass(‘unavailable’);
}
});
}
});
console.log(‘here’);
var varOptions =;
this.productData[‘variants’].forEach(function (variant) {
if(variant[‘option1’] !== null ){
if (variant[‘option1’] === $(‘.SizeSwatch__Radio[name=“option-0”]:checked’).val()) {
varOptions.push(variant[‘option2’]);
}
}
});
console.log(varOptions);
var varForm = this.element.querySelector(‘.ProductForm__Variants’);
var varForm1= varForm.childNodes[1].childNodes[1];
for (var i = 0; i < varForm1.childNodes.length; i++) {
var li = varForm1.childNodes[i];
if(li !== null && varOptions !== null){
for (var j = 0; j < varOptions.length ; j++){
console.log(varOptions[j]);
console.log($(li).find(‘input’).val());
console.log($(li).find(‘input’).val()===varOptions[j]);
if($(li).find(‘input’).val()===varOptions[j]){
li.classList.remove(“unavailable”);
break;
}else{
li.classList.add(“unavailable”);
}
}
}
}//end for
}
},
Hello,
For this if you wanted for your complete products then by debuging the variation product listing section in Prestige theme only that can be manageable with your mentioned required conditions. If you have any issue we will do it for your store if you will provide us collaboration access to your theme so that we can mondify the code inside your Prestige theme as per as standards of Shopify2.0 without affecting any thing elese of normal functionalities.
Thanks
Wondering where to put this code. Could you please provide some more explanation
@shivamtiwari
Kindly Check this link it will be helpful
https://community.shopify.com/topic/1033654
You can add this function above updateProductPrice function and call it in variant change handler, you would need to have a bit of coding knowledge to understand how this works.
Thanks, wondering will this still work for Dawn theme in Shopify 2.0
I have managed to it by following https://github.com/Shopify/dawn/pull/105/files?diff=split&w=0
but its kind of complex.
Thank you. Under which section should this code be posted?
It must be quite outdated now. Since Shopify rolled OS 2.0 after this, which theme are you currently on? Is it using old infrastructure?
We have Prestige theme. I guess we should be on the new interface…