Personalized checkout and custom promotions with Shopify Scripts
<form action="/cart/add" method="post" class="add-to-cart-wrapper" data-productid="{{product.id}}">
<input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
<div class="add-to-cart">
<button
class="upper pointer bg-green txt-white" type="submit" name="add" id="AddToCart"
>
добавить в корзину
</button>
</div>
<div class="price-wrapper">
<div class="quantity-wrapper">
<input type="number" id="Quantity"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
hidden />
<button
onclick="decreaseQuantity(event)"
class="pointer reduce"
>
<img
src="{{'Minimaize.svg' | asset_url}}"
alt="reduce icon"
width={{ image.width }} height={{ image.height }} loading="lazy"
/>
</button>
<div class="quantity" id="quantity">
1
</div>
<button
onclick="increaseQuantity(event)"
class="pointer increase"
>
<img
src="{{'Maximize.svg' | asset_url}}"
alt="increase icon"
width={{ image.width }} height={{ image.height }} loading="lazy"
/>
</button>
</div>
<div class="price">{{ product.price | money}}</div>
</div>
</form>
why does on input change, all form is submiting and redirecting me to cart page?
can you try this
<form action="/cart/add" method="post" class="add-to-cart-wrapper">
<input type="hidden" name="id" data-productid="{{product.id}}" class="product-select" value="{{ product.variants[0].id }}" data-variant-title="{{ product.variants[0].title }}" />
<div class="add-to-cart">
<button
class="upper pointer bg-green txt-white" type="submit" name="add" id="AddToCart"
>
добавить в корзину
</button>
</div>
<div class="price-wrapper">
<div class="quantity-wrapper">
<input type="number" id="Quantity"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
hidden />
<button
onclick="decreaseQuantity(event)"
class="pointer reduce"
>
<img
src="{{'Minimaize.svg' | asset_url}}"
alt="reduce icon"
width={{ image.width }} height={{ image.height }} loading="lazy"
/>
</button>
<div class="quantity" id="quantity">
1
</div>
<button
onclick="increaseQuantity(event)"
class="pointer increase"
>
<img
src="{{'Maximize.svg' | asset_url}}"
alt="increase icon"
width={{ image.width }} height={{ image.height }} loading="lazy"
/>
</button>
</div>
<div class="price">{{ product.price | money}}</div>
</div>
</form>
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025