Shopify：如何在checkout.liquid中向lineItems添加商品（Shopify Plus方案适配求助）

我明白你遇到的困扰——那段在普通Shopify店铺能正常工作的前端代码，到了Shopify Plus环境里就失效了。这主要是因为Plus版本的结账流程有更严格的安全策略和会话绑定机制，直接用简单的jQuery POST调用很容易被拦截，或者无法同步结账会话的购物车状态。下面给你几个可行的解决方案，按推荐程度排序：

方案1：使用Shopify Scripts（官方推荐，最可靠） #

Shopify Plus专属的Scripts Editor是处理这类自动添加商品场景的最佳方式，它在服务器端执行，完全避开前端的安全限制，还能精准控制逻辑（比如避免重复添加、设置触发条件）。

你可以在Shopify后台的Scripts Editor中创建一个Cart Script，代码示例如下：

# 配置参数
FREE_ITEM_VARIANT_ID = 7387208286253
FREE_ITEM_QUANTITY = 1

# 检查购物车是否已存在该赠品，防止重复添加
already_has_free_item = cart.line_items.any? { |item| item.variant.id == FREE_ITEM_VARIANT_ID }

unless already_has_free_item
  # 这里可以添加触发条件，比如购物车总价满100美元
  # if cart.subtotal_price >= Money.new(cents: 10000)
    free_item = LineItem.new(
      variant_id: FREE_ITEM_VARIANT_ID,
      quantity: FREE_ITEM_QUANTITY,
      properties: { "赠品标识" => "系统自动添加" }
    )
    cart.add_line_item(free_item)
  # end
end

保存后，这个脚本会在用户进入结账前自动执行，完全不需要前端代码干预，稳定性拉满。

方案2：修复前端AJAX调用（适配Plus的安全机制） #

如果你还是想用前端代码实现，需要补充CSRF令牌的传递——Shopify Plus会验证AJAX请求的CSRF令牌，否则会拒绝请求。修改后的代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // 从页面meta标签获取Shopify的CSRF令牌
    const csrfToken = $('meta[name="csrf-token"]').attr('content');
    const variantId = 7387208286253;
    // 用localStorage标记已添加，避免页面刷新重复执行
    const addedFlag = `added_free_item_${variantId}`;

    if (!localStorage.getItem(addedFlag)) {
        $.ajax({
            url: '/cart/add.js',
            method: 'POST',
            data: { quantity: 1, id: variantId },
            // 必须携带CSRF令牌
            headers: { 'X-Shopify-CSRF-Token': csrfToken },
            dataType: 'json',
            success: function() {
                localStorage.setItem(addedFlag, 'true');
                window.location.reload(true);
            },
            error: function(xhr) {
                console.error('添加商品失败:', xhr.responseText);
            }
        });
    }
});
</script>

另外需要确认你的Plus店铺允许结账页面执行自定义脚本：进入Shopify后台Settings > Checkout > Scripts and styles，确保启用了允许自定义脚本的选项。

方案3：排查Plus专属的限制 #

如果以上方案还是不行，可能是你的Plus店铺启用了额外的安全设置：

• 检查是否开启了Checkout API权限限制，需要确保购物车操作的API权限正常
• 确认结账页面的会话隔离设置，有些Plus店铺会严格绑定结账会话与购物车状态，前端刷新可能无法同步，这时候还是推荐用方案1的Scripts。

内容的提问来源于stack exchange，提问作者StormyTalent