Product Metafields displaying as String instead of Objects on Collection Pages

[Saba13]

Good day, I hope everyone is doing well!

I wish to display the 'related products' on the collection page as swatches. These related products are stored as a Product List Metafield. 

When I call the metafield on the collection page in for-loop for products, it is fetching only the GIDs of the products instead of the actual product object. 

I even tried to loop through the GIDs and fetch the matching products but the GIDs are not looping (maybe because they're not an array?). 

I am using the exact same metafield on the product page to show the 'related products' and that is working absolutely correctly but it's not fetching the current data type on the collection page. Why is that?

The only difference between the collection page and product page is that on the product page the metafield is assigned to a block.setting.

Is there a way to work around this? How do I get the Product Object in the collection page?

Here is the code:

  CPL: {{ product.metafields.custom.linked_product_list }}
  {% for p in product.metafields.custom.linked_product_list %}
    <!-- 1 -->
    P: {{ p }}
    {% assign matching_count = matching_count | plus: 1 %}
    {% capture output %}
        {{ output }}
        <div class="linked-variant-card">
          <a href="{{ p.url }}">
            {% if p.featured_image %}
              <img alt="{{ p.title }}" style="background: #f5f5f5; box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.3);" src="{{ p.featured_image | img_url: '300x300' }}" alt="{{ p.title }}" width="40px" height="56px">
            {% endif %}
            <!-- <div class="linked-variant-card__title"><p>{{ p.title }}</p></div> -->
          </a>
        </div>
      {% endcapture %}
  {% endfor %}

  {% if matching_count > 0 %}
    <p>Colors:</p>
    <div class="linked-variants-wrapper {% if matching_count > 8 %}has-scroll{% endif %}">
      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--left" aria-label="Scroll Left">&lt;</button>
      {% endif %}

      <div class="linked-variants__grid{% if matching_count > 8 %} linked-variants__grid--scroll{% endif %}">
        {{ output }}
      </div>

      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--right" aria-label="Scroll Right">&gt;</button>
      {% endif %}
    </div>
  {% endif %}

[Mustafa_Ali]

hey @Saba13  share the URL of your webiste plz

[Saba13]

https://ysmv77ch839eyq4s-2085617745.shopifypreview.com

[PaulMartin]

Hey Saba,

Try doing {{ p.product.title }} instead of {{ p.product }}

Code sample

  {% for p in product.metafields.custom.linked_product_list %}
    <!-- 1 -->
    P: {{ p.product }}
    {% assign matching_count = matching_count | plus: 1 %}
    {% capture output %}
        {{ output }}
        <div class="linked-variant-card">
          <a href="{{ p.product.url }}">
            {% if p.product.featured_image %}

 
Accessing values on a list requires an additional step.

Hope this helped!

[Saba13]

Nothing changed:

CPL: {{ product.metafields.custom.linked_product_list }}
  {% for p in product.metafields.custom.linked_product_list %}
    <!-- 1 -->
    P: {{ p.product.title }}
    {% assign matching_count = matching_count | plus: 1 %}
    {% capture output %}
        {{ output }}
        <div class="linked-variant-card">
          <a href="{{ p.url }}">
            {% if p.featured_image %}
              <img alt="{{ p.title }}" style="background: #f5f5f5; box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.3);" src="{{ p.featured_image | img_url: '300x300' }}" alt="{{ p.title }}" width="40px" height="56px">
            {% endif %}
            <!-- <div class="linked-variant-card__title"><p>{{ p.title }}</p></div> -->
          </a>
        </div>
      {% endcapture %}
  {% endfor %}

  {% if matching_count > 0 %}
    <p>Colors:</p>
    <div class="linked-variants-wrapper {% if matching_count > 8 %}has-scroll{% endif %}">
      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--left" aria-label="Scroll Left">&lt;</button>
      {% endif %}

      <div class="linked-variants__grid{% if matching_count > 8 %} linked-variants__grid--scroll{% endif %}">
        {{ output }}
      </div>

      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--right" aria-label="Scroll Right">&gt;</button>
      {% endif %}
    </div>
  {% endif %}

[PaulMartin]

Hey Saba,

I believe what you are seeing is this

CPL: {{ product.metafields.custom.linked_product_list }}

Which renders the entire list onto the page. Try to remove that, and try again.

Also, use "p.product" suffix on all instances of "p"

[Saba13]

I removed the CPL and added the suffix as you suggested:

  {% for p in product.metafields.custom.linked_product_list %}
    <!-- 1 -->
    P: {{ p.product.title }}
    {% assign matching_count = matching_count | plus: 1 %}
    {% capture output %}
        {{ output }}
        <div class="linked-variant-card">
          <a href="{{ p.product.url }}">
            {% if p.product.featured_image %}
              <img alt="{{ p.product.title }}" style="background: #f5f5f5; box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.3);" src="{{ p.product.featured_image | img_url: '300x300' }}" alt="{{ p.product.title }}" width="40px" height="56px">
            {% endif %}
            <!-- <div class="linked-variant-card__title"><p>{{ p.product.title }}</p></div> -->
          </a>
        </div>
      {% endcapture %}
  {% endfor %}

  {% if matching_count > 0 %}
    <p>Colors:</p>
    <div class="linked-variants-wrapper {% if matching_count > 8 %}has-scroll{% endif %}">
      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--left" aria-label="Scroll Left">&lt;</button>
      {% endif %}

      <div class="linked-variants__grid{% if matching_count > 8 %} linked-variants__grid--scroll{% endif %}">
        {{ output }}
      </div>

      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--right" aria-label="Scroll Right">&gt;</button>
      {% endif %}
    </div>
  {% endif %}

But now it doesn't show anything:

The inspect shows the outer div only:

[PaulMartin · Accepted solution]

Hi Saba,

Try changing this into

{% for p in product.metafields.custom.linked_product_list %}

this

{% for p in product.metafields.custom.linked_product_list.value %}

Notice the .value at the end

This should render it correctly, or at the very least, trigger the loop correctly.

[Saba13]

Thank you so much!

Adding the .value is now rendering the items:

I did however also remove the .product suffix as it wasn't working with it

{% if template.name == 'collection' %}
  {% for p in product.metafields.custom.linked_product_list.value %}
    <!-- 1 -->
    P: {{ p.title }}
    {% assign matching_count = matching_count | plus: 1 %}
    {% capture output %}
        {{ output }}
        <div class="linked-variant-card">
          <a href="{{ p.url }}">
            {% if p.featured_image %}
              <img alt="{{ p.title }}" style="background: #f5f5f5; box-shadow: 1px 1px 8px 1px rgba(0, 0, 0, 0.3);" src="{{ p.featured_image | img_url: '300x300' }}" alt="{{ p.title }}" width="40px" height="56px">
            {% endif %}
            <!-- <div class="linked-variant-card__title"><p>{{ p.title }}</p></div> -->
          </a>
        </div>
      {% endcapture %}
  {% endfor %}

  {% if matching_count > 0 %}
    <p>Colors:</p>
    <div class="linked-variants-wrapper {% if matching_count > 8 %}has-scroll{% endif %}">
      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--left" aria-label="Scroll Left">&lt;</button>
      {% endif %}

      <div class="linked-variants__grid{% if matching_count > 8 %} linked-variants__grid--scroll{% endif %}">
        {{ output }}
      </div>

      {% if matching_count > 8 %}
        <button class="scroll-arrow scroll-arrow--right" aria-label="Scroll Right">&gt;</button>
      {% endif %}
    </div>
  {% endif %}

I really appreciate all your help and time! Thank you once again! 🙂

[PaulMartin]

Awesome! You're welcome Saba! 🙌