Add variant picker sold out UI [temporary solution] (#1407)

Shopify · Oct 12, 2022 · 6aa8e6c · 6aa8e6c
1 parent 6d2a6c9
commit 6aa8e6c
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 52 deletions.
diff --git a/assets/global.js b/assets/global.js
@@ -840,18 +840,25 @@ 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) => {
         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.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;
 
         const price = document.getElementById(`price-${this.dataset.section}`);
 
         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
@@ -243,11 +243,17 @@ 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);
+  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), 0.6);
+}
 .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/locales/en.default.json b/locales/en.default.json
@@ -145,6 +145,8 @@
       "sold_out": "Sold out",
       "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",
       "xr_button": "View in your space",

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -787,6 +787,9 @@
               "options__2": {
                 "label": "Pills"
               }
+            },
+            "show_soldout": {
+              "label": "Show sold out and unavailable variants indicator"
             }
           }
         },
@@ -1659,6 +1662,9 @@
               "options__2": {
                 "label": "Pills"
               }
+            },
+            "show_soldout": {
+              "label": "Show sold out and unavailable variants indicator"
             }
           }
         },

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -229,6 +229,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 }}"
@@ -238,21 +239,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">
@@ -261,6 +252,7 @@
                     </variant-radios>
                   {%- else -%}
                     <variant-selects
+                      id="variant-selects-{{ section.id }}"
                       class="no-js-hidden"
                       data-section="{{ section.id }}"
                       data-url="{{ product.url }}"
@@ -279,16 +271,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>
@@ -865,6 +852,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"
         }
       ]
     },

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -484,6 +484,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 }}"
@@ -492,21 +493,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">
@@ -515,6 +506,7 @@
                   </variant-radios>
                 {%- else -%}
                   <variant-selects
+                    id="variant-selects-{{ section.id }}"
                     class="no-js-hidden"
                     data-section="{{ section.id }}"
                     data-url="{{ product.url }}"
@@ -532,16 +524,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>
@@ -1358,6 +1345,12 @@
           ],
           "default": "button",
           "label": "t:sections.main-product.blocks.variant_picker.settings.picker_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
@@ -0,0 +1,69 @@
+{% 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
+
+-%}
+
+{%- for value in option.values -%}
+  {%- liquid
+    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
+          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"{% endif %}
+    >
+    <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
+      {{ 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 %}{{ 'products.product.value_unavailable' | t: option_value: value }}{% else %}{{ value }}{% endif %}
+    </option>
+  {%- endif -%}
+{%- endfor -%}
+