Is this possible to do in shopify ajax call

Highlighted
New Member
1 0 0

hey, i've created a custom product page. The idea is that I have a product available in 3 different colours and an option to get a pack of 2 or 3 for a discounted price.

Excatly the same as this website, you will see once you select a product a number of <select> forms appear depending on the amount of items : 
https://uvcoolershop.com/?widipub_id=5a4574292fcedb19966afac2&wtrd_offer_id=5ed67e3e824e0b59e570f103...

The issue is  that it just adds the same item same colour 3 times. this is the input field where I get the amount the user selected (the value is the item quantity )  :

        <input id="radio-10" name="id" class="form-check-input" type="radio" value={{ forloop.index }} />

   Here i get the varient id the user selected  (I only display product2 or product3 if the user selected a pack of 2/3  

 

<div class="selectColor">
<label for="cars">Choose a color</label>
<select id="product" >
<option value={{product.variants[0].id}}> Black </option>
<option class="color" value={{product.variants[1].id}}> White </option>

</select>

<select id="product2" >
<option value={{product.variants[0].id}}> Black </option>
<option class="color" value={{product.variants[1].id}}> White </option>
</select>

<select id="product3" >
<option value={{product.variants[0].id}}> Black </option>
<option class="color" value={{product.variants[1].id}}> White </option>

</select>

 


then I have the ajax call  but  here I'm stuck and I don't understand how I can get the color for each item. 
I'm actually creating a copy of the website I posted above so I need exactly the same way they have it but seems impossible on Shopify unless I'm missing something 

  data: {
             items: [
             { 
             quantity: ? ,
             id: $('option:selected').val()  //gets the  
             }
         ]
  },

 
thank you !

0 Likes