updateVariantStatuses() is not working dawn 6.0.0 theme

[raymondarevalo]

I just saw a latest version of dawn 10.0.0 and noticed that the variant statuses update whenever a selected variant changes. 

I liked the idea of it and wanted to incorporated it to an old project of mine that uses dawn 6.0.0. After bringing in a few changes, I noticed that the variant statuses doesn't work properly. It catches the correct information in updateVariantStatuses() and setInputAvailability(), but it seems to not replace the information on the DOM when setInputAvailability( ... input.innerText = input.getAttribute("value"); ...).

Would anyone know what's causing this?

Here are the following files I changed or added.

main-product.liquid
i replaced the markup in this variant_picker case to 'product-variant-picker' and 'product-variant-options' snippets. I copied the code exact code from dawn 10.0.0.

{%- when 'variant_picker' -%}
    {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}

section-main-product.css

I added the following to account for when the variant is disabled due to being sold out or unavailable

.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.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);
}

global.js

I added the two functions from dawn 10.0.0 and called this.updateVariantStatuses() within onVariantChange(). I did not change anything else in the VariantSelects class.

class VariantSelects extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("change", this.onVariantChange);
  }

  onVariantChange() {
    ...
    this.updateVariantStatuses();
    if (!this.currentVariant) {...} else {...}
  }
  
    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"));
      }
    });
  }
  
  ...
  <!-- no other changes to the other functions -->
}

Theme.liquid

I added unavailable_with_option as a window variant string

en.default.json
I added onto this file as needed (mainly for the 'product-variant-picker' and 'product-variant-options' snippets).