Sweet Alert仅在Shopify中可在一个添加到购物车按钮中使用

Question

Sweet Alert仅在主页或产品页面上的第一个自定义添加到购物车按钮上起作用。其余按钮将无法使用...

我尝试了所有在Google中搜索过的选项，但均无济于事。我注意到querySelectorAll是正确的方法，但是它仍然无法正常工作，或者我在使用它时错了。希望有人能帮忙。谢谢！

这是自定义的购物车按钮作为表单。

<form method="post" class="forms" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="btn"/>
  <input type="hidden"  name="return_to" value="back" />
</form>

然后是js。

<script>
    document.querySelector('.forms').addEventListener('submit', function(e) {
      var form = this;

      e.preventDefault();

      swal({
          title: "Go to cart page?",
          text: "Or continue shopping",
          icon: "info",
          buttons: [
            'Continue shopping',
            'Go to cart'
          ],
          dangerMode: true,
        }).then(function(isConfirm) {
          if (isConfirm) {
            window.location.href = 'theURL';
          } else {
            return false; 
          }
        });
    });
 </script>

我的期望是，每当有人单击两次或两次以上的任何按钮时，swal警报将起作用，并且不仅限于单击。谢谢！