Set type="button" on Add to Cart - Buttons (to prevent parent form submit on button click)

[JPustkuchen]

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