You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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');
});
},
},
The text was updated successfully, but these errors were encountered:
JPustkuchen
changed the title
Set type="button" on Add to Cart - Buttons
Set type="button" on Add to Cart - Buttons (to prevent parent form submit on button click)
Apr 11, 2023
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 submittedProposed 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:
The text was updated successfully, but these errors were encountered: