Demonstrate Search Results Page.
View this pattern on the live demo site
Search results page; the result list lives in a section.
{% comment %}
Display a search page with the search results
{% endcomment -%}
{%- include "/_header.liquid" no_header_title: true -%}
{%- comment %}No banner on the search page{% endcomment -%}
{%- include "/sections/_breadcrumbs.liquid" -%}
{%- include "/sections/_search_main.liquid" section_class:"py-5" -%}
{%- include "/sections/_faqs.liquid" section_class:"text-bg-secondary" -%}
{%- include "/sections/_cta_snippet.liquid" -%}
{%- include "/_footer.liquid" -%}Runs the search and prints matching pages.
{% comment %}
Displays a search form and the results of the current search.
Inputs:
section_class - an optional classname to apply to the section. If not included a default will be used
section_id - an optional id to apply to the section
search_param - the query parameter to use for the search term. If not included a default will be used
page_param - the query parameter to use for pagination. Defaults to 'page'
Outputs:
section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- var search_param = search_param | default: site_search_param | default: 'q' -%}
{%- var page_param = page_param | default:'page' -%}
{%- var search_term = request.query_params[search_param] | url_decode -%}
{%- var currentpage = request.query_params[page_param] | to_int | default: 1 | at_least: 1 -%}
{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
{%- if search_term is_valid -%}
{%- capture var search_page_title %}Search results for "{{search_term | escape}}"{% endcapture -%}
{%- else -%}
{%- var search_page_title = 'Search' -%}
{%- endif -%}
<main{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
<div class="container">
{%- if search_term is_valid -%}
{%- set_title 'Search: ' | append: search_term -%}
{%- endif -%}
{%- include '/common/_title.liquid' title:search_page_title title_classname:'h3' postincrement_headinglevel:true -%}
<div class="my-1" style="max-width:400px;">
{%- include "/partials/_search_form.liquid" search_action:request.url -%}
</div>
{%- if search_term is_valid -%}
{%- search collection = search_term limit:10 page:currentpage -%}
{%- if collection.total_count > 0 -%}
<p class="pt-1 text-body-secondary fw-semibold">Found {{collection.total_count}} results</p>
<div class="mb-3 mb-lg-4">
<hr>
{%- for item in collection -%}
{%- include "/partials/_search_result_item.liquid" -%}
{%- endfor -%}
</div>
{%- include '/common/_pagination.liquid' hide_first_and_last:true -%}
{%- else -%}
<p>No results found.</p>
{%- endif -%}
{%- else -%}
<p>Enter a search term to see results.</p>
{%- endif -%}
</div>
</main>
{%- set section_rendered = true -%}Search box submitted back to this results page.
{% comment %}
Displays a simple search form
Inputs:
search_action - The URL of the page that handles search results. Defaults to site_search_target with a final fallback to '/search' if not specified
search_param - The query parameter to use for the search form. Defaults to site_search_param with a final fallback to 's' if not specified
search_term - Optional. The current search term
search_placeholder - Optional. The placeholder for the search field
{% endcomment -%}
<form action="{{ search_action | default: site_search_target | default: '/search' }}" method="get" role="search" class="mb-0">
<div class="input-group">
<input name="{{search_param | default: site_search_param | default: 'q'}}" class="form-control" type="search" value="{{search_term | escape}}"{% if search_placeholder is_valid %} placeholder="{{search_placeholder | escape}}"{% endif %} aria-label="{{ search_placeholder | default: 'Search' | escape }}">
<input type="submit" class="btn btn-primary" value="Search">
</div>
</form>
One matching page in the result list.
{% comment %}
Displays a single search result item, which may be of any type (article, blog_post, datastore_item, etc...). The only assumption that we can make is that it is an entity with a URL.
We will try to guess the summary content from a list of common summary fields.
Inputs:
item - The item to output
img_preset_search_thumb - The image preset to use for the serach result thumbnail
{% endcomment -%}
{%- var summary_plain = item.meta_description -%}
{%- unless summary_plain is_valid -%}
{%- var summary_field = item.summary_html | default: item.summary | default: item.description -%}
{%- if summary_field.is_valid %}{% set summary_plain = summary_field.value | strip_html | html_decode | strip | truncate_to_word:160 %}{% endif -%}
{%- endunless -%}
<div class="row mt-3 mb-3 mb-md-4 position-relative py-2">
<div class="col-2 text-center d-flex justify-content-center pt-1 align-items-center">
{%- if item.image.is_valid -%}
{%- img item.image link:false preset:img_preset_search_thumb class:"img-fluid" style:"max-height:56px;" -%}
{%- else -%}
{%- comment %}This is a generic image SVG. Feel free to switch it out for whatever will work best on your own site{% endcomment -%}
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
<path d="M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
<path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2zm13 1a.5.5 0 0 1 .5.5v6l-3.775-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12v.54L1 12.5v-9a.5.5 0 0 1 .5-.5z"/>
</svg>
{%- endif -%}
</div>
<div class="col-10">
<p class="mb-1 text-primary fw-bold">{{item.title}}</p>
{%- if summary_plain is_valid %}<p class="m-1 text-muted">{{ summary_plain }}</p>{% endif -%}
<p class="m-0"><a href="{{item.full_url}}" class="stretched-link small fw-semibold">{{item.url}}</a></p>
</div>
</div>Pager for result pages beyond the first.
{% comment %}
Displays pagination links using bootstrap classes
Inputs:
collection - the collection to iterate over
page_param - the query parameter to use for pagination links
pagination_size - 'sm' or 'lg' (optional)
pagination_justify - 'start', 'center', or 'end'
max_pagination_links - the maximum number of pagination links to show (including the current page). Odd numbers work best.
hide_prev_and_next - true to hide the "Previous" and "Next" links
hide_first_and_last - true to hide the "first" and "last" links
disable_404_for_empty_collections - true to prevent returning a 404 response if there are no items in the collection past page 2 (ref: https://www.searchenginejournal.com/technical-seo/pagination/)
{% endcomment -%}
{%- var total_pages = collection.total_pages | at_least: 1 -%}
{%- var current_page = collection.page | default:1 -%}
{%- if current_page > total_pages -%}
{%- comment %}Intentionally set the current page to the total pages plus one so that the previous page link will correctly point to the last page in the collection{% endcomment -%}
{%- set current_page = total_pages | plus: 1 -%}
{%- unless disable_404_for_empty_collections %}{% set_response_code 404 "No Results" %}{% endunless -%}
{% endif -%}
{%- if total_pages > 1 or current_page > 1 -%}
{%- var page_param = page_param | default:'page' -%}
{%- var max_pagination_links = max_pagination_links | default: 11 | to_int | at_least: 1 -%}
{%- var back_page = current_page | minus:1 -%}
{%- var next_page = current_page | plus:1 -%}
{%- var first_page = 1 -%}
{%- var last_page = total_pages -%}
{%- if last_page > max_pagination_links -%}
{%- var offset = max_pagination_links | divided_by: 2 | floor -%}
{%- if current_page > offset -%}
{%- set first_page = current_page | minus: offset -%}
{%- endif -%}
{%- set last_page = first_page | plus: max_pagination_links | minus: 1 -%}
{%- if last_page > total_pages -%}
{%- set last_page = total_pages -%}
{%- set first_page = last_page | minus: max_pagination_links | plus: 1 -%}
{%- endif -%}
{%- endif -%}
<nav aria-label="Pagination">
<ul class="pagination flex-wrap{% if pagination_size == 'lg' or pagination_size == 'sm' %} pagination-{{pagination_size}}{% endif %}{% if pagination_justify == 'start' or pagination_justify == 'center' or pagination_justify == 'end' %} justify-content-{{pagination_justify}}{% endif %}">
{%- unless hide_first_and_last -%}
{%- if current_page > 1 -%}
<li class="page-item"><a class="page-link font-monospace" href="{% query_param_link = &page_param:false -%}" aria-title="First Page"><span aria-hidden="true">⏮</span></a></li>
{%- else -%}
<li class="page-item disabled" aria-hidden="true"><span class="page-link font-monospace">⏮</span></li>
{%- endif -%}
{%- endunless -%}
{%- unless hide_prev_and_next -%}
{%- if back_page < 1 -%}
<li class="page-item disabled" aria-hidden="true"><span class="page-link font-monospace">⏴</span></li>
{%- else -%}
{%- if back_page == 1 %}{% set back_page = false %}{% endif %}
<li class="page-item"><a class="page-link font-monospace" href="{% query_param_link = &page_param:back_page -%}" aria-title="Previous Page"><span aria-hidden="true">⏴</span></a></li>
{%- endif -%}
{%- endunless -%}
{%- for page_num in (first_page..last_page) -%}
{%- if current_page == page_num -%}
<li class="page-item active"><span class="page-link"><span class="visually-hidden">You're on page</span> {{page_num}}</span></li>
{%- else -%}
{%- var page_link = page_num %}{% if page_link == 1 %}{% set page_link = false %}{% endif -%}
<li class="page-item"><a class="page-link" href="{%- query_param_link = &page_param:page_link -%}" aria-label="Page {{page_num}}">{{page_num}}</a></li>
{%- endif -%}
{%- endfor -%}
{%- unless hide_prev_and_next -%}
{%- if next_page > total_pages -%}
<li class="page-item disabled" aria-hidden="true"><span class="page-link font-monospace">⏵</span></li>
{%- else -%}
<li class="page-item"><a class="page-link font-monospace" href="{% query_param_link = &page_param:next_page -%}" aria-title="Next Page"><span aria-hidden="true">⏵</span></a></li>
{%- endif -%}
{%- endunless -%}
{%- unless hide_first_and_last -%}
{%- if current_page < total_pages -%}
<li class="page-item"><a class="page-link font-monospace" href="{% query_param_link = &page_param:total_pages -%}" aria-title="Last Page"><span aria-hidden="true">⏭</span></a></li>
{%- else -%}
<li class="page-item disabled" aria-hidden="true"><span class="page-link font-monospace">⏭</span></li>
{%- endif -%}
{%- endunless -%}
</ul>
</nav>
{%- endif %}