Jquery attaching product variants to buttons

Technical Q&A
1

I am using jquery. I need to assign two variants two one button and the rest to another button. I have printed the JSON for the product variants in the console for you to see. When you click on “Select Lenses” it brings you to an option if you want them to be prescription or not. I need to make it basically so the variants with / — / —’ are assigned to the “No” button. Then I need all other variants assigned to the “yes”. When all of the variants assigned to a button are unavailable, it will disable the button and assign some CSS. Below is part of the file I’m trying to work on. I know it’s not pretty as I am fairly new to JS and Jquery. If I can get some help on how to go about doing this, that would be amazing! Thanks!

const variants = {{product.variants | json}};

  // disable Prescription button if all children are unavailable
  const variant0 = variants[0].available == false;
  const variant1 = variants[1].available == false;
  const variant2 = variants[2].available == false;
  const variant3 = variants[3].available == false;
  const variant4 = variants[4].available == false;
  const variant5 = variants[5].available == false;
  const variant6 = variants[6].available == false;
  const variant7 = variants[7].available == false;
  const variant8 = variants[8].available == false;
  const variant9 = variants[9].available == false;
  const variant10 = variants[10].available == false;
  const variant11 = variants[11].available == false;
  const variant12 = variants[12].available == false;
  const variant13 = variants[13].available == false;
  let preNo = [variant0, variant4] ? true : false;
  let preYes = [variant1, variant2, variant3, variant5, variant6, variant7, variant8, variant9, variant10, variant11, variant12, variant13] ? true : false;
    
    if(preNo) {
      $(".line-item-properties-wrap .variant-input").first().find('input').attr("disabled", true);
      $(".line-item-properties-wrap .variant-input").first().find('label').addClass('disabled');
    }

    if(preYes) {
      $(".line-item-properties-wrap .variant-input").last().find('input').attr("disabled", true);
      $(".line-item-properties-wrap .variant-input").last().find('label').addClass('disabled');
    }
  
    console.log(variants);
    console.log(preNo);
    console.log(preYes);
2

I don’t know what the structure of your JSON is, but I’d say you should start by creating an array with all the variants that have / — / —’ in them. Then you can loop over your variants and check whether the id of that variant is in the array of variants with / — / —'. If it is, assign it to the “No” button, and if not, assign it to the “Yes” button. //this is just a guess of what your JSON looks like var productVariants = [ { id: 1, name: “variant1”, available: true, … }, { id: 2, name: “variant2”, available: false, … }, … ] //create an array of variants with / — / — var variantsWith — = productVariants.filter(function(variant) { return variant.name === “/ — / —” }) //loop through the variants and check whether they’re in the variantsWith array productVariants.forEach(function(variant) { var index = variantsWith —.indexOf(variant) if(index === -1) { //assign to “Yes” button } else { //assign to “No” button } })

3

Thanks! I will mess around with this and see if I can get it to work. Here is a link to a product page, At the top of the Console there is an “Array(14)”. That’s the printed JSON if you’re curious.