Hey! I've just noticed that variants with no stock (aka unavailable) are still selectable on the product page. I've created a .is-not-available class that's supposed to set pointer events to none and change some other styles, but it is not reflected after conversion.
Some help here please?
Also, if you see the sample link below – on the homepage all variants have the .is-not-available class added, but on the products details page it does not.
Hi @jonathanhorst, good point. We made this on purpose because most of our clients wanted that feature.. so you can still check other variants of the product. I can recommend to implement a not in stock button when the product is not available. Its also in the Starter Template.
if you dont want this you can use a css selector like this to deactivate pointer events: [data-ProductVariantsLoop] input[type=radio].data-disabled + span { pointer-events: none; }
This one selects the span next to the disabled radio button
Hi @jonathanhorst, good point. We made this on purpose because most of our clients wanted that feature.. so you can still check other variants of the product. I can recommend to implement a not in stock button when the product is not available. Its also in the Starter Template.
if you dont want this you can use a css selector like this to deactivate pointer events: [data-ProductVariantsLoop] input[type=radio].data-disabled + span { pointer-events: none; }
This one selects the span next to the disabled radio button
Was there changes made to this after I asked? Got it working with what you explained, then without changing anything it stopped working on the most recent conversion. @jonas.halbstark
Seems to be working again after another conversion. If you guys haven't made any changes on your end it seems like the conversion process is a bit unstable with those specific elements, just fyi 🙂
