Alternative search page fot blog articles

Solved
Highlighted
Shopify Partner
7 0 3

Hi, How can I use alternative search page for only blog articles 

I created a search page in template:  search.blog.liquid

How can i view it in front-end ex: https://site.myshopify.com/search/blog?q=test

 

Thank you! 

0 Likes
Highlighted
Shopify Partner
39 1 12

After you've created your alternative blog template, you can go to your blog's settings and then change the layout that the blog should use.

 

Screenshot 2019-08-07 at 5.20.48 pm.pngScreenshot 2019-08-07 at 5.21.45 pm.png

 

If you need to change the template on a per-article basis, you will need to use different sections instead of templates.

Create a second section called, say: blog-alternative.liquid

 

And then in your blog.liquid template, use this liquid code:

 

{% if article.handle == 'whatever-article' %}
  {% section 'blog-alternative' %}
{% else %}
  {% section 'blog-template' %}
{% endif %}
Liam Merlyn | Shopify Developer
0 Likes
Highlighted
Shopify Partner
7 0 3

Thanks for the help, but this is not what I wanted

I need to have 2 search result pages in the site, one for products (default) and other for blog articles

So I need to have search form in my blog pages, if someone search there, it need to go to the 2nd search result page and show the result only for blogs 

Thank you! 

 

0 Likes
Highlighted
Shopify Partner
16 3 4

This is an accepted solution.

I hope you know this url parameter to search only articles by appending `&type=article` on search result page to search only articles.

 

So, you can add this same logic to completely change the search page layout.

{{ page.url }} - should give you page url and do a check with if contains logic with `&type=article` and change the layout.

 

This isn't tested.

 

If your problem solved then Like & Accept this Solution.
For Development & customization jobs - suman@cartmade.com.
1 Like
Highlighted
Shopify Partner
7 0 3

Thanks mate, this worked

Small change, can't use page.url in search result page, it should be 'page.canonical_url' 

 

 

{% if canonical_url contains 'type=article' %}    
   {% include 'blog-search-result' %}  
{% else %}
   {% include 'product-search-result' %}  
{% endif %}

Search form for the blog

   <form method="get" action="/search">                       
                        <input placeholder="SEARCH BLOG" class="searchBox field" type="text"
                               name="q"{% if search.performed %} value="{{ search.terms | escape | downcase }}"{% endif %} />
                        <input type="hidden" name="type" value="article"/>
 <button class="searchSubmit" type="submit" value="Search" class="submit">Submit</button>
                    </form>

Thanks again, cheers! 

 

 

1 Like
Highlighted
Excursionist
13 0 0

Hi Nalinda -

Can you share the entire html for the alternative search page?  I am trying to do the exact thing for my blogs.  Thank you.

0 Likes
Highlighted
Shopify Partner
7 0 3

Hi @BTO2 ,

template > search.liuid

{% if canonical_url contains 'type=article' %}
     {% include 'blog-search-result' %}
{% else %}
    <h1>{{ collection.title }}</h1>
    <div class="rte">
        {% section 'search-template-bc-sf-filter' %}
    </div>
{% endif %}

snippets> blog-search-result.liquid

{% paginate search.results by 10 %}
    {% for item in search.results %}
    {% endfor %}
    <div class="tblog">
        <h1>
            {% if search.performed %}
                {% if search.results_count == 0 %}
                    {{ 'general.search.no_results_html' | t: terms: search.terms }}
                {% else %}
                    {{ 'general.search.results_for_html' | t: terms: search.terms }}
                {% endif %}
            {% else %}
                {{ 'general.search.title' | t }}
            {% endif %}
        </h1>
        <div class="top-wrap">
            <div class="scblog results">
            <div class="search">
                <form method="get" action="/search">
                    <button class="searchSubmit" type="submit" value="" class="submit">
                        <div class="search-ico">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
                                <path d="M16.83 16.23L13 12.43a6.73 6.73 0 1 0-.93.94l3.87 3.8a.62.62 0 0 0 .46.19.67.67 0 0 0 .47-.2.65.65 0 0 0-.04-.93zM2.3 8.16a5.44 5.44 0 1 1 5.43 5.44A5.44 5.44 0 0 1 2.3 8.16z"
                                      data-name="Layer 2"></path>
                            </svg>
                        </div>
                    </button>
                    <input id="blog-search" placeholder="SEARCH BLOG" class="searchBox field blogsearch" type="text"
                           name="q" data-no-bc-search/>
                    <input type="hidden" name="type" value="article"/>

                </form>
            </div>
            </div>
        </div>


        {% if search.performed %}
            <div class="blog-list">
                {% for item in search.results %}
                    <div class="item">                

                        <h3>{{ item.title | link_to: item.url }}</h3>
                            <div class="rte"><p>{{ item.content | strip_html | truncatewords: 50 }}</p></div>

                    </div>
                {% endfor %}
            </div>

            {% if paginate.pages > 1 %}
                {% include 'pagination' %}
            {% endif %}
        {% endif %}
    </div>
{% endpaginate %}
1 Like
Highlighted
Excursionist
13 0 0

Thank you.  I'll give it a go.

0 Likes