Liquid, JavaScript, themes, sales channels
Hi!
I want to use number input field on Quantity instead of default quantity selector (with variants).
Currently: Number (e.g "6") inputted in quantity box increase Cart only by 1.
I am not good developer skills, and will be very grateful for help!
Form code is below:
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm">
<div class="selector-wrapper-secton">
{% if settings.enable_color_swatch %}
{% for option in product.options %}
{% include 'swatch' with option %}
{% endfor %}
{% endif %}
<select name="id" id="productSelect" class="singlepro__variants">
{% for variant in product.variants %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }}</option>
{% endfor %}
</select>
</div>
<div class="singlepro__quantity {% unless settings.product_quantity_enable %} hide {% endunless %}">
<div class="quantity-box-section">
<label>{{ 'products.product.quantity' | t }}</label>
<input min="1" type="number" id="quantity" name="quantity"/>
<style>
#quantity {
padding: 8px;
width: 55px;
border: 1px solid #000;
border-radius: 4px;
}
</style>
</div>
</div>
{% if settings.enable_add_cart %}
<button type="submit" name="add" id="AddToCart" class="btn pull-left procart">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endif %}
</form>
Maybe there is dependence in script, but i am not sure.
<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector,
translations: {
add_to_cart : "{{ 'products.product.add_to_cart' | t }}",
sold_out : "{{ 'products.product.sold_out' | t }}",
unavailable : "{{ 'products.product.unavailable' | t }}"
}
});
Solved! Go to the solution
This is an accepted solution.
There is code in the shop.js file in your theme that adds the item to the cart. It's looking for the quantity as a <select> element, not a number input.
You can remove the 'select' part and just look for '[name=quantity]'
Can I have your store URL in order to have a check?
Yep, ofc
url: teamail.pl
pass (right top corner button): raigin
This is an accepted solution.
There is code in the shop.js file in your theme that adds the item to the cart. It's looking for the quantity as a <select> element, not a number input.
You can remove the 'select' part and just look for '[name=quantity]'
Thank you!
Its work as expected now.
Hi!
Maybe you could help me again. How could i save both variant of input?
I want to use input field and selector (it will be depends on product.type)
I've tried to add new "var" in the same way with select method, but it was not work.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024