Set type="button" on Add to Cart - Buttons (to prevent parent form submit on button click)
JPustkuchen opened this issue · 0 comments
Context:
Using iframe:false; and placing the buy button into an existing form.
Problem:
Generally works perfectly, but the button is missing the type="button"
attribute, so if "Add to cart" is clicked, the form is being submitted
Proposed resolution:
Add type="button"
attribute on the
<button class="shopify-buy__btn shopify-buy__beside-quantity" data-element="product.button">Add to cart</button>
button.
Current result:
<button class="shopify-buy__btn shopify-buy__beside-quantity" data-element="product.button">Add to cart</button>
Expected result:
<button class="shopify-buy__btn shopify-buy__beside-quantity" data-element="product.button" type="button">Add to cart</button>
Temporary (dirty) workaround:
"events": {
afterRender: function (component) {
// Add type="button" to the buttons, so they won't submit the outer form!
const shopifyBuyButtons = document.querySelectorAll(".shopify-buy__btn");
shopifyBuyButtons.forEach((shopifyBuyButton) => {
shopifyBuyButton.setAttribute('type', 'button');
});
},
},