添加多个数量的同一产品时如何更新 Shopify 购物车中的单个订单项？

Question

我正在开发一个 Shopify 商店，我需要允许用户单独自定义每个购物车项目，即使他们多次添加不同数量的相同产品。例如，客户可以将数量为 2 的产品添加到购物车，但希望对每件商品进行个性化设置（例如，通过添加“发件人”将蛋糕发送给不同的人 - 产品可能相同且批量）。

我已经使用 Liquid 直观地分割了购物车中的数量，如下所示：

{%- for i in (1..item.quantity) -%}
  <!-- Displaying each item separately -->
{%- endfor -%}

但是，当我尝试更新特定“拆分”商品的属性（通过 Shopify 购物车 API 中的行属性）时，它会更新该行中的所有商品，而不是仅更新一个商品。

以下是我如何尝试更新购物车中的订单项的片段：

const item_variant_id = this.querySelector('input[name="item_variant_id"]');
      const item_variant_key = this.querySelector('input[name="item_variant_key"]');
      const line_item_index = this.querySelector('input[name="line_item_index"]');


const body = JSON.stringify({
    line: line_item_index.value,  // 1-based index of the line item in the cart
    quantity: 2,  // just for testing
    properties: {
        "FROM": nombreField.value,
        "FOR": celularField.value
    }
});

拆分购物车项目的屏幕截图

Answer 1

在 Shopify 中，购物车将具有相同款式 ID 和属性的订单项分组在一起。如果您想将每个单独的项目视为单独的（例如，多次添加相同的产品但允许独特的自定义），则需要确保每个行项目都具有唯一的属性，即使它是相同的产品变体。

解决此问题的关键是使用 Shopify 的 Ajax Cart API 并在将产品添加到购物车时添加唯一标识符（订单项属性）。这样，Shopify 会将它们视为单独的订单项，即使它们有相同的产品变体 ID。

您可以通过以下方式实现：

• 每次将产品添加到购物车时，都会生成唯一标识符（例如随机数或时间戳）以将其与同一产品的其他实例区分开来。

• 然后，当通过 Ajax API 将产品添加到购物车时，请在

  properties

   字段中包含此唯一标识符。

下面的代码片段是一个示例，您可以参考：

let variantData = null;
let identifier = Math.floor(Math.random() * 9000000000) + 1000000000; // Generate a random 10-digit number

variantData = {
  id: variant_id, // Product's variant ID
  quantity: quantity, // Quantity to add
  properties: {
    _lineitem_identifier: identifier // Unique identifier to differentiate items
  }
};

console.log('Variant data:', variantData);

try {
  const response = await fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(variantData)
  });

  const responseResult = await response.json();
  console.log('The product has been added to cart successfully:', responseResult);
} catch (error) {
  console.error('Error:', error);
}

希望对您有帮助！