如何使用正确的JavaScript循环为数组字面量填充Shopify商品数据用于gtag事件

解决方法 #

JavaScript不支持在数组字面量内部直接插入for循环生成元素，你可以先提前构造好items数组，再传入gtag的配置参数中，以下是两种常用实现方案：

方案1：基础for循环实现

// 提前构造items数组
const items = [];
for (let line_item_count = 0; line_item_count < Shopify.checkout.line_items.length; line_item_count++) {
  const currentItem = Shopify.checkout.line_items[line_item_count];
  items.push({
    'id': currentItem.variant_id.toString(),
    'quantity': currentItem.quantity,
    'price': currentItem.line_price
  });
}

// 调用gtag上报事件
gtag('event', 'purchase', {
    'transaction_id': '{{ order.order_number }}',
    'items': items
  });

方案2：数组map方法简化实现（更推荐）

利用数组自带的map方法可以直接遍历返回新数组，不需要手动写循环和push操作：

const items = Shopify.checkout.line_items.map(currentItem => ({
  'id': currentItem.variant_id.toString(),
  'quantity': currentItem.quantity,
  'price': currentItem.line_price
}));

gtag('event', 'purchase', {
    'transaction_id': '{{ order.order_number }}',
    'items': items
  });

注意：你原有代码中的Shopify.checkout.line_items[line_item_count] += 1是错误的冗余逻辑，会篡改原始商品数据，不需要保留。

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