I am trying to make a make a custom variant option select for our Shopify/Tapcart store. The reason needed is because certain products are tagged that only subscription members can purchase. There is no native way to do this other than creating a custom screen and having all the logic. Here is what I have so far:

let product = {
  "hasOnlyDefaultVariant": false,
  "options": [
    {
      "name": "Size",
      "values": [
        "Medium",
        "Large",
        "XL"
      ]
    },
    {
      "name": "Color",
      "values": [
        "Red",
        "Black"
      ]
    }
  ],
  "variants": {
    "edges": [
      {
        "node": {
          "id": "gid://shopify/ProductVariant/41472080117811",
          "availableForSale": true,
          "selectedOptions": [
            {
              "name": "Size",
              "value": "Medium"
            },
            {
              "name": "Color",
              "value": "Red"
            }
          ]
        }
      },
      {
        "node": {
          "id": "gid://shopify/ProductVariant/41472080150579",
          "availableForSale": true,
          "selectedOptions": [
            {
              "name": "Size",
              "value": "Medium"
            },
            {
              "name": "Color",
              "value": "Black"
            }
          ]
        }
      },
      {
        "node": {
          "id": "gid://shopify/ProductVariant/41472080183347",
          "availableForSale": false,
          "selectedOptions": [
            {
              "name": "Size",
              "value": "Large"
            },
            {
              "name": "Color",
              "value": "Red"
            }
          ]
        }
      },
      {
        "node": {
          "id": "gid://shopify/ProductVariant/41472080216115",
          "availableForSale": false,
          "selectedOptions": [
            {
              "name": "Size",
              "value": "Large"
            },
            {
              "name": "Color",
              "value": "Black"
            }
          ]
        }
      },
      {
        "node": {
          "id": "gid://shopify/ProductVariant/41472080248883",
          "availableForSale": false,
          "selectedOptions": [
            {
              "name": "Size",
              "value": "XL"
            },
            {
              "name": "Color",
              "value": "Red"
            }
          ]
        }
      },
      {
        "node": {
          "id": "gid://shopify/ProductVariant/41472080281651",
          "availableForSale": true,
          "selectedOptions": [
            {
              "name": "Size",
              "value": "XL"
            },
            {
              "name": "Color",
              "value": "Black"
            }
          ]
        }
      }
    ]
  }
}

let optionsAtcContainer = document.querySelector('.options-atc-container'),
    selectedOption = [],
    selectedProductVariant = '';

if (customerTags.includes('Active Subscription')) {
  if (!product.hasOnlyDefaultVariant) {
    product.variants.edges.forEach(variant => {
      if (selectedOption.length > 0) return;

      if (variant.node.availableForSale) {
        selectedOption = variant.node.selectedOptions;
        selectedProductVariant = variant.node.id.split('/').pop();
      }
    });
    
    product.options.forEach((option, i) => {
      let fieldset = document.createElement('fieldset'),
          legend = document.createElement('legend');
      
      legend.innerHTML = `Select ${option.name}`;
      
      fieldset.append(legend);
      
      option.values.forEach(value => {
        let input = document.createElement('input'),
            label = document.createElement('label');
        
        input.type = 'radio';
        input.name = option.name.toLowerCase();
        input.value = value;
        
        if (value === selectedOption[i].value) {
          input.checked = true;
        }
        
        label.innerHTML = value;
        label.setAttribute('for', option.name.toLowerCase());
        
        fieldset.append(input);
        fieldset.append(label);
        
        input.addEventListener('change', e => {
          switch(selectedOption[i].name) {
            case 'Size':
              selectedOption[i].value = e.target.value;
              break;
            case 'Color':
              selectedOption[i].value = e.target.value;
              break;
            default:
              break;
          }
          
          console.log(selectedOption);
        })
      });
      
      optionsAtcContainer.append(fieldset);
    });
  }
  
  let productAddToCart = document.createElement('button');
  
  productAddToCart.classList.add('add-to-cart');
  productAddToCart.innerHTML = availableForSale ? 'Add to Cart' : 'Sold Out';
  
  optionsAtcContainer.append(productAddToCart);
} else {
  let clubMessage = document.createElement('div');
  
  clubMessage.classList.add('club-message');
  clubMessage.innerHTML = `
  <p><strong>Heads Up! You Must Be a Club Member To Purchase This Product.</strong></p>
  <p>Already a Member? <a href="">Sign In!</a></p>
  <p>Want to become a Member? <a href="">Join today!</a></p>
  `;
  
  optionsAtcContainer.append(clubMessage);
}

What I am having some trouble with mainly is, whether I disable the input radio or something else, displaying whether a selected option is available for sale or not. In this example, we have a product where the variants are in red or black and have multiple sizes. So, if the selection is red, it will display which is available and not for red, and the same for black. Now, another thing, is sometimes the options are just sizes. Also, it can be something totally different like phone cases for different model phones.

There are a couple of things I’ve tried, but can’t seem to get it exactly, or at least super close, to what I am needing.

Closest I got what something like the following:

let isAvailable = product.variants.edges.find(variant => variant.node.availableForSale && variant.node.selectedOptions.some(so => so.name === option.name && so.value === value));
        
input.disabled = !isAvailable;

But for my example, the only radio button that gets disabled is the large even though XL should be disabled for red. I’m guessing because that is not available for both red and black.

Any and all help/suggestions are greatly appreciated. Thank you in advance…