Our Partner & Developer boards on the community are moving to a brand new home: the .dev community forums! While you can still access past discussions here, for all your future app and storefront building questions, head over to the new forums.

Re: Bug when metafield is type Page Reference and Accept list of values

Bug when metafield is type Page Reference and Accept list of values

samgoodcity
Shopify Partner
10 0 6

I'm using the new metafields interface. I've created a field called "child_pages" on Pages with type page_reference and accepting a list of values. I'm trying to output the contents of the field in a section.

{{ page.metafields.my_fields.child_pages }} is returning a list represented as a string as as I expect:
["gid://shopify/OnlineStorePage/89456738486",...]

{{ page.metafields.my_fields.child_pages.type }} is returning list.page_reference again as I expect.

But {{ page.metafields.my_fields.child_pages.value }} is returning nothing.

Also when I try to loop through the list items using both:

{% for child_page in page.metafields.my_fields.child_pages %}
  {{ child_page.title }}
{% endfor %}

and:

{% for child_page in page.metafields.my_fields.child_pages.value %}
  {{ child_page.title }}
{% endfor %}

Nothing is output, obviously in the second case as it's empty.

This does not happen with metafields with the type product_reference.

{{ page.metafields.my_fields.related_products.value }} returns ProductListDrop and I'm able to loop through the values using: {% for related_product in page.metafields.my_fields.related_products.value %}

 

Pretty sure this is a bug on the Shopify side. Am I missing something?

Cheers,

Sam

Replies 8 (8)

NZpSoL0vwYxgpnZ
Shopify Partner
3 0 3

I also just ran into this issue with the "list.page_reference" metafield type. Good to know it's not just me although I haven't found a solution as of yet.

NZpSoL0vwYxgpnZ
Shopify Partner
3 0 3

I've come up with a convoluted method to iterate over the items by spliting the returned GID JSON string into an array and iterating over the global pages object:

 

  {% assign gids = product.metafields.custom_fields.pages | split: ',' %}
  {% for gid in gids %}
    {% assign id = gid
      | replace: 'gid://shopify/OnlineStorePage/', ''
      | replace: '[', ''
      | replace: '"', ''
      | replace: ']', ''
      | plus: 0
    %}
    {% for page in pages %}
      {% if page.id == id %}
        {{ page.title }}<br>
      {% endif %}
    {% endfor %}
  {% endfor %}

 

It has been a while since I have worked with liquid and Shopify theming so it could potentially be optimised, and I can't guarantee that it will continue working in the future but it currently solves the issue for me.

samgoodcity
Shopify Partner
10 0 6

Thanks for the reply, seems so weird that you can't loop over these related pages in a sensible way.

 

I actually have another thread here where someone else came up with the same solution you did:

https://community.shopify.com/c/online-store-2-0/bug-when-metafield-is-type-page-reference-and-accep...

 

We discuss that this isn't optimised and, annoyingly, loses the ordering of the ids set in the meta fields.

 

Hopefully Shopify can fix this.

 

Cheers!

NZpSoL0vwYxgpnZ
Shopify Partner
3 0 3

Nice! It's so similar! Although because mine is iterating over the split, then iterating over the pages it should keep the metafield list order at the cost of exponentially more loops. It is pretty inefficient but in the grand scheme of optimisation if Shopify can't handle a few hundred loops every now and again, assuming they aggressively cache their templates, they likely have much bigger problems!

samgoodcity
Shopify Partner
10 0 6

For anyone interested, I didn't end up using the solution above and for the time being, until you can loop through a page list on a metafield, I ended up using a linklist.

 

Rather than collecting the list of pages inside a metafield and looping over all the pages until you find the right one. I opted for looping over the pages inside a linklist, which has the benefits of:

- Being efficient
- Having native ordering

This largely works because you can access the link.object property, which gives you access to all of the fields of the object you are linking to (page/product/whatever).

So yeah, that's my solution until this bug is fixed. Hopefully it will be soon.

BKKNomad
Visitor
2 0 2

I think one of the best way to solve temporary this issue would be to use Single line text (List of values) metafield instead of page reference metafield. Then, simply fill the page handle.

 

Screen Shot 2565-06-22 at 17.16.05.png

 

You can list the pages with this code:

{% for item in product.metafields.my_fields.key.value %}

    {% assign page = pages[item] %}

    <div>{{page.title}}</div>

    <div>{{page.content}}</div>

{% endfor %}

 

I hope this will help.

samgoodcity
Shopify Partner
10 0 6

Yeah that's a pretty nice workaround. I just wish they'd fix the bug! 🙂

ThomasBorowski
Shopify Partner
803 71 242

Note: I posted this same answer on another thread that concerns the same issue.

 

This does indeed seem like a bug. It appears that while a metafield of type list.product_reference returns a ProductListDrop for its value property, the value of a metafield of type list.page_reference is empty.

 

I ended up using this workaround:

 

  • Split up the "gid://shopify..." string into an array that holds all the page IDs
  • Use the global pages object and the where filter to get the page object for each ID

Here's the code to create a list of pages assigned to a customer via a metafield of type list.page_reference with the namespace custom and the key pages:

 

{% assign the_pages = customer.metafields.custom.pages | replace: "[", "" | replace: "]", "" | remove: '"' | remove: 'gid://shopify/OnlineStorePage/' | split: "," %}
<ul>
  {% for the_page in the_pages %}
    {% assign page_id = the_page | times: 1 %}
    {% assign page_obj = pages | where: 'id', page_id | first %}
    <li><a href="{{page_obj.url}}">{{ page_obj.title }}</a></li>
  {% endfor %}
</ul>

 

 

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up