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

CSca
New Member
3 0 0

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

Replies 12 (12)
PaulNewton
Shopify Partner
5189 464 1125

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. 

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
CSca
New Member
3 0 0

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
New Member
3 0 0

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
Shopify Partner
3 0 0

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


}
},

Nauman Masood
CEO & CoFounder
Devsinside Technologies
shivamtiwari
New Member
2 0 0

@nsdmalik

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

Zworthkey
Shopify Partner
5581 642 1543
nsdmalik
Shopify Partner
3 0 0

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 

Nauman Masood
CEO & CoFounder
Devsinside Technologies
shivamtiwari
New Member
2 0 0

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
New Member
8 0 0

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

nsdmalik
Shopify Partner
3 0 0

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? 

Nauman Masood
CEO & CoFounder
Devsinside Technologies
GreenMountains
New Member
8 0 0
We have Prestige theme. I guess we should be on the new interface....

Zworthkey
Shopify Partner
5581 642 1543

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