如何使用产品句柄从包含shopify中句柄的数组中获取产品数据

Question

我有一个存储在主产品元字段中的产品句柄列表，我通过以下方式获取：

{% assign firstComponentHandles = product.variants.first.metafields.custom.component_handles %}

const handlesData = {{ firstComponentHandles }};
console.log({handlesData}); 

回应：

{
    "handlesData": [
        "burger",
        "carbonated-beverage"
    ]
}

现在我采取了多种方法来使用句柄获取产品数据。我使用 all_products 液体对象来使用句柄获取数据：

使用js：

<script>
  {% assign firstComponentHandles = product.variants.first.metafields.custom.component_handles %}  

  const handlesData = {{ firstComponentHandles }};
  console.log({handlesData});

  const componentsData = [];

  handlesData.forEach((componentHandle, index) => {

    componentsData.push({ componentHandle: {{ all_products.componentHandle | json }} });

    componentsData.push({ componentHandle: {{ all_products[componentHandle] }} });

  });

  console.log("Components Data:", componentsData);
</script>

回应：

Uncaught ReferenceError: EmptyDrop is not defined

来源检查：

    handlesData.forEach((componentHandle, index) => {

    componentsData.push({ componentHandle: {"error":"json not allowed for this object"} });

    componentsData.push({ componentHandle: EmptyDrop });

  });

---

使用液体：

<script>

  const componentsDataNew = [];
  const componentsDataNew2 = [];

  {% for handle in firstComponentHandles %}

    componentsDataNew.push({handle: {{ all_products.handle | json }}})
    componentsDataNew2.push({handle: {{ all_products[handle] | json }} });

  {% endfor %}

  console.log("Components Data Array New: ", componentsDataNew);
  console.log("Components Data Array New 2: ", componentsDataNew2);

</script>

回应：

Components Data Array New:  []
Components Data Array New 2:  []

---

传递静态句柄：

<script>
  const dataUsingStatichandle = [];

  dataUsingStatichandle.push({ burger: {{ all_products.burger }} });
  dataUsingStatichandle.push({ burger2: {{ all_products["burger"] }} });
</script>

回应：

[
    { "burger": { "id": 8654927343434, "title": "Burger", ...moreData } },
    { "burger2": { "id": 8654905131564, "title": "Burger", ...moreData } }
]

所以，我无法使用 Js 或 Liquid 动态获取数据，但我可以静态地传递句柄来获取它们。

我做错了什么？我觉得这应该是一个语法相关的问题。

Answer 1

我想通了。主要问题在于数据格式，这是一个繁忙的过程。我花了很长时间才弄清楚出了什么问题。

我发现的第一个问题是液体循环无法处理我传递的数据。我将句柄数据作为数组获取：

[
   "burger",
   "carbonated-beverage"
]

然后我将它分配给一个 Liquid 变量，然后我删除

'['

，然后删除

']'

。删除括号后，我删除了

'"'

双引号。然后我使用 ','

分割

结果，然后手柄就可以在液体循环中使用了。

液体代码：

<script>

  {% assign firstComponentHandles = product.variants.first.metafields.custom.component_handles %}  
  {{ firstComponentHandles }}
  // Output: ["burger","carbonated-beverage"]

  {% assign temp1 = firstComponentHandles | remove: '[' %}  
  temp1: {{ temp1 }}
  // Output: temp1: "burger","carbonated-beverage"]

  {% assign temp2 = temp1 | remove: ']' %}  
  temp2: {{ temp2 }}
  // Output: temp2: "burger","carbonated-beverage"

  {% assign temp3 = temp2 | remove: '"' %}  
  temp3: {{ temp3 }}
  // Output: temp3: burger,carbonated-beverage

  {% assign formattedHandles = temp3 | split: ',' %}  
  {{ formattedHandles }}
  // Output: burgercarbonated-beverage

  const productsWithVariantsQty = {};

  {% for handle in formattedHandles %}

    {% assign productFromHandle = all_products[handle] %}

    // Initialize the key for each product handle and set it as an empty array
    productsWithVariantsQty["{{ handle }}"] = [];

    {% for variant in productFromHandle.variants %}

      productsWithVariantsQty["{{ handle }}"].push({
        variantInventoryQuantity: {{ variant.inventory_quantity }},
        variantInventoryPolicy: "{{ variant.inventory_policy }}"
      });

    {% endfor %}

  {% endfor %}

  console.log("Products with Variants:", productsWithVariantsQty);

</script>