Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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">−</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>
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025