My JS is rusty, but here’s my understanding of what the original JS code is doing, if it’s helpful:
We start with an object (?) stored in the variable shopifyProducts. It looks like shopifyProducts is actually an object in your collection, not an array. But generally you can’t use map on an object.
We set a new variable (const) images that will be our newly returned array. Then the code uses the .map() function to iterate over each item in the shopifyProducts array. Inside the map function, it accesses a property called images on each collection (e.g. each “item” we iterate over) within shopifyProducts. (The ? checks if it is not null/undefined.) This creates an array images and inside it there is an array containing the images array from each collection.
Can you share what is inside the images array? Is it an array of arrays?
To simplify a lot, at this stage we’ve made a new array images that only contains the contents of shopifyProducts.images[]. The .flat() function is applied to the images array to flatten it into a single array, removing any nested arrays. This results in an array of image data (arrays, objects, strings, whatever is inside shopifyProducts.images.
Then we return that, so now we have that array of image data, and we manipulate what is returned — with .find() we search through images and check if the id property of each image object matches a specific value stored in context.item.data['image_id']. So here we are getting only the image URL that maps to the shopifyProduct.id number, and returning the src or URL.
Now, in your no-code version, you’re saying “map over the product variants array”, instead of mapping over the whole shopifyProducts object. (Again, map is usually on an array so not sure what’s going on in the original.) So because map returns an array, your no-code version is returning you an array of the variants, but you haven’t put any items in your new array.
For ex., here is how I am using map:
My Get Profiles.data collection is an array of objects where each object is a bunch of data: name, id, tags, highlight, etc.
But in this case I only want to have an array of the id and name, so I map over the Get Profiles.data array and return a new array with just id and name in it.
Or here’s a different example with map in code, where I’m doing basically the same thing, mapping over the jobs collection and returning a new array with id, create a jobtitle property whose value is company name + job title, the filled bool, and status:
So you could try: map(Get Shopify Single Product.data.shopifyProduct.variants,id) to get back an array of just the variant IDs.
But it seems like what you want to return is a single value (the image URL), which is the… image URL from the images array that matches the shopifyProduct.id. Where do the variants come into it? Do you need to return a different image for each variant id as well?
In the JS one what do you get returned if you comment out line 4 (the return) and instead return images only? Should be an array; what’s in it?
