Solved

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

mischacolley
Shopify Partner
3 0 0

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 %}
Accepted Solution (1)

Liam
Shopify Staff
2731 301 778

This is an 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! 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 4 (4)

Liam
Shopify Staff
2731 301 778

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 | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

Liam
Shopify Staff
2731 301 778

This is an 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! 

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

mischacolley
Shopify Partner
3 0 0

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 %} 
geongeorge
Shopify Partner
8 0 0

Hi @Liam ,

Unfortunately `{{ metaobject.title | handleize}}` does not work everytime.

For the string "San Francisco Premium Outlets":
The URL handle is `/pages/stores/SFPO`
While handleize will return `san-francisco-premium-outlets`

Although system.url is enough for my use case right now, would be great if Shopify can expose the handle along with 

shop.metaobjects.type.values

Thanks