Display All Products on Empty Search Result

Solved
Highlighted
New Member
2 1 0

Hi, I am trying to make my search result page display all products, in a grid, on my search result page when a search doesn't return any results. I have the products displaying, but not in a grid. I'm also having trouble pulling in the price that is formatted properly.

 

This is what I have so far in my search-template.liquid file. So far I have only attempted to do it when nothing is entered in the search bar. Any help would be appreciated. I am using the Supply template.

{% assign grid_results = true %}

<div class="grid">
  <div class="grid-item">

    <hr class="hr--clear hr--small">

    {% if search.performed %}

      {% paginate search.results by 20 %}

        {% if search.results_count == 0 %}

          <h1 class="h2 text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
          {% include 'search-bar' %}

        {% else %}

          <h1 class="h2 text-center">{{ 'general.search.results_for_html' | t: terms: search.terms }}</h1>
          {% include 'search-bar' %}
          <hr class="hr--clear">

          {% if grid_results == false %}

            {% for item in search.results %}
              {% include 'search-result' %}
            {% endfor %}

          {% else %}

            <div class="grid-uniform">
              {% for item in search.results %}
                {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
                {% include 'search-result-grid' %}
              {% endfor %}
            </div>

          {% endif %}

        {% endif %}

        {% if paginate.pages > 1 %}
          <div class="text-center">
            {% include 'pagination-custom' %}
          </div>
        {% endif %}

      {% endpaginate %}

    {% else %}

      {% comment %}
        If search.performed is false, someone either accessed the page without the q parameter, or it was blank.
      {% endcomment %}
    
    <h1 class="h2 text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
          {% include 'search-bar' %}
    <div class="grid-uniform">
    	  {% for product in collections.all.products %}
      		{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
      		<img src="{{ product.featured_image | product_img_url: 'medium' }}" alt="{{ product.title | escape  }}" />
      		<a class="shop-now" href="{{ product.url }}">{{ product.title }} {% assign price = product.price | money %}</a>   
      	  {% endfor %}
    </div>
    
    
    {% endif %}
  
 

  </div>
</div>



{% schema %}
{
  "name": {
    "de": "Suchen",
    "en": "Search",
    "es": "Buscar",
    "fr": "Rechercher",
    "it": "Cerca",
    "ja": "検索",
    "nl": "Zoeken",
    "pt-BR": "Pesquisar",
    "zh-CN": "搜索",
    "zh-TW": "搜尋"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "product_show_compare_at_price",
      "label": {
        "de": "Vergleich zum Preis anzeigen",
        "en": "Show compare at price",
        "es": "Mostrar precio de comparación",
        "fr": "Afficher le prix normal",
        "it": "Mostra Confronta al prezzo",
        "ja": "価格比較を表示する",
        "nl": "Vergelijken met prijs weergeven",
        "pt-BR": "Exibir comparação de preço",
        "zh-CN": "显示原价",
        "zh-TW": "顯示售價"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "product_show_saved_amount",
      "label": {
        "de": "Gesparten Betrag anzeigen",
        "en": "Show saved amount",
        "es": "Mostrar monto ahorrado",
        "fr": "Afficher le montant économisé",
        "it": "Mostra importo risparmiato",
        "ja": "保存された金額を表示",
        "nl": "Opgeslagen hoeveelheid weergeven",
        "pt-BR": "Exibir valor salvo",
        "zh-CN": "显示已保存的金额",
        "zh-TW": "顯示省下金額"
      },
      "default": true
    }
  ]
}
{% endschema %}
0 Likes

Success.

New Member
2 1 0

I figured it out. In case anyone else is curious, this is what I came up with. You just have to put it in the correct location

<h1 class="h2 text-center">{{ 'general.search.no_results_html' | t: terms: search.terms }}</h1>
          {% include 'search-bar' %}
    	   <hr class="hr--clear">

          {% if grid_results == false %}


          {% else %}

            <div class="grid-uniform">
            {% for item in collections.all.products %}
              {% if item.title == "" %}
              		{% continue %}
              	{%else %}
              		{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
              		{% include 'search-result-grid' %}
              {% endif %}
            {% endfor %}
            
            {% for image in product.images %} 
                <img src="{{ image | img_url: 'medium' }}"
            {% endfor %} 
            
			</div>
          {% endif %}
0 Likes