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

---
 assets/global.js                |  4 ++
 assets/section-main-product.css |  7 +++-
 sections/main-product.liquid    | 71 +++++++++++++++++++++++++++++++++
 3 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/assets/global.js b/assets/global.js
index 98dbefa4d8e..de5a638c47d 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -846,7 +846,11 @@ class VariantSelects extends HTMLElement {
         const html = new DOMParser().parseFromString(responseText, 'text/html')
         const destination = document.getElementById(`price-${this.dataset.section}`);
         const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
+        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;
 
         const price = document.getElementById(`price-${this.dataset.section}`);
 
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index b43fe06c3d5..af651564c26 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -243,11 +243,16 @@ fieldset.product-form__input .form__label {
   background-color: rgba(var(--color-background), 0.3);
 }
 
-.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 780f187bd7c..96aaf1ba291 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -496,6 +496,77 @@
                           </label>
                         {%- endfor -%}
                       </fieldset>
+<<<<<<< HEAD
+=======
+                  {%- endfor -%}
+                  <script type="application/json">
+                    {{ product.variants | json }}
+                  </script>
+                </variant-radios>
+              {%- else -%}
+                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
+                  {%- for option in product.options_with_values -%}
+                    <div class="product-form__input product-form__input--dropdown">
+                      <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
+                        {{ option.name }}
+                      </label>
+                      <div class="select">
+                        <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
+                          class="select__select"
+                          name="options[{{ option.name | escape }}]"
+                          form="{{ product_form_id }}"
+                        >
+                          {%- 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 %}
+                            <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}{% if option_disabled %} disabled{% endif %}>
+                              {{ value }}
+                            </option>
+                          {%- endfor -%}
+                        </select>
+                        {% render 'icon-caret' %}
+                      </div>
+                    </div>
+                  {%- endfor -%}
+
+                  <script type="application/json">
+                    {{ product.variants | json }}
+                  </script>
+                </variant-selects>
+              {%- endif -%}
+            {%- endunless -%}
+
+            <noscript class="product-form__noscript-wrapper-{{ section.id }}">
+              <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
+                <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
+                <div class="select">
+                  <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
+                    {%- for variant in product.variants -%}
+                      <option
+                        {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
+                        {% if variant.available == false %}disabled{% endif %}
+                        value="{{ variant.id }}"
+                      >
+                        {{ variant.title }}
+                        {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
+                        - {{ variant.price | money | strip_html }}
+                      </option>
+>>>>>>> f1201d6 (Add sold out variant picker UI in Liquid)
                     {%- endfor -%}
                     <script type="application/json">
                       {{ product.variants | json }}

From 9c3c7450ae2c6219483a45bf98db846f6365cadc Mon Sep 17 00:00:00 2001
From: Michael Silber <michael@cfxdesign.com>
Date: Wed, 29 Jun 2022 06:14:44 -0400
Subject: [PATCH 2/5] Rebase + include changes from latest code review

---
 assets/global.js                        |  4 +-
 locales/en.default.json                 |  1 +
 locales/en.default.schema.json          | 18 +++++++
 sections/featured-product.liquid        | 35 ++++---------
 sections/main-product.liquid            | 68 ++++++++++---------------
 snippets/product-variant-options.liquid | 67 ++++++++++++++++++++++++
 6 files changed, 125 insertions(+), 68 deletions(-)
 create mode 100644 snippets/product-variant-options.liquid

diff --git a/assets/global.js b/assets/global.js
index de5a638c47d..4724ce73b38 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -846,8 +846,8 @@ class VariantSelects extends HTMLElement {
         const html = new DOMParser().parseFromString(responseText, 'text/html')
         const destination = document.getElementById(`price-${this.dataset.section}`);
         const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
-        const variantPickerDestination = document.querySelector('variant-radios') || document.querySelector('variant-selects');
-        const variantPickerSource = html.querySelector('variant-radios') || html.querySelector('variant-selects');
+        const variantPickerDestination = document.getElementById(`variant-radios-${this.dataset.section}`) || document.getElementById(`variant-selects-${this.dataset.section}`);
+        const variantPickerSource = html.getElementById(`variant-radios-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`) || html.getElementById(`variant-selects-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
 
         if (source && destination) destination.innerHTML = source.innerHTML;
         if (variantPickerSource && variantPickerDestination) variantPickerDestination.innerHTML = variantPickerSource.innerHTML;
diff --git a/locales/en.default.json b/locales/en.default.json
index 5c2a256085b..a8b584bf1c2 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -145,6 +145,7 @@
       "sold_out": "Sold out",
       "unavailable": "Unavailable",
       "vendor": "Vendor",
+      "variant_sold_out_or_unavailable": "Variant sold out or unavailable",
       "video_exit_message": "{{ title }} opens full screen video in same window.",
       "view_full_details": "View full details",
       "xr_button": "View in your space",
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index 24030207795..c3b6cdfc3ce 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -787,6 +787,15 @@
               "options__2": {
                 "label": "Pills"
               }
+            },
+            "select_soldout_type": {
+              "label": "Soldout select type",
+              "options__1": {
+                "label": "None"
+              },
+              "options__2": {
+                "label": "Disabled"
+              }
             }
           }
         },
@@ -1659,6 +1668,15 @@
               "options__2": {
                 "label": "Pills"
               }
+            },
+            "select_soldout_type": {
+              "label": "Soldout select type",
+              "options__1": {
+                "label": "None"
+              },
+              "options__2": {
+                "label": "Disabled"
+              }
             }
           }
         },
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index 27c157dc873..df78cfb54a8 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -217,21 +217,11 @@
                       {%- 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.position }}-{{ forloop.index0 }}"
-                              name="{{ option.name }}"
-                              value="{{ value | escape }}"
-                              form="{{ product_form_id }}"
-                              {% if option.selected_value == value %}
-                                checked
-                              {% endif %}
-                            >
-                            <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
-                              {{ value }}
-                            </label>
-                          {%- endfor -%}
+                          {% render 'product-variant-options',
+                            product: product,
+                            option: option,
+                            block: block
+                          %}
                         </fieldset>
                       {%- endfor -%}
                       <script type="application/json">
@@ -258,16 +248,11 @@
                               name="options[{{ option.name | escape }}]"
                               form="{{ product_form_id }}"
                             >
-                              {%- for value in option.values -%}
-                                <option
-                                  value="{{ value | escape }}"
-                                  {% if option.selected_value == value %}
-                                    selected="selected"
-                                  {% endif %}
-                                >
-                                  {{ value }}
-                                </option>
-                              {%- endfor -%}
+                              {% render 'product-variant-options',
+                                product: product,
+                                option: option,
+                                block: block
+                              %}
                             </select>
                             {% render 'icon-caret' %}
                           </div>
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 96aaf1ba291..3efbf513541 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -480,31 +480,19 @@
                     {%- 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.position }}-{{ forloop.index0 }}"
-                            name="{{ option.name }}"
-                            value="{{ value | escape }}"
-                            form="{{ product_form_id }}"
-                            {% if option.selected_value == value %}
-                              checked
-                            {% endif %}
-                          >
-                          <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
-                            {{ value }}
-                          </label>
-                        {%- endfor -%}
+                        {% render 'product-variant-options',
+                          product: product,
+                          option: option,
+                          block: block
+                        %}
                       </fieldset>
-<<<<<<< HEAD
-=======
                   {%- endfor -%}
                   <script type="application/json">
                     {{ product.variants | json }}
                   </script>
                 </variant-radios>
               {%- else -%}
-                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
+                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} id="variant-selects-{{ section.id }}">
                   {%- for option in product.options_with_values -%}
                     <div class="product-form__input product-form__input--dropdown">
                       <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
@@ -516,28 +504,11 @@
                           name="options[{{ option.name | escape }}]"
                           form="{{ product_form_id }}"
                         >
-                          {%- 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 %}
-                            <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}{% if option_disabled %} disabled{% endif %}>
-                              {{ value }}
-                            </option>
-                          {%- endfor -%}
+                          {% render 'product-variant-options',
+                            product: product,
+                            option: option,
+                            block: block
+                          %}
                         </select>
                         {% render 'icon-caret' %}
                       </div>
@@ -566,7 +537,6 @@
                         {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                         - {{ variant.price | money | strip_html }}
                       </option>
->>>>>>> f1201d6 (Add sold out variant picker UI in Liquid)
                     {%- endfor -%}
                     <script type="application/json">
                       {{ product.variants | json }}
@@ -1307,6 +1277,22 @@
           ],
           "default": "button",
           "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
+        },
+        {
+          "type": "select",
+          "id": "select_soldout_type",
+          "options": [
+            {
+              "value": "none",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.options__1.label"
+            },
+            {
+              "value": "disabled",
+              "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.options__2.label"
+            }
+          ],
+          "default": "none",
+          "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.label"
         }
       ]
     },
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
new file mode 100644
index 00000000000..dbf12f7bd86
--- /dev/null
+++ b/snippets/product-variant-options.liquid
@@ -0,0 +1,67 @@
+{% comment %}
+    Renders product variant options
+
+    Accepts:
+    - product: {Object} product object.
+    - option: {Object} current product_option object.
+    - block: {Object} block object.
+
+
+    Usage:
+    {% render 'product-variant-options',
+      product: product,
+      option: option,
+      block: block
+    %}
+{% endcomment %}
+{%- liquid
+  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 product_form_id = 'product-form-' | append: section.id
+
+  assign button_options_html = ''
+  assign dropdown_options_html = ''
+-%}
+
+{%- for value in option.values -%}
+  {%- liquid
+    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]
+            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]
+            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]
+            assign option_disabled = false
+          endif
+      endcase
+    endfor
+  -%}
+
+  {%- if block.settings.picker_type == 'button' -%}
+    <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
+          name="{{ option.name }}"
+          value="{{ value | escape }}"
+          form="{{ product_form_id }}"
+          {% if option.selected_value == value %}checked{% endif %}
+          {% if option_disabled %}class="disabled" aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}
+    >
+    <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
+      {{ value }}
+    </label>
+  {%- elsif block.settings.picker_type == 'dropdown' -%}
+    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}{% if option_disabled and block.settings.select_soldout_type == 'disabled' %} disabled aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}>
+      {{ value }}{% if option_disabled %} [{{ 'products.product.unavailable' | t }}]{% endif %}
+    </option>
+  {%- endif -%}
+{%- endfor -%}
+

From 089307bbde67f3e54cb15a777cce6d6bcfedb5f1 Mon Sep 17 00:00:00 2001
From: Michael Silber <michael@cfxdesign.com>
Date: Tue, 12 Jul 2022 14:27:14 -0400
Subject: [PATCH 3/5] Rebase and resolve all (except focus)

---
 assets/section-main-product.css         | 1 +
 locales/en.default.schema.json          | 4 ++--
 snippets/product-variant-options.liquid | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index af651564c26..2aea52fd3ca 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -249,6 +249,7 @@ fieldset.product-form__input .form__label {
   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);
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index c3b6cdfc3ce..fd8fcc3cf3a 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -789,7 +789,7 @@
               }
             },
             "select_soldout_type": {
-              "label": "Soldout select type",
+              "label": "Sold out dropdown style",
               "options__1": {
                 "label": "None"
               },
@@ -1670,7 +1670,7 @@
               }
             },
             "select_soldout_type": {
-              "label": "Soldout select type",
+              "label": "Sold out dropdown style",
               "options__1": {
                 "label": "None"
               },
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index dbf12f7bd86..ce8fd8c840d 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -59,7 +59,7 @@
       {{ value }}
     </label>
   {%- elsif block.settings.picker_type == 'dropdown' -%}
-    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}{% if option_disabled and block.settings.select_soldout_type == 'disabled' %} disabled aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}>
+    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}{% if option_disabled and block.settings.select_soldout_type == 'disabled' %} aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}>
       {{ value }}{% if option_disabled %} [{{ 'products.product.unavailable' | t }}]{% endif %}
     </option>
   {%- endif -%}

From 7f099ca990dc6b813dc8f094e897d77908892cd7 Mon Sep 17 00:00:00 2001
From: Michael Silber <michael@cfxdesign.com>
Date: Wed, 14 Sep 2022 11:21:45 -0400
Subject: [PATCH 4/5] Implement the focus management fix Ludo provided, Address
 disabled color contrast, Update the setting language and its functionality to
 reflect what Ed suggested, Address Ludo's suggestions from his latest review

Continue contrast convention

Proper rebase
---
 assets/global.js                        |  3 +
 assets/section-main-product.css         |  4 +-
 locales/en.default.json                 |  2 +-
 locales/en.default.schema.json          | 20 ++----
 sections/featured-product.liquid        | 13 ++--
 sections/main-product.liquid            | 84 +++----------------------
 snippets/product-variant-options.liquid | 14 +++--
 7 files changed, 34 insertions(+), 106 deletions(-)

diff --git a/assets/global.js b/assets/global.js
index 4724ce73b38..b4b3f82b16d 100644
--- a/assets/global.js
+++ b/assets/global.js
@@ -840,6 +840,7 @@ class VariantSelects extends HTMLElement {
   }
 
   renderProductInfo() {
+    const activeElementId = document.activeElement.id;
     fetch(`${this.dataset.url}?variant=${this.currentVariant.id}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
       .then((response) => response.text())
       .then((responseText) => {
@@ -856,6 +857,8 @@ class VariantSelects extends HTMLElement {
 
         if (price) price.classList.remove('visibility-hidden');
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
+        
+        document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
       });
   }
 
diff --git a/assets/section-main-product.css b/assets/section-main-product.css
index 2aea52fd3ca..879d3b6cb82 100644
--- a/assets/section-main-product.css
+++ b/assets/section-main-product.css
@@ -246,13 +246,13 @@ fieldset.product-form__input .form__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);
+  color: rgba(var(--color-foreground), 0.6);
   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);
+  color: rgba(var(--color-background), 0.6);
 }
 .product-form__input input[type='radio']:focus-visible + label {
   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),
diff --git a/locales/en.default.json b/locales/en.default.json
index a8b584bf1c2..4a338261a50 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -143,7 +143,7 @@
       },
       "share": "Share this product",
       "sold_out": "Sold out",
-      "unavailable": "Unavailable",
+      "unavailable": "{{ option_value }} [Unavailable]",
       "vendor": "Vendor",
       "variant_sold_out_or_unavailable": "Variant sold out or unavailable",
       "video_exit_message": "{{ title }} opens full screen video in same window.",
diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
index fd8fcc3cf3a..d624a23dd7f 100644
--- a/locales/en.default.schema.json
+++ b/locales/en.default.schema.json
@@ -788,14 +788,8 @@
                 "label": "Pills"
               }
             },
-            "select_soldout_type": {
-              "label": "Sold out dropdown style",
-              "options__1": {
-                "label": "None"
-              },
-              "options__2": {
-                "label": "Disabled"
-              }
+            "show_soldout": {
+              "label": "Show sold out and unavailable variants indicator"
             }
           }
         },
@@ -1669,14 +1663,8 @@
                 "label": "Pills"
               }
             },
-            "select_soldout_type": {
-              "label": "Sold out dropdown style",
-              "options__1": {
-                "label": "None"
-              },
-              "options__2": {
-                "label": "Disabled"
-              }
+            "show_soldout": {
+              "label": "Show sold out and unavailable variants indicator"
             }
           }
         },
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index df78cfb54a8..e460b293872 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -705,6 +705,12 @@
           ],
           "default": "button",
           "label": "t:sections.featured-product.blocks.variant_picker.settings.picker_type.label"
+        },
+        {
+          "type": "checkbox",
+          "id": "show_soldout_variants",
+          "default": false,
+          "label": "t:sections.featured-product.blocks.variant_picker.settings.show_soldout.label"
         }
       ]
     },
@@ -879,13 +885,6 @@
         {
           "type": "title"
         },
-        {
-          "type": "text",
-          "settings": {
-            "text": "{{ section.settings.product.metafields.descriptors.subtitle.value }}",
-            "text_style": "subtitle"
-          }
-        },
         {
           "type": "price"
         },
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index 3efbf513541..dd2426d2ea6 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -486,57 +486,6 @@
                           block: block
                         %}
                       </fieldset>
-                  {%- endfor -%}
-                  <script type="application/json">
-                    {{ product.variants | json }}
-                  </script>
-                </variant-radios>
-              {%- else -%}
-                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} id="variant-selects-{{ section.id }}">
-                  {%- for option in product.options_with_values -%}
-                    <div class="product-form__input product-form__input--dropdown">
-                      <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
-                        {{ option.name }}
-                      </label>
-                      <div class="select">
-                        <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
-                          class="select__select"
-                          name="options[{{ option.name | escape }}]"
-                          form="{{ product_form_id }}"
-                        >
-                          {% render 'product-variant-options',
-                            product: product,
-                            option: option,
-                            block: block
-                          %}
-                        </select>
-                        {% render 'icon-caret' %}
-                      </div>
-                    </div>
-                  {%- endfor -%}
-
-                  <script type="application/json">
-                    {{ product.variants | json }}
-                  </script>
-                </variant-selects>
-              {%- endif -%}
-            {%- endunless -%}
-
-            <noscript class="product-form__noscript-wrapper-{{ section.id }}">
-              <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
-                <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
-                <div class="select">
-                  <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
-                    {%- for variant in product.variants -%}
-                      <option
-                        {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
-                        {% if variant.available == false %}disabled{% endif %}
-                        value="{{ variant.id }}"
-                      >
-                        {{ variant.title }}
-                        {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
-                        - {{ variant.price | money | strip_html }}
-                      </option>
                     {%- endfor -%}
                     <script type="application/json">
                       {{ product.variants | json }}
@@ -561,16 +510,11 @@
                             name="options[{{ option.name | escape }}]"
                             form="{{ product_form_id }}"
                           >
-                            {%- for value in option.values -%}
-                              <option
-                                value="{{ value | escape }}"
-                                {% if option.selected_value == value %}
-                                  selected="selected"
-                                {% endif %}
-                              >
-                                {{ value }}
-                              </option>
-                            {%- endfor -%}
+                            {% render 'product-variant-options',
+                              product: product,
+                              option: option,
+                              block: block
+                            %}
                           </select>
                           {% render 'icon-caret' %}
                         </div>
@@ -1279,20 +1223,10 @@
           "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
         },
         {
-          "type": "select",
-          "id": "select_soldout_type",
-          "options": [
-            {
-              "value": "none",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.options__1.label"
-            },
-            {
-              "value": "disabled",
-              "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.options__2.label"
-            }
-          ],
-          "default": "none",
-          "label": "t:sections.main-product.blocks.variant_picker.settings.select_soldout_type.label"
+          "type": "checkbox",
+          "id": "show_soldout_variants",
+          "default": false,
+          "label": "t:sections.main-product.blocks.variant_picker.settings.show_soldout.label"
         }
       ]
     },
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index ce8fd8c840d..5f1f54b9cbe 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -28,7 +28,11 @@
 
 {%- for value in option.values -%}
   {%- liquid
-    assign option_disabled = true
+    assign option_disabled = false
+    if block.settings.show_soldout_variants
+      assign option_disabled = true
+    endif
+
     for option1_name in variants_option1_arr
       case option.position
         when 1
@@ -53,14 +57,14 @@
           value="{{ value | escape }}"
           form="{{ product_form_id }}"
           {% if option.selected_value == value %}checked{% endif %}
-          {% if option_disabled %}class="disabled" aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}
+          {% if option_disabled %}class="disabled"{% endif %}
     >
     <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
-      {{ value }}
+      {{ value }}{% if option_disabled %}<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>{% endif %}
     </label>
   {%- elsif block.settings.picker_type == 'dropdown' -%}
-    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}{% if option_disabled and block.settings.select_soldout_type == 'disabled' %} aria-label="{{ 'products.product.variant_sold_out_or_unavailable' | t }}"{% endif %}>
-      {{ value }}{% if option_disabled %} [{{ 'products.product.unavailable' | t }}]{% endif %}
+    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>
+      {% if option_disabled %}{{ 'products.product.unavailable' | t: option_value: value  }}{% else %}{{ value }}{% endif %}
     </option>
   {%- endif -%}
 {%- endfor -%}

From 15cf88079a754ccb152fac10b8a4f217ccd1c11c Mon Sep 17 00:00:00 2001
From: Michael Silber <michael@cfxdesign.com>
Date: Wed, 28 Sep 2022 15:14:49 -0400
Subject: [PATCH 5/5] Latest suggested changes

---
 locales/en.default.json                 | 3 ++-
 sections/featured-product.liquid        | 2 ++
 sections/main-product.liquid            | 2 ++
 snippets/product-variant-options.liquid | 4 +---
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/locales/en.default.json b/locales/en.default.json
index 4a338261a50..76e7997ba18 100644
--- a/locales/en.default.json
+++ b/locales/en.default.json
@@ -143,8 +143,9 @@
       },
       "share": "Share this product",
       "sold_out": "Sold out",
-      "unavailable": "{{ option_value }} [Unavailable]",
+      "unavailable": "Unavailable",
       "vendor": "Vendor",
+      "value_unavailable": "{{ option_value }} [Unavailable]",
       "variant_sold_out_or_unavailable": "Variant sold out or unavailable",
       "video_exit_message": "{{ title }} opens full screen video in same window.",
       "view_full_details": "View full details",
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
index e460b293872..716369e89c6 100644
--- a/sections/featured-product.liquid
+++ b/sections/featured-product.liquid
@@ -208,6 +208,7 @@
                 {%- unless product.has_only_default_variant -%}
                   {%- if block.settings.picker_type == 'button' -%}
                     <variant-radios
+                      id="variant-radios-{{ section.id }}"
                       class="no-js-hidden"
                       data-section="{{ section.id }}"
                       data-url="{{ product.url }}"
@@ -230,6 +231,7 @@
                     </variant-radios>
                   {%- else -%}
                     <variant-selects
+                      id="variant-selects-{{ section.id }}"
                       class="no-js-hidden"
                       data-section="{{ section.id }}"
                       data-url="{{ product.url }}"
diff --git a/sections/main-product.liquid b/sections/main-product.liquid
index dd2426d2ea6..b8e4ecde3db 100644
--- a/sections/main-product.liquid
+++ b/sections/main-product.liquid
@@ -472,6 +472,7 @@
               {%- unless product.has_only_default_variant -%}
                 {%- if block.settings.picker_type == 'button' -%}
                   <variant-radios
+                    id="variant-radios-{{ section.id }}"
                     class="no-js-hidden"
                     data-section="{{ section.id }}"
                     data-url="{{ product.url }}"
@@ -493,6 +494,7 @@
                   </variant-radios>
                 {%- else -%}
                   <variant-selects
+                    id="variant-selects-{{ section.id }}"
                     class="no-js-hidden"
                     data-section="{{ section.id }}"
                     data-url="{{ product.url }}"
diff --git a/snippets/product-variant-options.liquid b/snippets/product-variant-options.liquid
index 5f1f54b9cbe..929d7d05f1e 100644
--- a/snippets/product-variant-options.liquid
+++ b/snippets/product-variant-options.liquid
@@ -22,8 +22,6 @@
 
   assign product_form_id = 'product-form-' | append: section.id
 
-  assign button_options_html = ''
-  assign dropdown_options_html = ''
 -%}
 
 {%- for value in option.values -%}
@@ -64,7 +62,7 @@
     </label>
   {%- elsif block.settings.picker_type == 'dropdown' -%}
     <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>
-      {% if option_disabled %}{{ 'products.product.unavailable' | t: option_value: value  }}{% else %}{{ value }}{% endif %}
+      {% if option_disabled %}{{ 'products.product.value_unavailable' | t: option_value: value }}{% else %}{{ value }}{% endif %}
     </option>
   {%- endif -%}
 {%- endfor -%}