Issue separating item types on search page

Nick_Borszich
Excursionist
37 0 10

I am trying to vary what is shown on the search results page based on the type of item.

Here is my liquid code:

<ul>
  {% for item in search.results %} 
  {% if item.object_type == 'article' %}
    <a href= "{{ article.url }}">{{ article.title }}</a>
  {% else%}
    {% include 'product-grid-item' %}
  {% endif %}
  {% endfor %}
</ul>
    

The output for this is that every result, whether it is a product or not, is showing up as <a href= ""></a> and it doesn't allow me to access any of the article objects.

If I try to add an additional for loop {% for article in search.results %}, I am able to access the the objects but the for loop gets repeated (as expected).

I also tried:

{% for article in search.results %}
{code here}
{% endfor %}

{% for product in search.results %}
{code here}
{% endfor %}

which did not work.

What is the best way to deal with this?

Replies 4 (4)
Jason
Shopify Expert
10440 169 2081

Hey Nick,

That last code block you posted isn't going to work. Search results contain items so you can't loop over them in this way. The first method is the right way.

There's some info on that here:
https://help.shopify.com/themes/liquid/objects/search#search-results

Let's first look at this part:

{% if item.object_type == 'article' %}
    <a href= "{{ article.url }}">{{ article.title }}</a>
{% else %}
...

You've made the assumption that there is an article object available, but there isn't. Your dealing with search results items.

So:

{% if item.object_type == 'article' %}
    <a href= "{{ item.url }}">{{ item.title }}</a>
{% else %}
...

You could also do this:

{% if item.object_type == 'article' %}
    {% assign article = item %}
    <a href= "{{ article.url }}">{{ article.title }}</a>
{% else %}
...

^ Not a method I'd often recommend as you can get into some situations where you DO have an article object available and you'll hit scoping issues. Up to you however.

Moving onto this:

...
{% else%}
    {% include 'product-grid-item' %}
{% endif %}

I see a side issue in that your assuming that only articles or products will be returned. Your code will fall over if (for example) a page is returned. Ignoring that I would guess that the code in the snippet is expecting a product object to be available, much like how we needed one for the other part.

You could try this, but without seeing the code in your theme I can't be 100% sure it will work.

...
{% else%}
    {% include 'product-grid-item', product: item %}
{% endif %}

^ this is passing a variable (in this case something called product) to that snippet with the contents of the item.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Nick_Borszich
Excursionist
37 0 10

Hey Jason, that worked perfectly thanks!

As for the side issue, I am currently specifying the type within the search to ensure that there is only one type per search results.

I did not know about this:

{% else%}
    {% include 'product-grid-item', product: item %}
{% endif %}

but it worked, so I will need to read up on that.

Thanks again!

sam787
New Member
3 0 0

Why stress your self trying to separate item types on search page, i know you have come to this page to check shopify search object and how you can get it fixed , You should just save your time and mental energy by USING LUEVIN.COM TO SOLVE ALL shopify search problems.

Save your time and mental energy , luevin will get it fixed for you under few minutes, then come back and thank me later

sam
sam787
New Member
3 0 0

Why stress your self trying to learn how to solve shopify search problem? You should just save your time and mental energy by USING LUEVIN.COM TO SOLVE ALL shopify search problems.

Save your time and mental energy , luevin will get all shopify issues you have fixed for you under few minutes, then come back and thank me later

sam