How to "Add Products" from a Custom Select Menu on a Customized Contact Form "to Cart"

How to "Add Products" from a Custom Select Menu on a Customized Contact Form "to Cart"

irum_s
New Member
10 0 0

 

I have customized the contact form and have added an  Select Dropdown with all available products (of all collection). I have also added a custom quantity selector. What I am trying to do is, add the selected product and its selected quantity to the cart and want to display cart on the same page below the select dropdown and add button. Can someone help me 

     {% when 'ProductID' %}
              <fieldset class="contact__block" {{ block.shopify_attributes }}>
              {% if block.settings.title != blank %}
     <label for="Form-{{ section.id }}-{{ forloop.index0 }}">{{ block.settings.title }}</label>
                {% endif %}
   <div class="row">
                 <div class="columnL"> 

              <select id="sp"  is="ms-dropdown" name="contact[ProductID]" onchange="getSelectedValue(this)" onfocus="this.selectedIndex = -1;"  placeholder="Select Product" >   

              {% for collection in collections %}
              {% for product in collection.products %}  
<option data-image="{{ variant.image | default: product.featured_image | img_url: 'small' }}" value="{{ product.title }}">{{ product.title }}
 </option>

        {% endfor %}

          {% endfor %}       
              </select>
                 </div>
              
 <div class="quantity columnR">           
      <button id="min1" onclick="minQty();" class="quantity__button quantity__button--minus" type="button">&minus;</button>
      <input class="quantity__input" min="1" type="number" id="dirSelQty" />
      <button id="plus1" onclick="addQty();" class="quantity__button quantity__button--plus" type="button">+</button>
</div>   
   
  
</fieldset>           
    <button id="bS" class="btn--outline btn--full btn--primary uppercase btn--add-to-cart" type="button">Add to Selection</button>
             
 <div class="cart__items"  >          
 The value of the option selected is: 
        <label id = "selectedProd">
      <p>  No Product Selected Yet</p>
        </label>
 </div>

 

<script>
var selected = [];
document.getElementById('bS').onclick = function() {
for (var option of document.getElementById('sp').options)
{
if (option.selected) {

selected.push(option.value+ " "+qty);
document.getElementById('selectedProd').innerHTML= selected.toString();
}
}
}
var qty=1;
document.getElementById('dirSelQty').value = qty;
function minQty()
{
qty = qty-1;
document.getElementById('dirSelQty').value = qty;
}
function addQty()
{
qty = qty+1;
document.getElementById('dirSelQty').value = qty;
}
</script>

 

Replies 0 (0)