Shopify/buy-button-js

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');
          });
        },
      },