From 47d581fa7c665b42dd878fa88a2c7861c8504ce9 Mon Sep 17 00:00:00 2001
From: Michael Silber <michael@cfxdesign.com>
Date: Fri, 13 Aug 2021 14:48:22 -0400
Subject: [PATCH] Add sold out variant picker UI in Liquid

---
 assets/global.js                |  3 ++
 assets/section-main-product.css |  5 ++-
 sections/main-product.liquid    | 70 ++++++++++++++++++++++++++-------
 3 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index e55ac5ac281..93c1ea0d716 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -573,8 +573,11 @@ class VariantSelects extends HTMLElement {
         const html = new DOMParser().parseFromString(responseText, 'text/html')
         const destination = document.getElementById(id);
         const source = html.getElementById(id);
+        const variantPickerDestination = document.querySelector('variant-radios') || document.querySelector('variant-selects');
+        const variantPickerSource = html.querySelector('variant-radios') || html.querySelector('variant-selects');
 
         if (source && destination) destination.innerHTML = source.innerHTML;
+        if (variantPickerSource && variantPickerDestination) variantPickerDestination.innerHTML = variantPickerSource.innerHTML;
 
         document.getElementById(`price-${this.dataset.section}`)?.classList.remove('visibility-hidden');
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 441be9e0cd0..e33d4c9e164 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -168,11 +168,14 @@ fieldset.product-form__input .form__label {
   color: rgb(var(--color-background));
 }
 
-.product-form__input input[type='radio']:disabled + label {
+.product-form__input input[type='radio']:disabled + label, .product-form__input input[type='radio'].disabled + label {
   border-color: rgba(var(--color-foreground), 0.1);
   color: rgba(var(--color-foreground), 0.4);
   text-decoration: line-through;
 }
+.product-form__input input[type='radio'].disabled:checked + label, .product-form__input input[type='radio']:disabled:checked + label {
+  color: rgba(var(--color-background),.4);
+}
 .product-form__input input[type='radio']:focus-visible + label {
   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
     0 0 0 0.5rem rgba(var(--color-foreground), 0.55);
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index d310ee94ec2..27cf36830ac 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -10,6 +10,11 @@
 
 <script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
 
+{%- assign variants_available_arr = product.variants | map: 'available' -%}
+{%- assign variants_option1_arr = product.variants | map: 'option1' -%}
+{%- assign variants_option2_arr = product.variants | map: 'option2' -%}
+{%- assign variants_option3_arr = product.variants | map: 'option3' -%}
+
 {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
 {%- if first_3d_model -%}
   {{ 'component-product-model.css' | asset_url | stylesheet_tag }}
@@ -185,20 +190,38 @@
               {%- if block.settings.picker_type == 'button' -%}
                 <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                   {%- for option in product.options_with_values -%}
-                      <fieldset class="js product-form__input">
-                        <legend class="form__label">{{ option.name }}</legend>
-                        {%- for value in option.values -%}
-                          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
-                                name="{{ option.name }}"
-                                value="{{ value | escape }}"
-                                form="product-form-{{ section.id }}"
-                                {% if option.selected_value == value %}checked{% endif %}
-                          >
-                          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
-                            {{ value }}
-                          </label>
-                        {%- endfor -%}
-                      </fieldset>
+                    <fieldset class="js product-form__input">
+                      <legend class="form__label">{{ option.name }}</legend>
+                      {%- for value in option.values -%}
+                        {%- assign option_disabled = true -%}
+                        {% for option1_name in variants_option1_arr %}
+                          {% case option.position %}
+                            {% when 1 %}
+                              {% if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
+                                {%- assign option_disabled = false -%}
+                              {% endif %}
+                            {% when 2 %}
+                              {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
+                                {%- assign option_disabled = false -%}
+                              {% endif %}
+                            {% when 3 %}
+                              {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
+                                {%- assign option_disabled = false -%}
+                              {% endif %}
+                          {% endcase %}
+                        {% endfor %}
+                        <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
+                              name="{{ option.name }}"
+                              value="{{ value | escape }}"
+                              form="product-form-{{ section.id }}"
+                              {% if option.selected_value == value %}checked{% endif %}
+                              {% if option_disabled %}class="disabled"{% endif %}
+                        >
+                        <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
+                          {{ value }}
+                        </label>
+                      {%- endfor -%}
+                    </fieldset>
                   {%- endfor -%}
                   <script type="application/json">
                     {{ product.variants | json }}
@@ -218,7 +241,24 @@
                           form="product-form-{{ section.id }}"
                         >
                           {%- for value in option.values -%}
-                            <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
+                            {%- assign option_disabled = true -%}
+                            {% for option1_name in variants_option1_arr %}
+                              {% case option.position %}
+                                {% when 1 %}
+                                  {% if variants_option1_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
+                                    {%- assign option_disabled = false -%}
+                                  {% endif %}
+                                {% when 2 %}
+                                  {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
+                                    {%- assign option_disabled = false -%}
+                                  {% endif %}
+                                {% when 3 %}
+                                  {% if option1_name == product.selected_or_first_available_variant.option1 and variants_option2_arr[forloop.index0] == product.selected_or_first_available_variant.option2 and variants_option3_arr[forloop.index0] == value and variants_available_arr[forloop.index0] == true %}
+                                    {%- assign option_disabled = false -%}
+                                  {% endif %}
+                              {% endcase %}
+                            {% endfor %}
+                            <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}{% if option_disabled %} disabled{% endif %}>
                               {{ value }}
                             </option>
                           {%- endfor -%}