Iterating within a metafield data?

Solved
mustaphadem
Tourist
7 0 0

Hello all,

I am using the metafields master app and what I am trying to achieve is using their multiple image metafield option, I'd like to display a set of icons for each product. I am trying to incorporate this small piece of code on product-form.liquid for Vantage theme.  When I do this, I see all the urls of icons that I upload to the metafield is being returned as a whole -hopefully a string?- separated with a comma, that's why I tried that split thing, but apparently it fails.

Would anyone be able to guide me through the correct way of doing this please?

 

{% for image in product.images %} -->> this part is most likely wrong, as I was just trying to take something as a starting point;
  <img src="{{ product.metafields['icons']['Icons'] | split: ", " }}">
{% endfor %}
 
 
0 Likes

Hello,

can you please copy here the string you defined in the metafield.

You can find some examples how to iterate over a metafield also here: The metafield object 

Here one example that show how to split a comma delimited string

{%- assign r = product.metafields.related.items | split:"," -%}
<div class="related-products">
    {%- for p in r -%}
        {% assign relatedProduct = all_products[p] %}
        {%- include 'some-snippet' product: relatedProduct -%}
    {%- endfor -%}
</div>

 

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
0 Likes
mustaphadem
Tourist
7 0 0

Hey drakedev,

 

Thank you for your reply. One of the problems is that i am not sure what the metafields app returns as a result of their multiple image type. Below is the screenshot from the app.

 

Capture.PNG

 

When I use the following code;

<div class="product-icons">
      
		<img src={{ product.metafields['icons']['Icons'] }} /img>
      
           
       </div>

 

on the dom, when i inspect i see the following;

 

<div class="product-icons">
      
		<img src="https://metafields-manager-by-hulkapps.s3-accelerate.amazonaws.com/uploads/sabun-co.myshopify.com/1602456611-Vegan.png,https://metafields-manager-by-hulkapps.s3-accelerate.amazonaws.com/uploads/sabun-co.myshopify.com/1602461646-Handmade_Soap_Bar.png" img="">
      
           
       </div>

 

so my expectation was to somehow get that whole combined URLs, separate them by the coma so i can get individual urls, and then using an iteration display each.

 

Sorry if this is too much, i'm not a coder as you can see  

 

Your help is much appreciated!

0 Likes

This is an accepted solution.

You can try the following code:

{%- assign icons = product.metafields['icons']['Icons'] | split:"," -%}
<div class="product-icons">
    {% for i in icons %}
        <img src="{{ i }}">
    {% endfor %}
</div>

 

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.
mustaphadem
Tourist
7 0 0

Works like a charm, now time to play around with some CSS  

 

Thank you very much!

0 Likes

You're welcome, happy that it worked.

• If the problem is solved remember to click ✅ to Accept Solution
• Press Like, if the answer was helpful
• Shopify/Shopify Plus custom development, optimization and consulting. You can hire me here.