Strikethrough sold out variant (Dawn theme) help

UK_Aspire_Vendo
Explorer
75 2 18

Hi folks, hope everyone is well.

I'm assisting a friend with some code work on her site, however I'm rather stumped by something.

https://www.venusloves.com/products/signet-ring 

In this product, the gold variant is sold out, and the silver variant is in stock.

I'm trying to write a line of code that adds a 'strikethrough' to the variant title so the customer does not have to click it to find out that it is out of stock.

The code presented which produces the variant title is as follows:

label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
{{ value }}

{{ value }} is the variant title, so if I add a <s> </s> either side of it the title strikes through.

I tried to write a line of code that checks the variants stock and to subsequently strike through sold out variants, but for some reason I could only get it to strike both variants, not just the gold one.

 

Could someone assist please? She is using the all new Dawn theme for reference.

Replies 18 (18)
UK_Aspire_Vendo
Explorer
75 2 18

*bump* - I would really appreciate some help with this if someone could assist!

LitExtension
Shopify Partner
3775 748 787

Hi @UK_Aspire_Vendo,

Go to sections/main-product.liquid and add code: https://i.imgur.com/OBBQfm3.png

Code:

{%- 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 %}
>

Then you can css by disable or change it to class.

Hope it is clear to you.

If you find my answer helpful for you, please mark it as a solution. Thank you so much and good luck,

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
UK_Aspire_Vendo
Explorer
75 2 18

Whilst this worked beautifully on products with only 1 variant, she has some where they are sold in Colour and then Size:

UK_Aspire_Vendo_0-1631112019576.png

 

The selected size is out of stock and is not greyed out like with singular variant items.

 

If you could help with this too then that would do it!

 

Thanks SO much for your help.

 

LitExtension
Shopify Partner
3775 748 787

It only solution with one variant, if you have more than 1 variant, you need to customize a lot, including JS, so I can't guide you in detail. And it will be difficult for someone else to help you only with the instructions.

You need to hire a professional for this and you can ask for help on the group: https://community.shopify.com/c/Shopify-Ecommerce-Jobs/bd-p/shopify-job-board

Please sympathize with me in this case.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
wearehike
Shopify Partner
3 0 0

I've added this code and it works great! The only issue is I'm using a back-in-stock plugin, and it relies on the variant in the URL. When I click the out-of-stock variants, it doesn't reflect in the URL.

Is it possible to change the code so they still have the strikethrough, but can still be clicked so the variant in the URL changes?

Thanks!

wearehike
Shopify Partner
3 0 0

For those that rely on the variant in the URL for any apps, here's the solution:

main-product.liquid

{%- 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 }}"

{% unless variant_label_state %} class="disabled_variant"{% endunless %}

 

base.css:

.disabled_variant+label {
color: rgba(27,25,30,.4)!important;
border-color: rgba(27,25,30,.1)!important;
text-decoration: line-through;
}

.disabled_variant:checked+label{
color: #fff!important;
}

NewYorkais
Tourist
8 0 2

Hello!

 

Are there any updates to this code? I tried the previous code but it ended up creating a strikethrough for all -both variants and size options. However, the available sizes are still clickable despite it being crossed out (see screenshot below). So basically the concept is working, just need the strikethrough and light coloring to only be on sold out sizes.

Sold Out Variant Dawn.jpg

Fabián_Valencia
Shopify Partner
8 0 1
josephbona
New Member
2 0 2

For anyone interested I just posted a blog post about how I tackled this.

https://barstool.engineering/shopify-dawn-soldout-variant-styling/

UK_Aspire_Vendo
Explorer
75 2 18

Hi Joseph, thanks for taking the time to do this.


I am however struggling with step one, as we have no 'variantradios' class in our code.

 

Please advise!

josephbona
New Member
2 0 2

You can find that class definition in the Dawn theme here - https://github.com/Shopify/dawn/blob/main/assets/global.js#L717

Natalie20
New Member
1 0 0

There is a typo within the spelling of unavailable within your code 

@josephbona
morphysheldonb
New Member
1 0 0

Kindly share the code. I was looking for this code for Dawn theme.

wick1
New Member
2 0 0

Great work Jose. I have found a bug with the code though. The add to cart button is grayed out (even on instock products) on the product page. You have to first switch between the variant to re-enable it.

wick1
New Member
2 0 0

I believe the following line is causing the issue

this.onVariantChange()

JamesBong420
Tourist
4 1 1

i tried your solution but none of the available variants were clickable. do you know the fix?

neilbannet
Shopify Partner
7 0 0

Many thanks! You saved the day! 

Regards

King-Kang
Trailblazer
141 7 51

Well done @josephbona , I replaced the js code for VariantRadios in global.js and added the css code you provide for section-main-product.css (even added !important to the code), and unfortunately didn't achieve the same result, maybe I missed something 😕