[Product page & feat. product] Fix unavailable variant issue (#2031)

assets/global.js

@@ -765,6 +765,7 @@ class VariantSelects extends HTMLElement {
     this.toggleAddButton(true, '', false);
     this.updatePickupAvailability();
     this.removeErrorMessage();
+    this.updateVariantStatuses();
 
     if (!this.currentVariant) {
       this.toggleAddButton(true, '', true);
@@ -823,6 +824,28 @@ class VariantSelects extends HTMLElement {
     });
   }
 
+  updateVariantStatuses() {
+    const selectedOptionOneVariants = this.variantData.filter(variant => this.querySelector(':checked').value === variant.option1);
+    const inputWrappers = [...this.querySelectorAll('.product-form__input')];
+    inputWrappers.forEach((option, index) => {
+      if (index === 0) return;
+      const optionInputs = [...option.querySelectorAll('input[type="radio"], option')]
+      const previousOptionSelected = inputWrappers[index - 1].querySelector(':checked').value;
+      const availableOptionInputsValue = selectedOptionOneVariants.filter(variant => variant.available && variant[`option${ index }`] === previousOptionSelected).map(variantOption => variantOption[`option${ index + 1 }`]);
+      this.setInputAvailability(optionInputs, availableOptionInputsValue)
+    });
+  }
+
+  setInputAvailability(listOfOptions, listOfAvailableOptions) {
+    listOfOptions.forEach(input => {
+      if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
+        input.innerText = input.getAttribute('value');
+      } else {
+        input.innerText = window.variantStrings.unavailable_with_option.replace('[value]', input.getAttribute('value'));
+      }
+    });
+  }
+
   updatePickupAvailability() {
     const pickUpAvailability = document.querySelector('pickup-availability');
     if (!pickUpAvailability) return;
@@ -845,7 +868,7 @@ class VariantSelects extends HTMLElement {
 
   renderProductInfo() {
     const requestedVariantId = this.currentVariant.id;
-    const activeElementId = document.activeElement.id;
+
     fetch(`${this.dataset.url}?variant=${requestedVariantId}&section_id=${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`)
       .then((response) => response.text())
       .then((responseText) => {
@@ -857,14 +880,11 @@ class VariantSelects extends HTMLElement {
         const source = html.getElementById(`price-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
         const skuSource = html.getElementById(`Sku-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
         const skuDestination = document.getElementById(`Sku-${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}`);
         const inventorySource = html.getElementById(`Inventory-${this.dataset.originalSection ? this.dataset.originalSection : this.dataset.section}`);
         const inventoryDestination = document.getElementById(`Inventory-${this.dataset.section}`);
 
         if (source && destination) destination.innerHTML = source.innerHTML;
         if (inventorySource && inventoryDestination) inventoryDestination.innerHTML = inventorySource.innerHTML;
-        if (variantPickerSource && variantPickerDestination) variantPickerDestination.innerHTML = variantPickerSource.innerHTML;
         if (skuSource && skuDestination) {
           skuDestination.innerHTML = skuSource.innerHTML;
           skuDestination.classList.toggle('visibility-hidden', skuSource.classList.contains('visibility-hidden'));
@@ -877,8 +897,6 @@ class VariantSelects extends HTMLElement {
         if (inventoryDestination) inventoryDestination.classList.toggle('visibility-hidden', inventorySource.innerText === '');
 
         this.toggleAddButton(!this.currentVariant.available, window.variantStrings.soldOut);
-
-        document.querySelector('variant-radios') ? this.querySelector(`[for="${activeElementId}"]`).focus() : this.querySelector(`#${activeElementId}`).focus();
       });
   }
 
@@ -928,6 +946,16 @@ class VariantRadios extends VariantSelects {
     super();
   }
 
+  setInputAvailability(listOfOptions, listOfAvailableOptions) {
+    listOfOptions.forEach(input => {
+      if (listOfAvailableOptions.includes(input.getAttribute('value'))) {
+        input.classList.remove('disabled');
+      } else {
+        input.classList.add('disabled');
+      }
+    });
+  }
+
   updateOptions() {
     const fieldsets = Array.from(this.querySelectorAll('fieldset'));
     this.options = fieldsets.map((fieldset) => {

assets/section-main-product.css

@@ -233,6 +233,10 @@ fieldset.product-form__input .form__label {
   color: rgb(var(--color-background));
 }
 
+.product-form__input input[type='radio']:not(.disabled) + label > .visually-hidden {
+  display: none;
+}
+
 @media screen and (forced-colors: active) {
   .product-form__input input[type=radio]:checked + label {
     text-decoration: underline;

layout/theme.liquid

@@ -277,6 +277,7 @@
         addToCart: `{{ 'products.product.add_to_cart' | t }}`,
         soldOut: `{{ 'products.product.sold_out' | t }}`,
         unavailable: `{{ 'products.product.unavailable' | t }}`,
+        unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
       }
 
       window.accessibilityStrings = {

locales/bg-BG.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Доставката</a> се изчислява при плащане.",
       "choose_options": "Изберете опции",
       "choose_product_options": "Изберете опции за {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Неналично]",
+      "value_unavailable": "{{ option_value }} – неналично",
       "variant_sold_out_or_unavailable": "Вариантът е изчерпан или неналичен.",
       "inventory_in_stock": "В наличност",
       "inventory_in_stock_show_count": "{{ quantity }} в наличност",

locales/cs.json

@@ -153,7 +153,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Poštovné</a> se vypočítá na pokladně.",
       "choose_options": "Výběr možností",
       "choose_product_options": "Zvolte možnosti pro: {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [nedostupné]",
+      "value_unavailable": "{{ option_value }} – není k dispozici",
       "variant_sold_out_or_unavailable": "Vyprodaná nebo nedostupná varianta",
       "inventory_in_stock": "Skladem",
       "inventory_in_stock_show_count": "{{ quantity }} skladem",

locales/da.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Levering</a> beregnes ved betaling.",
       "choose_options": "Vælg muligheder",
       "choose_product_options": "Vælg muligheder for {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Utilgængelig]",
+      "value_unavailable": "{{ option_value }} - Ikke tilgængelig",
       "variant_sold_out_or_unavailable": "Varianten er udsolgt eller utilgængelig",
       "inventory_in_stock": "På lager",
       "inventory_in_stock_show_count": "{{ quantity }} på lager",

locales/de.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Versand</a> wird beim Checkout berechnet",
       "choose_options": "Optionen auswählen",
       "choose_product_options": "Optionen für {{ product_name }} auswählen",
-      "value_unavailable": "{{ option_value }} [Nicht verfügbar]",
+      "value_unavailable": "{{ option_value }} – nicht verfügbar",
       "variant_sold_out_or_unavailable": "Variante ausverkauft oder nicht verfügbar",
       "inventory_in_stock": "Auf Lager",
       "inventory_in_stock_show_count": "{{ quantity }} auf Lager",

locales/el.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "Τα <a href=\"{{ link }}\">έξοδα αποστολής</a> υπολογίζονται κατά την ολοκλήρωση της αγοράς.",
       "choose_options": "Ορίστε επιλογές",
       "choose_product_options": "Ορίστε επιλογές για {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Μη διαθέσιμο]",
+      "value_unavailable": "{{ option_value }} - Μη διαθέσιμο",
       "variant_sold_out_or_unavailable": "Η παραλλαγή εξαντλήθηκε ή δεν είναι διαθέσιμη",
       "inventory_in_stock": "Σε απόθεμα",
       "inventory_in_stock_show_count": "{{ quantity }} σε απόθεμα",

locales/en.default.json

@@ -152,7 +152,7 @@
       "sold_out": "Sold out",
       "unavailable": "Unavailable",
       "vendor": "Vendor",
-      "value_unavailable": "{{ option_value }} [Unavailable]",
+      "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",

locales/es.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "Los <a href=\"{{ link }}\">gastos de envío</a> se calculan en la pantalla de pago.",
       "choose_options": "Seleccionar opciones",
       "choose_product_options": "Elegir opciones para {{ product_name }}",
-      "value_unavailable": "{{ option_value }} (no disponible)",
+      "value_unavailable": "{{ option_value }}: no disponible",
       "variant_sold_out_or_unavailable": "Variante agotada o no disponible",
       "inventory_in_stock": "En existencias",
       "inventory_in_stock_show_count": "{{ quantity }} en existencias",

locales/fi.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Toimituskulut</a> lasketaan kassalla.",
       "choose_options": "Valitse vaihtoehdot",
       "choose_product_options": "Valitse vaihtoehtoja tuotteelle {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [ei saatavilla]",
+      "value_unavailable": "{{ option_value }} – Ei ole käytettävissä",
       "variant_sold_out_or_unavailable": "Versio on loppuunmyyty tai ei saatavilla",
       "inventory_in_stock": "Varastossa",
       "inventory_in_stock_show_count": "{{ quantity }} varastossa",

locales/fr.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Frais d'expédition</a> calculés à l'étape de paiement.",
       "choose_options": "Choisir des options",
       "choose_product_options": "Choisir des options pour {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Indisponible]",
+      "value_unavailable": "{{ option_value }} – indisponible",
       "variant_sold_out_or_unavailable": "Variante épuisée ou indisponible",
       "inventory_in_stock": "En stock",
       "inventory_in_stock_show_count": "{{ quantity }} en stock",

locales/hr-HR.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Poštarina </a> se obračunava prilikom završetka kupnje.",
       "choose_options": "Odaberite opcije",
       "choose_product_options": "Odaberite željene opcije za {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Nedostupno]",
+      "value_unavailable": "{{ option_value }} – nedostupno",
       "variant_sold_out_or_unavailable": "Model je prodan ili nedostupan",
       "inventory_in_stock": "Dostupno",
       "inventory_in_stock_show_count": "Br. dostupnih komada: {{ quantity }}",

locales/hu.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "A <a href=\"{{ link }}\">szállítási költséget</a> a megrendeléskor számítjuk ki.",
       "choose_options": "Válassz a lehetőségek közül",
       "choose_product_options": "Termékváltozatok – {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [nincs készleten]",
+      "value_unavailable": "{{ option_value }} – Nincs készleten",
       "variant_sold_out_or_unavailable": "A változat elfogyott vagy nincs készleten",
       "inventory_in_stock": "Raktáron",
       "inventory_in_stock_show_count": "{{ quantity }} raktáron",

locales/id.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Biaya pengiriman</a> dihitung saat checkout.",
       "choose_options": "Pilih opsi",
       "choose_product_options": "Pilih opsi untuk {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Tidak Tersedia]",
+      "value_unavailable": "{{ option_value }} - Tidak tersedia",
       "variant_sold_out_or_unavailable": "Varian terjual habis atau tidak tersedia",
       "inventory_in_stock": "Tersedia",
       "inventory_in_stock_show_count": "{{ quantity }} tersedia",

locales/it.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Spese di spedizione</a> calcolate al check-out.",
       "choose_options": "Scegli opzioni",
       "choose_product_options": "Scegli opzioni per {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [non disponibile]",
+      "value_unavailable": "{{ option_value }} - Non disponibile",
       "variant_sold_out_or_unavailable": "Variante esaurita o non disponibile",
       "inventory_in_stock": "Disponibile",
       "inventory_in_stock_show_count": "{{ quantity }} disponibile/i",

locales/ja.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">配送料</a>はチェックアウト時に計算されます。",
       "choose_options": "オプションを選択",
       "choose_product_options": "{{ product_name }}のオプションを選択する",
-      "value_unavailable": "{{ option_value }}は販売できません",
+      "value_unavailable": "{{ option_value }}は利用できません",
       "variant_sold_out_or_unavailable": "バリエーションは売り切れているか販売できません",
       "inventory_in_stock": "在庫あり",
       "inventory_in_stock_show_count": "{{ quantity }}個の在庫",

locales/ko.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">배송료</a>는 결제 시 계산됩니다.",
       "choose_options": "옵션 선택하기",
       "choose_product_options": "{{ product_name }}의 옵션 선택",
-      "value_unavailable": "{{ option_value }}[구매할 수 없음]",
+      "value_unavailable": "{{ option_value }} - 사용할 수 없음",
       "variant_sold_out_or_unavailable": "품절이거나 구매할 수 없는 이형 상품",
       "inventory_in_stock": "재고 있음",
       "inventory_in_stock_show_count": "재고 {{ quantity }}개",

locales/lt-LT.json

@@ -153,7 +153,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Siuntimo išlaidos</a> apskaičiuojamos atsiskaitant.",
       "choose_options": "Rinktis variantus",
       "choose_product_options": "Rinktis {{ product_name }} variantus",
-      "value_unavailable": "{{ option_value }} [Neturime]",
+      "value_unavailable": "{{ option_value }} – neturime",
       "variant_sold_out_or_unavailable": "Prekė išparduota arba jos neturime",
       "inventory_in_stock": "Yra sandėlyje",
       "inventory_in_stock_show_count": "{{ quantity }} vnt. sandėlyje",

locales/nb.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Frakt</a> beregnes ved kassen.",
       "choose_options": "Velg alternativer",
       "choose_product_options": "Velg alternativer for {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Utilgjengelig]",
+      "value_unavailable": "{{ option_value }} – utilgjengelig",
       "variant_sold_out_or_unavailable": "Varianten er utsolgt eller utilgjengelig",
       "inventory_in_stock": "På lager",
       "inventory_in_stock_show_count": "{{ quantity }} på lager",

locales/nl.json

@@ -151,7 +151,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Verzendkosten</a> worden berekend bij de checkout.",
       "choose_options": "Opties kiezen",
       "choose_product_options": "Opties kiezen voor {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Niet beschikbaar]",
+      "value_unavailable": "{{ option_value }} - Niet beschikbaar",
       "variant_sold_out_or_unavailable": "Variant uitverkocht of niet beschikbaar",
       "inventory_in_stock": "Op voorraad",
       "inventory_in_stock_show_count": "{{ quantity }} op voorraad",

locales/pl.json

@@ -153,7 +153,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Koszt wysyłki</a> obliczony przy realizacji zakupu.",
       "choose_options": "Wybierz opcje",
       "choose_product_options": "Wybierz opcje dla {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [niedostępne]",
+      "value_unavailable": "{{ option_value }} - niedostępny",
       "variant_sold_out_or_unavailable": "Wariant wyprzedany lub niedostępny",
       "inventory_in_stock": "W magazynie",
       "inventory_in_stock_show_count": "{{ quantity }} w magazynie",

locales/pt-BR.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Frete</a> calculado no checkout.",
       "choose_options": "Escolher opções",
       "choose_product_options": "Escolha opções para {{ product_name }}",
-      "value_unavailable": "{{ option_value }} (indisponível)",
+      "value_unavailable": "{{ option_value }} – indisponível",
       "variant_sold_out_or_unavailable": "Variante esgotada ou indisponível",
       "inventory_in_stock": "Em estoque",
       "inventory_in_stock_show_count": "{{ quantity }} em estoque",

locales/pt-PT.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Envio</a> calculado na finalização da compra.",
       "choose_options": "Escolher opções",
       "choose_product_options": "Escolha opções para {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Indisponível]",
+      "value_unavailable": "{{ option_value }} - Indisponível",
       "variant_sold_out_or_unavailable": "Variante esgotada ou indisponível",
       "inventory_in_stock": "Em stock",
       "inventory_in_stock_show_count": "{{ quantity }} em stock",

locales/ro-RO.json

@@ -152,7 +152,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Taxele de expediere</a> sunt calculate la finalizarea comenzii.",
       "choose_options": "Alege opțiunile",
       "choose_product_options": "Alege opțiunile pentru {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [indisponibil]",
+      "value_unavailable": "{{ option_value }} – Indisponibil",
       "variant_sold_out_or_unavailable": "Varianta are stocul epuizat sau este indisponibilă",
       "inventory_in_stock": "În stoc",
       "inventory_in_stock_show_count": "{{ quantity }} în stoc",

locales/ru.json

@@ -153,7 +153,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Стоимость доставки</a> рассчитывается при оформлении заказа.",
       "choose_options": "Выберите варианты",
       "choose_product_options": "Выберите варианты для {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [Недоступно]",
+      "value_unavailable": "{{ option_value }} — Недоступно",
       "variant_sold_out_or_unavailable": "Вариант распродан или недоступен",
       "inventory_in_stock": "В наличии",
       "inventory_in_stock_show_count": "В наличии: {{ quantity }}",

locales/sk-SK.json

@@ -153,7 +153,7 @@
       "shipping_policy_html": "<a href=\"{{ link }}\">Doprava</a> sa vypočíta pri platbe.",
       "choose_options": "Vybrať možnosti",
       "choose_product_options": "Vyberte možnosti pre: {{ product_name }}",
-      "value_unavailable": "{{ option_value }} [nedostupné]",
+      "value_unavailable": "{{ option_value }} – nedostupné",
       "variant_sold_out_or_unavailable": "Variant je vypredaný alebo nedostupný",
       "inventory_in_stock": "Skladom",
       "inventory_in_stock_show_count": "{{ quantity }} skladom",