Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- /sections/search-template.liquid -->
<style>
.grid__image img {
{% if section.settings.search-images-size %}
object-fit: cover;
height: 100%;
width: 100%;
{% else %}
object-fit: contain;
height: 100%;
{% endif %}
}
.collection-product .product-overlay:hover {
background-color: rgba(255,255,255,{{section.settings.search-product-overlay | times: 0.01 }});
}
#search-page-template #searchgridparent{
display: inline-block;
position: relative;
margin-bottom: 30px;
}
#search-page-template .product-grid-card-link {
padding: 15px;
top: 50%;
transform: translateY(-50%);
}
#search-page-template #searchdummy{
margin-top: 100%;
}
#search-page-template #searchelement{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#search-page-template .grid__image{
height: 100%;
}
#search-page-template .product-overlay {
height: 100%;
top: 0;
right: 0;
left: 0;
position: absolute;
margin: 15px 15px 0 15px;
}
@media screen and (min-width: 769px){
#search-page-template .grid--full.inner-grid{
margin-right: -15px;
}
.template-search .grid--full {
margin-left: -30px;
}
}
@media screen and (max-width: 768px){
#search-page-template #searchgridparent{
margin-bottom: 115px;
}
#search-page-template .grid__image {
margin-bottom: 0px;
}
#search-page-template .mobile-collection-margin-1 {
margin: 0px 7.5px 0px 0px;
}
#search-page-template .mobile-collection-margin-2 {
margin: 0px 0px 0px 7.5px;
}
#search-page-template .mobile-square-title {
position: relative;
left: 0px;
height: 100px;
right: 0px;
bottom: 0px;
}
}
</style>
{% comment %}
To return only products or pages in results:
- http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
- Or manually add type=product or type=page to the search URL as a parameter
{% endcomment %}
{% assign grid_results = false %}
{%unless section.settings.search_layout == "one-whole"%}
{% assign grid_results = true %}
{%endunless%}
{% comment %}
Check to enforce respond.js
{% endcomment %}
{% assign respond_js_secret_key = shop.domain | md5 %}
{% unless search.terms == respond_js_secret_key %}
{% comment %}
Avoid accessing search.results before the opening paginate tag.
If you do, the pagination of results will be broken.
{% endcomment %}
{% paginate search.results by section.settings.search-result-paginate %}
<div class="grid--full" id="search-page-template" data-section-id="{{section.id}}" data-section-type="search-template">
<div class="grid__item large--one-whole">
<div class="search-form">
{% assign nice_terms = search.terms | replace:'**', '' | replace: '??', '' | replace: 'vendor:', 'from ' | replace: 'product_type:', 'in ' %}
{% if search.performed %}
{% if search.results == empty %}
<h1 class="text-center">{{ 'general.search.no_results_html' | t: terms: nice_terms }}</h1>
{% else %}
<h1 class="text-center">{{ 'general.search.results_for_html' | t: terms: nice_terms }}</h1>
{% endif %}
{% else %}
<h1 class="text-center">{{ 'general.search.title' | t }}</h1>
{% endif %}
{% include 'search-bar' %}
</div>
{% if search.performed and search.results != empty %}
{% if section.settings.search-style == "grid" %}
<div {%if grid_results %}class="grid--full grid-uniform one-whole grid-column-wrapper"{%endif%}>
{% for item in search.results %}
{% comment %}
Check if the product is on sale and set a variable to be used below.
{% endcomment %}
{% assign on_sale = false %}
{% if item.compare_at_price_varies %}
{% assign on_sale = true %}
{% endif %}
{% comment %}
Check if the product is sold out and set a variable to be used below.
{% endcomment %}
{% assign sold_out = true %}
{% if item.available or item.object_type == 'article' or item.object_type == 'page' %}
{% assign sold_out = false %}
{% endif %}
{% if grid_results == false %}
<!-- begin list search results-->
<div class="grid__item search-product-card">
<div class="grid--full search-list-layout search-product-wrapper {%if sold_out %} unavailable {%endif%}">
<div class="grid__item large--one-half medium--one-whole search-product-image grid-product-container">
<div class="ptest">
{% comment %}<div id="relproduct-dummy"></div>{% endcomment %}
<a href="{{ product.url | within: collection }}">
<div {%if sold_out%}class="unavailable"{%endif%}>
<img class="itest" src="{{ item.featured_image.src | img_url: 'large' }}" alt="{{ item.featured_image.alt | escape }}">
</div>
</a>
</div>
</div>
<div class="grid__item large--one-half medium--one-whole search-product-content text-center">
<h2>{{ item.title | link_to: item.url }}</h2>
{% if item.price %}
<p>
{% if on_sale %}
{% if item.price_varies %}
{% assign sale_price = item.price | money %}
<span itemprop="price">{{ 'products.product.on_sale_from_html' | t: price: sale_price }}</span>
{% else %}
<span itemprop="price">{{ item.price | money }}</span>
{% endif %}
{% else %}
{% if item.price_varies %}
{% assign price = item.price | money %}
{{ 'products.general.from_text_html' | t: price: price }}
{% else %}
<span itemprop="price">{{ item.price | money }}</span>
{% endif %}
{%endif%}
</p>
{% endif %}
{% comment %}
Get a brief excerpt of raw text from the page/product
{% endcomment %}
<p>{{ item.content | strip_html | truncatewords: 50 }}</p>
{%if settings.enable_quick%}
<a data-fancybox data-type="ajax" data-src="{{shop.url}}{{item.url}}" data-filter="#quick" href="javascript:;" class="quick-view">
{{'products.general.quick_view' | t }}
</a>
{%endif%}
</div>
</div>
</div>
<!-- list search results-->
{% else %}
<!-- begin grid search results-->
<div class="grid__item {%if sold_out %} unavailable {%endif%}search-result {%if section.settings.search_layout != "one-whole"%} search-product-wrapper-square{%endif%} large--{{section.settings.search_layout}} medium-down--one-whole text-center grid-product-container-search">
<div class="ptest">
<a href="{{ item.url }}">
<div {%if sold_out%}class="unavailable"{%endif%}>
{% if item.object_type == "article" or item.object_type == 'page' %}
{% if item.image.src %}
<img src="{{ item.image.src | img_url: 'large' }}">
{% else %}
{% if item.content contains "<img" %}
{% assign src = item.content | split: 'src="' %}
{% assign src = src[1] | split: '"' | first | replace: '//cdn', 'http://cdn' | replace: 'http:http://', 'http://' | remove: 'https:' %}
<img src="{{ src }}">
{% endif %}
{% endif %}
{%else%}
<img class="itest" src="{{ item.featured_image.src | img_url: 'large' }}" alt="{{ item.featured_image.alt | escape }}">
{%endif%}
</div>
</a>
</div>
<p> {{ item.title | link_to: item.url }}</p>
{% if item.price %}
<div class="product-price-grid">
{%if on_sale and sold_out != true%}
<div class="on-sale">
{% include 'tbm-icons', icon: 'sale' %}
</div>
{%elsif sold_out and on_sale != true%}
<div class="sold-out sold-out-search">
{% include 'tbm-icons', icon: 'soldout'%}
</div>
{%elsif on_sale and sold_out%}
<div class="sold-out sold-out-search">
{% include 'tbm-icons', icon: 'soldout'%}
</div>
{%endif%}
{% if on_sale %}
{% if item.price_varies %}
{% assign sale_price = item.price | money %}
<span itemprop="price">{{ 'products.product.on_sale_from_html' | t: price: sale_price }}</span>
{% else %}
<span itemprop="price">{{ item.price | money }}</span>
{% endif %}
{% else %}
{% if item.price_varies %}
{% assign price = item.price | money %}
{{ 'products.general.from_text_html' | t: price: price }}
{% else %}
<span itemprop="price">{{ item.price | money }}</span>
{% endif %}
{%endif%}
</div>
{% else %}
<p>{{ item.content | strip_html | truncatewords: 30 }}</p>
{% endif %}
{%if settings.enable_quick and item.object_type != 'article' and item.object_type != 'page'%}
<a data-fancybox data-type="ajax" data-src="{{shop.url}}{{item.url}}" data-filter="#quick" href="javascript:;" class="quick-view">
{{'products.general.quick_view' | t }}
</a>
{%endif%}
</div>
<!-- //grid search results-->
{% endif %}
{% endfor %}
</div>
{% else %}
<!-- //card search results-->
<div class="grid__item collection-products">
<div class="grid--full inner-grid search-result ">
{% for item in search.results %}
<div id="searchgridparent" class="grid__item large--{{section.settings.search_layout}} quarter-width medium--one-half small--one-half ">
<div id="searchdummy"></div>
{% include 'card-rework' %}
</div>
{% endfor %}
</div>
</div>
<!-- //end card search results-->
{% endif %}
{% if paginate.pages > 1 %}
<hr>
<div class="pagination">
{{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
</div>
{% endif %}
{% endif %}
</div>
</div>
{% endpaginate %}
{% else %}
{% include 'respond' %}
{% layout none %}
{% endunless %}
{% schema %}
{
"name": "Search page",
"class": "section-search-template",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "search-style",
"options": [
{
"value": "grid",
"label": "Grid"
},
{
"value": "card",
"label": "Card"
}
],
"default": "grid",
"label": "Search style"
},
{
"type": "select",
"id": "search_layout",
"label": "Results per row",
"default": "one-whole",
"options": [
{
"value": "one-whole",
"label": "1"
},
{
"value": "one-half",
"label": "2"
},
{
"value": "one-third",
"label": "3"
},
{
"value": "one-quarter",
"label": "4"
}
]
},
{
"type": "select",
"id": "search-result-paginate",
"label": "Results per page",
"default": "12",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "12",
"label": "12"
},
{
"value": "24",
"label": "24"
},
{
"value": "48",
"label": "48"
}
]
},
{
"type": "header",
"content": "Card style"
},
{
"type": "range",
"id": "search-product-overlay",
"min": 25,
"max": 100,
"step": 15,
"unit": "%",
"label": "Overlay opacity on hover",
"default": 25
},
{
"type": "checkbox",
"id": "search-images-size",
"label": "Set card images to fill grid",
"default" : false
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.