[Product page & feat. product] Fix unavailable variant issue

assets/global.js

@@ -755,6 +755,41 @@ class VariantSelects extends HTMLElement {
     this.addEventListener('change', this.onVariantChange);
   }
 
+  updateVariantStatuses() {
+    const selectedOptionOneSelector = this.id.includes('variant-radios') ? '[type=radio]:checked+label' : 'option:checked';
+    const typeOfInput = this.id.includes('variant-radios') ? 'input' : 'option';
+
+    //Grab all the existing variants based on the selected option 1
+    this.selectedOptionOneVariants = JSON.parse(this.querySelector('[type="application/json"]').textContent).filter(variant => this.querySelector(selectedOptionOneSelector).innerText.trim() === variant.option1);
+    //Array of all the input wrappers we have (option1, option2 and option3)
+    this.inputWrappers = [...this.querySelectorAll('.product-form__input')];
+    //If there is only option 1 inputs then early return, don't check the rest
+    if (!this.inputWrappers[1]) return;
+    //Select the inputs present in the HTML
+    this.option2Inputs = [...this.inputWrappers[1].querySelectorAll(typeOfInput)];
+    //Create an array of all the available option 2 values of the currently selected option 1
+    this.selectedExistingOptions2 = this.selectedOptionOneVariants.filter(option => option.available).map( a => a.option2);
+    //For each input in the HTML check that the value is available in the array of available variants. If not, then add a class of disabled
+    this.option2Inputs.forEach(input => {
+      if (this.selectedExistingOptions2.includes(input.getAttribute('value'))) {
+        this.id.includes('variant-radios') ? input.classList.remove('disabled') : input.innerText = input.getAttribute('value');
+      } else {
+        this.id.includes('variant-radios') ? input.classList.add('disabled') : input.innerText = input.getAttribute('value') + ` - ${window.variantStrings.unavailable}`;
+      }
+    });
+    //Same as above here for option 3 values if they exist
+    if (!this.inputWrappers[2]) return;
+    this.option3Inputs = [...this.inputWrappers[2].querySelectorAll(typeOfInput)];
+    this.selectedExistingOptions3 = this.selectedOptionOneVariants.filter(option => option.available).map( a => a.option3);
+    this.option3Inputs.forEach(input => {
+      if (this.selectedExistingOptions3.includes(input.getAttribute('value'))) {
+        this.id.includes('variant-radios') ? input.classList.remove('disabled') : input.innerText = input.getAttribute('value');
+      } else {
+        this.id.includes('variant-radios') ? input.classList.add('disabled') : input.innerText = input.getAttribute('value') + ` - ${window.variantStrings.unavailable}`;
+      }
+    });
+  }
+
   onVariantChange() {
     this.updateOptions();
     this.updateMasterId();
@@ -763,6 +798,7 @@ class VariantSelects extends HTMLElement {
     this.removeErrorMessage();
 
     if (!this.currentVariant) {
+      this.updateVariantStatuses();
       this.toggleAddButton(true, '', true);
       this.setUnavailable();
     } else {
@@ -857,7 +893,7 @@ 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();
       });
   }

locales/en.default.json

@@ -145,7 +145,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",