Price not updating when selecting variant (After implementing code to hide unavailable variants)

Technical Q&A
1

Hi there,

Theme: Debut

I recently implemented custom code to hide unavailable variants within the dropdowns of variant products. This is mainly for situations where we have 2 dropdowns on the product and we want the second dropdown to auto update based on what was selected in the first dropdown.

I applied the below code to our theme.js file and it worked perfectly on variant product pages with 2 dropdowns. However I noticed afterwards that variant product pages with only 1 dropdown were now broken. Upon selecting an option from the dropdown the pricing was not updating anymore. However on variant products with 2 dropdowns pricing is working perfectly.

_hideUnavailableOptions: function() {
  const option1 = document.getElementById("SingleOptionSelector-0");
  const option2 = document.getElementById("SingleOptionSelector-1");
if (option2) {
  const secondOptions = option2.options;      
  const variants = this.product.variants;
  let possibles = [];
  variants.forEach((variant) => {
    if (variant.options.includes(option1.value)) {
    possibles.push(variant.options)
  }
 })
 for (let option of secondOptions) {
    const value = option.value;
    let flag = false;
    possibles.forEach((possible) => {
     if (possible.includes(value)) {
     flag = true;
    }
  })
  if (flag === false) {
    option.removeAttribute('selected');
    option.setAttribute('disabled', 'disabled');
  } else {
   option.removeAttribute('disabled');
  }
 } option2.querySelector(':not([disabled="disabled"])').setAttribute('selected', 'selected');
 }
},

From inspecting the code can someone guide me on how to fix the pricing issue on variant products with only 1 dropdown?

Update
Our console is logging the below error in relation to this issue:

theme.js?v=3241570912044936170:751 Uncaught TypeError: Cannot read property ‘options’ of null
at Variants._hideUnavailableOptions (theme.js?v=3241570912044936170:751)
at new Variants (theme.js?v=3241570912044936170:692)
at Product._initVariants (theme.js?v=3241570912044936170:8164)
at new Product (theme.js?v=3241570912044936170:8077)
at Sections._createInstance (theme.js?v=3241570912044936170:47)
at Sections. (theme.js?v=3241570912044936170:141)
at NodeList.forEach ()
at Sections.register (theme.js?v=3241570912044936170:139)
at HTMLDocument. (theme.js?v=3241570912044936170:9586)

2

Hi,

Give me your website url So I’ll check

.