Showing Blog posts AND products in search

Highlighted
Shopify Partner
2 0 0

I could use help fine tuning a client site. Presently, search on only displays products. They wish to show blog posts in results as well.

Step 1: modify search query/results

Step 2: format those results to look agreeable with differently formatted product pix.

Can someone at least help with step 1? Then we can hobble out step 2 :)

I've been all through forum and google. Not seeing correct answer to solve this. Thank you!

0 Likes

Hello Fabfd,

Please, read this Shopify help article to modify your search: https://help.shopify.com/manual/sell-online/online-store/storefront-search

Hope it helps!)
Best regards,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
Highlighted
Shopify Partner
2 0 0
  {% if search.performed %}
    <ul class="product-list list--reset">
      {% for product in search.results %}{% include 'easylockdown_filter_search' with product %}
        {% if product.available %}
          {% include 'product-list-item' %}
        {% endif %}
      {% endfor %}
    </ul>
  
  
  
    <!--NEW-->
  {% for article in search.results %}
  
  {% if item.object_type == 'article' %} search-article{% endif %}
  
    {% comment %}
      'item' is an article
      All article object properties can be accessed.
    {% endcomment %}
           
                              
    {% if item.image %}
      <div class="result-image">
        <a href="{{ item.url }}" title="{{ item.title | escape }}">
          {{ item | image_url: 'small' | img_tag: item.title }}
        </a>
      </div>
    {% endif %}
  {% endfor %}
  <!--END NEW-->

 

Thank you. I see some assitance there. Now its about presenting the results. This does not seem to yeild  blog articles. Products show. But for blog articles, no content at all displaying. Help appreciated! I feel I'm close!

 

0 Likes
Highlighted

Please, check your search form. This is the search code, that works for Article, Product and Pages. Your form needs to look like this one:

<form action="/search" method="get" role="search">
    <div class="input-group--underline">
      <input class="input-group__field" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
      <div class="input-group__btn">
        <button type="submit" class="btn btn--clear btn--square">
          {% include 'icon-search' %}
          <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </div>
    </div>
  </form>

If you need a form only to return products, you can add this hidden field to the search form:

<input type="hidden" name="type" value="product" />

Only for Article:
 

<input type="hidden" name="type" value="article" />

For Article & Products:
 

<input type="hidden" name="type" value="product" />
<input type="hidden" name="type" value="article" />

This is a part of a Search result code from Narrative theme (for example). You need to implement this logic for this "for" loop and "if" statement:
 

<div class="card-list grid" data-desktop-columns="{{ desktopColumns }}" data-mobile-columns="{{ mobileColumns }}">
      <div class="card-list__column grid__item {% if search.results.size == 1 %} card-list__column--center{% endif %} {{ gridClasses }}">
        {% for item in search.results %}
          {% if item.object_type == 'article' %}
            {% include 'article-card', article: item %}
          {% elsif item.object_type == 'page' %}
            {% include 'page-card', page: item %}
          {% else %}
            {% include 'product-card', product: item %}
          {% endif %}
        {% endfor %}
      </div>
    </div>

 

Please, let me know if everything is clear and works for you.

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
Highlighted
New Member
2 0 0

Hey Arthur, where exactly in the liquid are we supposed to add this? Is it in the theme liquid? Search? And in either one, where exactly should I put these things? My goal is to only have products show up in search and I am no good at any of this code stuff :) Thank you!

0 Likes
Highlighted

yugentribe dear

Look for programmers or programmers who will help you change these. Just a small error your website may be corrupted or run unexpectedly

0 Likes
Highlighted
Shopify Partner
7 0 1

Hi,

 

Add the below hidden field to search form. It will search for all.

 

<form action="/search" method="get" role="search">
	<input type="hidden" name="type" value="product,article,page">
	<input class="input-group__field" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
	<button type="submit" class="btn btn--clear btn--square">
		{% include 'icon-search' %}
		<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
	</button>
</form>
0 Likes
Highlighted
Excursionist
20 2 4

Thank you so much for explaining the logic for the search form @Arthur_Korniyen .

For some reason in my scenario i couldn't use the "elsif" condition for article type so i end up with a double iteration like this:

 

{% if search.performed and grid_results == true %}
<div class="container container-v2 my-3 my-lg-5">
    <div class="row">
      {% for item in search.results %}
      	{% if item.object_type == 'article' %}
          {% include 'article-template' %}
      	{% endif %}
      {% endfor %}      
    </div>
</div>
{% endif %}

{% if search.performed and grid_results == true %}
<div class="container container-v2 my-3 my-lg-5">
    <div class="row">
      {% for product in search.results %}
      {% if product.object_type == 'product' %}
        <div class="col-md-3 col-sm-6 col-6">
          {% include 'product-item-v1' %}
        </div>
      {% endif %}
      {% endfor %}
    </div>
</div>
{% endif %}

However, i couldn`t have done this without your insight. Thank you

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution!
0 Likes
Highlighted
New Member
1 0 0

Hi there, 

 

So, im kind of al long-time-lurker on the help page of Shopify...

 

Im not a programmer, but due to want to build a company with as little money as possible, ill try to do and learn things myself, first. 

So if it is not too difficult I try some changing the code. I am from the Netherlands, so I hope my English is good enough... (laughs awkwardly)

That said: 

 

We had the problem that our blogpost would not show up via the search-light. Thanks to this page, I tried some changing the code in a testpreview, and I got it as far as looking into products AND articles (YEAH!)

 

Now, 2 little "issues" are still accuring, on which I hope I can get some help.

 

Issue 1:
If you use the search-light directly from the homepage, if says it doen't find any articles. But, if you use the same search word on the page that it redirects too (after entering the word on the homepage search-light), then it will find the article. This issue is both on the desktop and mobile version. 
I've made little video to show the problem, but I don't know if I am aloud to share that...? 

 

Issue 2:

I would like it if the search items would be split up. In my vision the blogs/articles need to be viewed first, and then with a (for example) separation line you would see the products underneath that. 

 

This is what my search.liquid looks like.

 

{% paginate search.results by 24 %}

<div class="section-title desktop-12 mobile-3">
  <h1>{{ 'general.search.title' | t }}</h1>
  <input type="hidden" name="type" value="product,article">
</div>

<div id="page" class="desktop-12 tablet-6 mobile-3">

  <div id="search-bar">
    <form action="/search" method="get">
      <input type="text" name="q" id="q" placeholder="{{ 'general.search.placeholder' | t }}"/>
      <input type="hidden" name="type" value="product,article">
      <input value="{{ 'general.search.submit' | t }}" name="submit" id="search_button" class="button" type="submit">
      {% if search.performed %}
        {% if search.results_count == 0 %}
          <p>{{ 'general.search.no_results_html' | t: terms: search.terms }}</p>
        {% else %}
          <p>{{ 'general.search.results_for_html' | t: terms: search.terms }}</p>
        {% endif %}
      {% endif %}

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


{% if search.performed %}

<div class="desktop-12 tablet-6 mobile-3" id="four-per-row">
  <div class="grid_wrapper product-loop">
    {% for item in search.results %}
      <div class="product-index desktop-3 tablet-2 mobile-half span-3" id="prod-{{ product.id }}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
        <div class="collection-image ci">

<!-- Article -->{% if item.object_type == 'article' %}
            <!--'item' is an article All article object properties can be accessed. -->
            {% if item.image %}
              <a href="{{ item.url }}" title="{{ item.title | escape }}">
                {%- include 'basic-responsive-image', type: item.image  -%}
                <noscript>
                  <img src="{{ item.image | img_url: '800x' }}" alt="{{ item.image.alt }}">
                </noscript>
              </a>
            {% else %}
              <div class="search-content prod-image">
                {{ item.content | strip_html | trancate: 200 }}
              </div>
            {% endif %}
<!-- PAGE -->{% elsif item.object_type == 'page' %}
            <!--'item' is a page. All page object properties can be accessed. -->

            {% if item.content contains "img" %}
              {% assign feat_image = item.content | split: 'src="' %}
              {% assign feat_image = feat_image[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:'  %}
              <a href="{{ item.url }}" title="{{ item.title | escape }}">
                <img src="{{ feat_image }}" alt="{{ item.title }}">
              </a>
            {% else %}
              <div class="search-content prod-image">
                {{ item.content | strip_html | trancate: 200 }}
              </div>
            {% endif %}

<!-- Product -->{% else %}
            <!-- 'item' is a product. All product object properties can be accessed.-->
            {% if item.available %}
              {% for col in item.collections %}
                {% if col.handle == 'new' %}
                  <div class="new icn">{{ 'products.general.new' | t }}</div>
                {% endif %}
              {% endfor %}
              {% if item.price < item.compare_at_price %}
                <div class="sale-item icn">{{ 'products.general.sale' | t }}</div>
              {% endif %}
            {% else %}
              <div class="so icn">{{ 'products.general.sold' | t }}</div>
            {% endif %}
            {% if item.featured_image %}
              <a href="{{ item.url }}" title="{{ item.title | escape }}">
                <div class="reveal">
                  {% include "basic-responsive-image", type: item.featured_image %}
                  <noscript>
                    <img src="{{ item.featured_image | img_url: '1024x' }}" alt="{{ item.featured_image.alt | escape }}">
                  </noscript>
                  {% if settings.image_flip and item.images.size > 1 %}
                    <div class="hidden">
                      {% include "basic-responsive-image", type: item.images[1] %}
                      <noscript>
                        <img src="{{ item.images[1] | img_url: '1024x' }}" alt="{{ item.images[1].alt | escape }}">
                      </noscript>
                    </div>
                  {% endif %}
                </div>
              </a>
            {%- else -%}
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'item-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            {%- endif -%}
          {% endif %}
        </div>

        <div class="product-details">
          <a href="{{ item.url }}">
            {% if item.object_type == 'product' %}
              {% if settings.vendor %}
                <h4>{{ item.vendor }}</h4>
              {% endif %}
            {% endif %}
            <h3>{{ item.title }}</h3>
          </a>
          {% if item.object_type == 'product' %}
          {% unless item.template_suffix == 'not-for-sale' %}
            <div class="price">
              {% if item.price < item.compare_at_price %}
                <div class="onsale">{{ item.price | money }}</div>
                <div class="was">{{ item.compare_at_price | money }}</div>
              {% else %}
                <div class="prod-price">
                  {% if item.price_varies %}
                    {{ 'products.general.from' | t }} {{ item.price_min | money }} - {{ item.price_max | money }}
                  {% else %}
                    {{ item.price | money }}
                  {% endif %}
                </div>
              {% endif %}
            </div>
            {% endunless %}
          {% endif %}
        </div>


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

{% include 'pagination' %}

{% endif %}

{% endpaginate %}

If anybody can help me out with this, it would be super awesome! 

Kind regards, greetings 

 

Ronja

 

0 Likes