HELP! How to hide sold-out variants on Shopify 2.0 - Prestige Theme

[CSca]

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

https://catalinasanchez.ca/

Thanks

Catalina

[PaulNewton]

Related post with solution  https://community.shopify.com/c/technical-q-a/help-needed-hide-sold-out-variants-on-prestige-theme/t...

It may need to be adapted to OS2.0 themes by finding the appropriate section/snippet for the given theme. 

[CSca]

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

[CSca]

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

[nsdmalik]

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


}
},

[shivamtiwari]

@nsdmalik

Wondering where to put this code. Could you please provide some more explanation

[Zworthkey]

@shivamtiwari 
Kindly Check this link it will be helpful
https://community.shopify.com/c/technical-q-a/help-needed-hide-sold-out-variants-on-prestige-theme/t...

[nsdmalik]

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.

@shivamtiwari 

[shivamtiwari]

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.

[GreenMountains]

Thank you. Under which section should this code be posted?

[nsdmalik]

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? 

[GreenMountains]

We have Prestige theme. I guess we should be on the new interface....

[Zworthkey]

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