How do I access the url handle on metaobject when using the Web Pages feature

[mischacolley]

I'm using the Web Pages feature to create individual FAQ articles which is working great. I'd like to be able to create an index page to display all these on so I've setup a template to do that. I'm able to get a list of articles with the following code but can't work out how to get a link to the actual pages. I assumed it would just be `url` or `handle` but I can't work out how to access. What am I missing?

{% for faq in shop.metaobjects.faq.values %}
<li><a href="">{{ faq.title }}</a></li>
{% endfor %}

[Liam]

Hi Mischacolley,

Can you try out this:

{% for faq in shop.metaobjects.faq.values %}
  <li>
    <a href="https://store-name.com/pages/faq/{{ faq.title | handleize }}">{{ faq.title }}</a>
  </li>
{% endfor %}

The approach worked for me, see video here. What's helpful here is the Liquid handleize filter that outputs a string that you can use to create a link. 

Hope this helps!!

[Liam · Accepted solution]

Hi again,

From looking into this a bit more with our internal team, it seems there's an even better way to achieve your index list with this:

{% for metaobject in shop.metaobjects.faq.values %}
  <li>
    <a href="https://store-name.myshopify.com{{ metaobject.system.url }}">{{ metaobject.name }}</a>
  </li>
{% endfor %}

The metaobject.system.url property outputs the relative URL of the metaobject, which is more reliable to use. 

Best of luck! 

[mischacolley]

Thanks @Liam ... exactly what I was after. Can we get this added to some documentation somewhere 🙏🏻 

Similar to your first handleize solution I was able to hack it to work with the following but very prone to errors:  

{% for faq in shop.metaobjects.faq.values %}
<li><a href="/pages/faq/{{ faq.title | downcase | replace: ' ', '-' }}">{{ faq.title }}</a></li>
{% endfor %}