Strikethrough sold out variant (Dawn theme) help

UK_Aspire_Vendo
Pathfinder
106 6 23

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 24 (24)

UK_Aspire_Vendo
Pathfinder
106 6 23

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

LitExtension
Shopify Partner
4860 1001 1132

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
UK_Aspire_Vendo
Pathfinder
106 6 23

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
4860 1001 1132

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 - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
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
24 0 3

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

morphysheldonb
Visitor
1 0 0

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

dmitry_z
Shopify Partner
68 0 7

Hi @wearehike, is it possible if you could share the screenshot of your main-product.liquid with that part? Thanks

- Dmitry
JamesBong420
Tourist
4 1 3

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

neilbannet
Shopify Partner
8 0 0

Many thanks! You saved the day! 

Regards

Fabián_Valencia
Shopify Partner
8 0 1

josephbona
Shopify Partner
4 0 4

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
Pathfinder
106 6 23

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

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

Natalie20
Visitor
1 0 0

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

@josephbona
wick1
Visitor
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
Visitor
2 0 0

I believe the following line is causing the issue

this.onVariantChange()

King-Kang
Trailblazer
148 8 76

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 😕

hivescum30k
Visitor
2 0 2

You're an absolute lifesaver, thank you.

INSANE that Dawn doesn't include this out of the box when it's recommended as the starting point for any theme.

Fbarb69
Visitor
1 0 0

Do you mind sharing what code you input? Why this not a default feature 🤷🏽‍♂️

hivescum30k
Visitor
2 0 2

I basically used the code that Joseph Bona shared here.

 

You need to take that code and replace the "class VariantRadios extends VariantSelects"  section in global.js, and add the CSS.

 

But I made these adjustments:

Joseph's code triggers this.onVariantChange() when VariantRadios is constructed, but I had issues with the buy button being disabled on page load until a different variant was selected.

To fix that:

  • Remove this.onVariantChange() from Joseph's code.
  • Search for variant-radios in main-product.liquid, then in the fieldset where it creates the inputs remove the if statement that makes them checked.
  • Add this to the javascript section of main-product.liquid:

    $(document).ready(function() {
    $('.product-form__input > input:first-of-type').trigger('click');
    });

Basically it waits until the page has loaded then selects the first input of each option type, which makes onVariantChange() fire properly which marks unavailable options and refreshes the buy button for the selected option.

 

It's worth noting that for this to work properly the hierarchy of the options in your product listings is really important, i.e. if you have your Size option above Colour in your product listing, Shopify sees Size as the master variant, so this code is going to reference the size selected and check what colours are available in that size, which isn't ideal. But if you have Colour above Size in your product listing, this code is going to check all the sizes that are available when you select a colour.

 

bigfunbeverages
New Member
7 0 0

I'm struggling with getting this to work and wondering if you would be willing to look at my page? www.drinkmateparty.com I have not published the code that I'm editing with your directions but I can if you would like to see my work. 

bigfunbeverages
New Member
7 0 0