Liquid, JavaScript, themes, sales channels
I attempting to loop through product variants, I have a business requirement that the variant images not be used, as they are used for a slider on the product page and may differ. So I created a custom metafield with the type of "File" that allows multiple images.
So I have the index of the product variant loop through
forloop.index0
I want to select the images available in the custom metafield using the index of the product variants loop.
Example:
<img src="{{ product.metafields.custom.product_selection_images.value[forloop.index0] | img_url: '180x180' }}"/>
In the custom metafield there is a corresponding image for each product variant.
If I select the value from the array directly like above, it fails and is null. If I loop through product.metafields.custom.product_selection_images.value the urls output with no issues.
What am I missing? I just want to use my own index value while outputting these metafield images.
Thanks!
More info...
When doing:
{% assign product_selection_images = product.metafields.custom.product_selection_images.value %}
size: {{ product_selection_images | size }}<br>
JSON: {{ product_selection_images | json }}
outputs:
size: 0
JSON: ["\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file01.jpg?v=1672186743","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file02.jpg?v=1672186742","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file03?v=1672186743","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file04.jpg?v=1672186743","\/\/cdn.shopify.com\/s\/files\/123\/1234\/1234\/files\/some_file05.jpg?v=1672186743"]
(actual cdn locations masked)
Is the metafield type "File" broken?? How is it size 0 and also have values?
OK I got something working, but it is terribly inefficient.
I had to pass in the parent loop's index and compare it against a sub loop's index to output the correct image. Ridiculous workaround, but it works.
{% for option in product.options_with_values %}
{% assign variant_loop_index = forloop.index0 %}
{% for image in product.metafields.custom.product_selection_images.value %}
{% if forloop.index0 == variant_loop_index %}
<img src="{{ image | img_url: '180x180' }}" alt="">
{% endif %}
{% endfor %}
{% endfor %}
Had exactly the same problem. I also had to use a similar workaround but it's terribly inefficient and Shopify needs to fix this asap.
Me too
User | RANK |
---|---|
37 | |
29 | |
13 | |
12 | |
9 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023