在 Shopify 系列中添加添加到购物车按钮

Question

我对 ENVY 模板有疑问。此模板不支持在位于主页的集合中添加购物车按钮。在此之前，我决定在显示这些产品的区域添加我自己的代码，但是当按下按钮添加到购物车时，它会将我发送到错误页面并显示消息 “参数丢失或无效：必需参数丢失或无效：项目”我的代码如下：

 function instantBuy(){
     var $ = jQuery;

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){ 
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
 }

表单代码

<form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
<input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
<button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
</form>

Answer 1

当您向/cart/add发送请求时必须发送“id”参数。 目前您发送的是“variantId”而不是“id”。

同样在您的 JavaScript 中没有 preventDefault 来保护浏览器发送请求。

另一方面，这可以在没有 JavaScript 的情况下完成。

这是更新后的代码：

<form action="/cart/add" method="post" class="variants" id="product-actions-{{ liquidObject.id }}" enctype="multipart/form-data">
<input type="hidden" name="id" value="{{ liquidObject.variants[0].id }}" />
<input type="hidden" name="return_to" value="/checkout" />
<button class="button buynow-btn" title="Buy"><span>Buy now</span></button>
</form>

还添加了一个“return_to”隐藏字段，当用户点击按钮时，它将直接重定向到结帐