Making striked out / disabled variants still clickable

[ctrlcheeb]

Hey everyone, hope you're well,

I am helping a friend with their site and we have encountered a bug and were wondering if anyone has any suggestions with the dawn theme.

https://fuut.co.uk/products/yeezy-slide-resin-2022 
On this site you can see we have managed to get striked out sizes working when they are out of stock. However we are aiming to still have variants able to be clicked and interacted with so they can sign up for a newsletter when the variant is back in stock.

We have got all the functionality for the striked out variants and also the email newsletter we are just wondering how we can still make these buttons clickable but keep the striked out feature and having them greyed out so the user does not have to click the variant to know its out of stock.

Some of the code we used for the strike through feature is from an old forum in the sections/main-product.liquid file consisting of:

{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}

<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>

If anyone has any suggestions on how we can keep the striked out feature but also have the buttons remain interactable that would be amazing!
thanks, arthur

[sodevious]

You will just want to remove the disabled attribute. So I would delete this entire line:

{% unless variant_label_state %} disabled="disabled"{% endunless %}

But it looks like if you do that then it will remove the strikethrough. Did you alter the CSS to get the strikethrough to work? 

[ctrlcheeb]

I thought this too but upon testing this is what happens to the variants in the screenshot below.

[sodevious]

It looks like you're accidentally removing a character like a quote" or bracket>.

[ctrlcheeb]

I dont think that is the issue here which is confusing, I did not alter any CSS to get this to work since this was the only code I added. Upon even commenting out the line you mentioned I am presented with the same error

[sodevious]

Try changing it to

{%- assign variant_label_state = true -%}
{%- if product.options.size == 1 -%}
{%- unless product.variants[forloop.index0].available -%}
{%- assign variant_label_state = false -%}
{%- endunless -%}
{%- endif -%}

<input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
name="{{ option.name }}"
{% unless variant_label_state %} class="unavailable"{% endunless %}
value="{{ value | escape }}"
form="product-form-{{ section.id }}"
{% if option.selected_value == value %}checked{% endif %}
>

btw if you use html comments inside of a tag like that, it will break it. but i tested it and instead of removing the disabled what we can do is replace it with an unavailable class which it looks like your theme has support for in this situation

[ctrlcheeb]

I've been messing around with your idea and this makes all items appear available, I am trying to maintain the strike through text and keep that whilst also having the buttons remain clickable even when they are disabled

[sodevious]

I'm going to request access to your store to fix this, as I'm curious.

[ctrlcheeb]

I will happily provide any snippets of code you would like in aid but I am not giving you any permissions on the store

[sodevious · Accepted solution]

🤷🏽‍♀️  its just a theme permission.

but here ya go 🙂 

https://www.loom.com/share/5bc4887d39fe4f5980b10497ce7b372a

[ctrlcheeb]

I had completely missed that typo, you have been a massive massive help. Thank you honestly more than anything or else I would have never noticed!!

[Christelle12]

Can you help me solve the same problem ?