Liquid code to loop through a Metaobject list metafield inside a Product List metafield loop

[jpoulos]

I have a Metaobject for Ingredients with a name, icon, etc. I have a Products metafield  Product List for related products. Within the Product List loop, I would like to also iterate through the Ingredient Metobject List  and get the name and icon. All my attempts to do this are returning null.

Outside of this Product List metafiled loop, I can fetch the info fine, via liquid or using blocks. But I need to fetch it from the realted products metafield, not the main product.

How can I modify second loop?

First loop:

{%- for product in product.metafields.custom.pair_with.value limit: 4 -%}

<div class="swiper-slide card-product-slider__slide">

{%- render 'card-pair-with' with product_ref: product, section_id: section.id, card_index: forloop.index, card_product_layout: settings.card_product_layout -%}

</div>

{%- endfor -%}

Nested Loop: 

{% assign featured_ingredients = product.metafields.custom.featured_ingredients %}

<div class="hover-info d-flex flex-wrap">

{% if featured_ingredients %}

{% for ingredient_id in featured_ingredients %}

{% assign ingredient = ingredient_id | metaobject %}

{% if ingredient %}

<div class="col-12 col-sm-6 d-flex flex-column justify-content-end align-items-center">

<div class="icon">

<img

class="grid-product__image lazyloaded"

src="{{ ingredient.icon | image_url }}"

alt="{{ ingredient.ingredient }}"

>

</div>

<div class="stat">{{ ingredient.ingredient }}</div>

</div>

{% endif %}

{% endfor %}

{% else %}

<p>No ingredients found.</p>

{% endif %}

</div>

[rajweb]

Hey @jpoulos 

To fetch ingredients for each product within the product list metafield loop, you’ll need to adjust your Liquid code to retrieve feature ingredients featured-ingredients  for each product within your product.metafields.custom.pair with loop rather than for the main product directly. Here’s how you can do it by moving the  featured_ingredients assignment inside the loop, so it references each product individually: 

Adjusted Code with Nested Loop:

{%- for product in product.metafields.custom.pair_with.value limit: 4 -%}
  <div class="swiper-slide card-product-slider__slide">
    {%- render 'card-pair-with' with product_ref: product, section_id: section.id, card_index: forloop.index, card_product_layout: settings.card_product_layout -%}

    {% assign featured_ingredients = product.metafields.custom.featured_ingredients %}

    <div class="hover-info d-flex flex-wrap">
      {% if featured_ingredients %}
        {% for ingredient_id in featured_ingredients %}
          {% assign ingredient = ingredient_id | metaobject %}
          {% if ingredient %}
            <div class="col-12 col-sm-6 d-flex flex-column justify-content-end align-items-center">
              <div class="icon">
                <img
                  class="grid-product__image lazyloaded"
                  src="{{ ingredient.icon | image_url }}"
                  alt="{{ ingredient.ingredient }}"
                >
              </div>
              <div class="stat">{{ ingredient.ingredient }}</div>
            </div>
          {% endif %}
        {% endfor %}
      {% else %}
        <p>No ingredients found.</p>
      {% endif %}
    </div>
  </div>
{%- endfor -%}

This approach ensures that you’re accessing featured_ingredients for each product dynamically rather than statically from the main product.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[jpoulos]

Thanks Rajweb, will also try this and let you know. I did find a different fix that worked as well.

[rajweb]

If I was able to help you, please don't forget to Like and mark it as the Solution!

thanks

[jpoulos]

For my situation your answer is not the solution. 

This works:

{% assign featured_ingredients = product_ref.metafields.custom.featured_ingredients.value %}

This does not:

{% assign featured_ingredients = product.metafields.custom.featured_ingredients.value %}

[jpoulos · Accepted solution]

product_ref and .value fixed it for me. for anyone who is similarly frustrated.

{% assign featured_ingredients = product_ref.metafields.custom.featured_ingredients.value %}

<div class="hover-info d-flex flex-wrap">

{% if featured_ingredients %}

{% for ingredient_id in featured_ingredients %}

{% assign ingredient = ingredient_id | metaobject %}

{% if ingredient %}

<div class="col-12 col-sm-6 d-flex flex-column justify-content-end align-items-center">

<div class="icon">

<img

class="grid-product__image lazyloaded"

src="{{ ingredient.icon | image_url }}"

alt="{{ ingredient.ingredient }}"

>

</div>

<div class="stat">{{ ingredient.ingredient }}</div>

</div>

{% endif %}

{% endfor %}

{% else %}

<p>No ingredients found.</p>

{% endif %}

</div>