Axel
385 lines
14 KiB
Plaintext
385 lines
14 KiB
Plaintext
<!-- /sections/search.liquid -->
|
|
|
|
|
|
{%- liquid
|
|
assign has_filters = false
|
|
if search.filters != empty and section.settings.show_filters
|
|
assign has_filters = true
|
|
endif
|
|
|
|
assign types = search.types | join: ',' | url_encode
|
|
assign types = 'type=' | append: types
|
|
|
|
assign accordion_initial_state = 'accordion-is-open'
|
|
assign accordion_open_boolean = true
|
|
if section.settings.collapse_filters
|
|
# no class means the accordion is closed
|
|
assign accordion_initial_state = ''
|
|
# accordion_open_boolean is used to set aria-expanded and
|
|
# match js logic for 'display: none' on accordion body elements
|
|
# which are non-adjacent siblings that cannot easily be styled with CSS
|
|
assign accordion_open_boolean = false
|
|
endif
|
|
-%}
|
|
|
|
<section class="page-search {{ section.settings.width }} section-padding"
|
|
data-section-type="search-page"
|
|
data-section-id="{{ section.id }}"
|
|
style="--PT: {{ section.settings.padding_top }}px; --PB: {{ section.settings.padding_bottom }}px;">
|
|
<div class="search__page__heading">
|
|
{% render 'search-bar' %}
|
|
|
|
{%- if search.terms.size > 0 -%}
|
|
<div class="search__page__query note">
|
|
<p>
|
|
{%- if search.results_count > 0 -%}
|
|
{{ 'general.search.results_for' | t }} <span class="strong">{{ search.terms | escape }}</span>
|
|
{%- else -%}
|
|
{{ 'general.search.no_results_for' | t }} <span class="strong">{{ search.terms | escape }}</span>
|
|
{%- endif -%}
|
|
</p>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{% if search.performed %}
|
|
{%- if has_filters -%}
|
|
{%- assign filter_count = 0 -%}
|
|
{%- capture filter_clears -%}
|
|
{%- for filter in search.filters -%}
|
|
{%- if filter.type == "price_range" -%}
|
|
{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
|
|
{%- assign filter_count = filter_count | plus: 1 -%}
|
|
<a class="active__filters__remove" href="{{ filter.url_to_remove }}" data-filter-update-url>
|
|
{%- assign min_value = filter.min_value.value | default: 0 -%}
|
|
{%- assign max_value = filter.max_value.value | default: filter.range_max -%}
|
|
{{ min_value | money_without_trailing_zeros }} - {{ max_value | money_without_trailing_zeros }} X
|
|
</a>
|
|
{%- endif -%}
|
|
{%- else -%}
|
|
{%- for filter_value in filter.active_values -%}
|
|
{%- assign filter_count = filter_count | plus: 1 -%}
|
|
<a class="active__filters__remove" href="{{ filter_value.url_to_remove }}" data-filter-update-url>
|
|
{{ filter_value.label }} <span class="filter__x">X</span>
|
|
</a>
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endcapture -%}
|
|
|
|
<nav class="collection__nav" data-collection-tools>
|
|
<div class="collection__nav__buttons">
|
|
{% if filter_count > 0 %}
|
|
{% capture current_filters_count %}
|
|
<div class="badge">{{ filter_count }}</div>
|
|
{% endcapture %}
|
|
{% endif %}
|
|
|
|
<button class="collection__filters__toggle filters--default-visible drawer--visible" data-filters-toggle="filters">
|
|
<span class="hide-filters">{{ 'collections.sidebar.hide_filters' | t }}</span>
|
|
<span class="show-filters">{{ 'collections.sidebar.filter' | t }}</span>
|
|
<span data-active-filters-count>{{ current_filters_count }}</span>
|
|
{% render 'icon-core-filter' %}
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
{%- endif -%}
|
|
|
|
<div class="collection__active__filters__wrapper{% unless filter_count > 0 %} is-hidden{% endunless %}">
|
|
<div class="collection__active__filters" data-active-filters>
|
|
{%- if filter_count > 1 -%}
|
|
<a href="{{ routes.search_url }}?{{ types }}&q={{ search.terms | url_encode }}" class="active__filters__clear" data-filter-update-url>{{ 'collections.sidebar.all_tags' | t }}</a>
|
|
{%- endif -%}
|
|
{{- filter_clears -}}
|
|
</div>
|
|
|
|
{%- if section.settings.show_products_count -%}
|
|
<div class="collection__count" data-products-count>
|
|
{%- if search.results_count -%}
|
|
{{ 'general.search.results_with_count' | t: count: search.results_count | replace_first: '**', '<strong>' | replace_first: '**', '</strong>' | replace_first: '**', '<strong>' | replace_first: '**', '</strong>' }}
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
<div class="collection__content">
|
|
|
|
{%- if has_filters -%}
|
|
<div class="collection__filters__wrapper filters--default-visible" data-collection-sidebar data-filters="filters" data-default-hide="false">
|
|
<div class="collection__filters__outer">
|
|
<div class="drawer__top">
|
|
<div class="drawer__top__left">
|
|
<p class="cart__drawer__title">{{ 'collections.sidebar.filter' | t }}</p>
|
|
</div>
|
|
|
|
<button class="drawer__button drawer__close"
|
|
data-first-focus
|
|
data-filters-toggle="filters"
|
|
aria-label="{{ 'general.accessibility.close' | t }}">
|
|
{% render 'icon-core-x' %}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="collection__filters__inner">
|
|
<form data-sidebar-filter-form>
|
|
<input type="hidden" name="q" value="{{ search.terms }}">
|
|
|
|
{%- for filter in search.filters -%}
|
|
{% render 'filters',
|
|
filter: filter,
|
|
forloop: forloop,
|
|
accordion_open_boolean: accordion_open_boolean,
|
|
accordion_initial_state: accordion_initial_state %}
|
|
{%- endfor -%}
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="drawer__underlay" data-filters-underlay>
|
|
<span class="drawer__underlay__fill"></span>
|
|
<span class="drawer__underlay__blur"></span>
|
|
</span>
|
|
</div>
|
|
|
|
{%- endif -%}
|
|
|
|
<div class="collection__products" data-products-grid>
|
|
{% paginate search.results by section.settings.pagination_count %}
|
|
{% for item in search.results %}
|
|
<div class="search__item__generic">
|
|
{% if item.image or item.featured_media.preview_image %}
|
|
|
|
<div class="search__item__generic__image">
|
|
<a href="{{ item.url }}" title="{{ item.title | escape }}">
|
|
{% assign image = item.featured_media.preview_image | default: item.image %}
|
|
{% assign image_width = 70 | at_most: image.width %}
|
|
{% assign image_width_2x = image_width | times: 2 | at_most: image.width %}
|
|
{% assign alt = image.alt %}
|
|
|
|
{% capture srcset %}
|
|
{{ image | image_url: width: image_width_2x }} 2x,
|
|
{{ image | image_url: width: image_width }}
|
|
{% endcapture %}
|
|
|
|
{%- render 'image',
|
|
img_object: image,
|
|
wh_ratio: image.aspect_ratio,
|
|
width: image_width,
|
|
srcset: srcset,
|
|
alt: alt
|
|
-%}
|
|
</a>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
<div class="search__item__generic__text">
|
|
<p class="product__inline__title">
|
|
{{ item.title | link_to: item.url }}
|
|
</p>
|
|
|
|
{% if item.object_type == 'product' %}
|
|
<p class="product__inline__price">
|
|
{%- assign product = item -%}
|
|
{%- assign on_sale = false -%}
|
|
{%- assign sold_out = true -%}
|
|
{%- assign current_variant = product.first_available_variant -%}
|
|
{% liquid
|
|
assign product_price = product.price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
|
|
comment
|
|
start Yagi app code
|
|
endcomment
|
|
assign public_or_tags_matched = true
|
|
|
|
if product.metafields.app--168074346497.segment_tags.value.size > 0
|
|
assign public_or_tags_matched = false
|
|
endif
|
|
|
|
for etag in product.metafields.app--168074346497.segment_tags.value
|
|
if customer.tags contains etag
|
|
assign public_or_tags_matched = true
|
|
break
|
|
endif
|
|
endfor
|
|
|
|
if public_or_tags_matched
|
|
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
|
|
if shop.metafields.app--168074346497.discount_percentage.value > 0.005
|
|
assign discount_percentage = shop.metafields.app--168074346497.discount_percentage.value | times: 1.0
|
|
assign deducted_percentage = 1.0 | minus: discount_percentage
|
|
assign product_price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
endif
|
|
|
|
if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank
|
|
assign product_compare_at_price = product.price
|
|
endif
|
|
endif
|
|
|
|
comment
|
|
end Yagi app code
|
|
endcomment
|
|
%}
|
|
|
|
{%- if product_compare_at_price > product_price -%}
|
|
{%- assign on_sale = true -%}
|
|
{%- endif -%}
|
|
|
|
{%- if product.available -%}
|
|
{%- assign sold_out = false -%}
|
|
{%- endif -%}
|
|
|
|
<span class="price{% if on_sale %} on-sale{% endif %}">
|
|
{% if product.price_varies %}{{ 'products.general.from' | t }} {% endif %}
|
|
{% if settings.currency_code_enable %}
|
|
{{ product_price | money_with_currency }}
|
|
{% else %}
|
|
{{ product_price | money }}
|
|
{% endif %}
|
|
</span>
|
|
|
|
{% if on_sale %}
|
|
<span class="compare-at">
|
|
{% if settings.currency_code_enable %}
|
|
{{ product_compare_at_price | money_with_currency }}
|
|
{% else %}
|
|
{{ product_compare_at_price | money }}
|
|
{% endif %}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% if current_variant.unit_price %}
|
|
{% capture unit_price_separator %}
|
|
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
|
|
{% endcapture %}
|
|
|
|
{% capture unit_price_base_unit %}
|
|
{% if current_variant.unit_price_measurement.reference_value != 1 %}
|
|
{{ current_variant.unit_price_measurement.reference_value }}
|
|
{% endif %}
|
|
{{ current_variant.unit_price_measurement.reference_unit }}
|
|
{% endcapture %}
|
|
|
|
<br />
|
|
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
|
|
<span class="price-per-unit">{{ current_variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
|
|
{% endif %}
|
|
|
|
{% if sold_out %}
|
|
<br /><em>{{ 'products.product.sold_out' | t }}</em>
|
|
{% endif %}
|
|
</p>
|
|
{%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
|
|
<div class="rating__wrapper__search">
|
|
{% render 'product-rating', product: product, show_rating_count: settings.product_grid_show_rating_count %}
|
|
</div>
|
|
{%- endif -%}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% unless forloop.last %}<hr>{% endunless %}
|
|
{% endfor %}
|
|
|
|
{% if paginate.pages > 1 %}
|
|
<div class="text-center pt-r11">
|
|
{% render 'pagination-custom', paginate: paginate %}
|
|
</div>
|
|
{% endif %}
|
|
{% endpaginate %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "Search",
|
|
"settings": [
|
|
{
|
|
"type": "header",
|
|
"content": "Search"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_filters",
|
|
"default": true,
|
|
"label": "Show product filters"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "collapse_filters",
|
|
"label": "Collapse filter accordions",
|
|
"info": "Active filters will remain open",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_products_count",
|
|
"label": "Show products count",
|
|
"info": "Product count will be shown when filters are active",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "pagination_count",
|
|
"min": 3,
|
|
"max": 50,
|
|
"step": 1,
|
|
"label": "Results per page",
|
|
"default": 24
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "Section spacing"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "width",
|
|
"label": "Width",
|
|
"default": "wrapper",
|
|
"options": [
|
|
{
|
|
"value": "wrapper--full",
|
|
"label": "Full width padded"
|
|
},
|
|
{
|
|
"value": "wrapper",
|
|
"label": "Page width"
|
|
},
|
|
{
|
|
"value": "wrapper--narrow",
|
|
"label": "Page width narrow"
|
|
},
|
|
{
|
|
"value": "wrapper--tiny",
|
|
"label": "Page width extra narrow"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_top",
|
|
"min": 0,
|
|
"max": 180,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Padding top",
|
|
"default": 36
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "padding_bottom",
|
|
"min": 0,
|
|
"max": 180,
|
|
"step": 2,
|
|
"unit": "px",
|
|
"label": "Padding bottom",
|
|
"default": 36
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|