Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
I've a list of product handles stored in the main products metafield that I'm fetching in the following way:
{% assign firstComponentHandles = product.variants.first.metafields.custom.component_handles %}
const handlesData = {{ firstComponentHandles }}; console.log({handlesData});
Console log response:
{ "handlesData": [ "burger", "carbonated-beverage" ] }
Now I've taken multiple approach to fetch the products data from the handles:
Using js:
{% assign firstComponentHandles = product.variants.first.metafields.custom.component_handles %} const handlesData = {{ firstComponentHandles }}; const componentsDataNew2 = []; handlesData.forEach((componentHandle, index) => { componentsDataNew2.push({ "{{componentHandle}}": {{ all_products.componentHandle }} }); componentsDataNew2.push({ "{{componentHandle}}": {{ all_products[componentHandle] }} }); });
Response:
Uncaught ReferenceError: EmptyDrop is not defined
Inspection on sources:
componentsDataNew2.push({ "": EmptyDrop }); componentsDataNew2.push({ "": EmptyDrop });
Using Liquid:
const componentsDataNew = []; const componentsDataNew3 = []; {% for handle in firstComponentHandles %} componentsDataNew.push({handle: {{ all_products.handle }}}) componentsDataNew3.push({handle: {{ all_products[handle] | json }} }); {% endfor %} console.log("Components Data Array New: ", componentsDataNew); console.log("Components Data Array New 3: ", componentsDataNew3);
Response:
Components Data Array: [] Components Data Array 3: []
So, I couldn't fetch the data using either Js or Liquid. What am I doing wrong?
Thanks!
It was a hectic process to solve the problem.
I've posted the answer here: https://stackoverflow.com/a/79068611/15338342