How to style sold out options for multiple product variants?

Technical Q&A
1

I’m trying to add css to product options to provide the user with a visual indication of which options are not available. This works when a product only has one set of option values, however my product has two (“date”, and “time”). I have this working most of the way, however the available “Time” options are not updated when I switch between dates. Any help here would be hugely appreciated.

Inside my product-form.liquid file I have the following code to add a class to sold out options. Perhaps I need some js?

{%- if option.name == "Time" -%}
                  {%- if product.variants[forloop.index0].available -%}
                    {%- assign opt_sold = false -%}
                  {%- else -%}
                    {%- assign opt_sold = true -%}
                  {%- endif -%}
                {%- else -%}
                  {%- assign opt_sold = false -%}
                {%- endif -%}

Screenshot 2022-05-25 at 19.13.54.png
Screenshot 2022-05-25 at 19.13.54.png1260×1318 194 KB

2

I’ve changed the first line of the code to be as follows which now gets us a little closer, however the page needs to be refreshed each time the “date” option is changed. I’m sure it’s a bit of js that would do the trick but that’s beyond my skills :grimacing:

{%- if option.name == "Time" and product.selected_or_first_available_variant.option1 == product.variants[forloop.index0].option1 -%}
                  {%- if product.variants[forloop.index0].available -%}
                    {%- assign opt_sold = false -%}
                  {%- else -%}
                    {%- assign opt_sold = true -%}
                  {%- endif -%}
                {%- else -%}
                  {%- assign opt_sold = false -%}
                {%- endif -%}