307 lines
14 KiB
Plaintext
307 lines
14 KiB
Plaintext
|
<!-- sections/predictive-search.liquid -->
|
||
|
|
<!-- yagor! -->
|
||
|
|
|
||
|
|
{%- liquid
|
||
|
|
comment
|
||
|
|
Get each resource's result count
|
||
|
|
endcomment
|
||
|
|
assign query_count = predictive_search.resources.queries.size
|
||
|
|
assign product_count = predictive_search.resources.products.size
|
||
|
|
assign collection_count = predictive_search.resources.collections.size
|
||
|
|
assign article_count = predictive_search.resources.articles.size
|
||
|
|
assign page_count = predictive_search.resources.pages.size
|
||
|
|
assign collection_counter = 0
|
||
|
|
assign total_results_counter = 0
|
||
|
|
assign terms = predictive_search.terms
|
||
|
|
-%}
|
||
|
|
|
||
|
|
{%- if collection_count > 0 -%}
|
||
|
|
{%- liquid
|
||
|
|
assign exclude_collections_strict = settings.exclude_collections_strict | split: ','
|
||
|
|
assign exclude_collections_contain = settings.exclude_collections_contain | split: ','
|
||
|
|
assign collections_markup = ''
|
||
|
|
-%}
|
||
|
|
|
||
|
|
{%- for collection in predictive_search.resources.collections -%}
|
||
|
|
{%- liquid
|
||
|
|
assign skip_current_collection = false
|
||
|
|
for exclude_collection_strict in exclude_collections_strict
|
||
|
|
assign exclude_collection_strict_stripped = exclude_collection_strict | strip
|
||
|
|
|
||
|
|
if exclude_collection_strict_stripped == collection.handle
|
||
|
|
assign skip_current_collection = true
|
||
|
|
break
|
||
|
|
endif
|
||
|
|
endfor
|
||
|
|
|
||
|
|
for exclude_collection_contain in exclude_collections_contain
|
||
|
|
assign exclude_collection_contain_stripped = exclude_collection_contain | strip
|
||
|
|
|
||
|
|
if collection.handle contains exclude_collection_contain_stripped
|
||
|
|
assign skip_current_collection = true
|
||
|
|
break
|
||
|
|
endif
|
||
|
|
endfor
|
||
|
|
|
||
|
|
if skip_current_collection
|
||
|
|
continue
|
||
|
|
endif
|
||
|
|
|
||
|
|
assign collection_counter = collection_counter | plus: 1
|
||
|
|
assign collection_counter_animate = collection_counter | plus: product_count | plus: query_count
|
||
|
|
-%}
|
||
|
|
|
||
|
|
{%- capture collections_markup -%}
|
||
|
|
{{ collections_markup }}
|
||
|
|
|
||
|
|
<div class="other__inline animates" style="animation-delay: {{ collection_counter_animate | times: 90 | plus: 10 }}ms;" id="predictive-search-option-collection-{{ collection_counter }}" role="option" aria-selected="false">
|
||
|
|
<p class="other__inline__title">
|
||
|
|
<a href="{{ collection.url }}">{{ collection.title }}</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
{%- endcapture -%}
|
||
|
|
{%- endfor -%}
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- assign total_results = product_count | plus: query_count | plus: collection_counter | plus: page_count | plus: article_count -%}
|
||
|
|
|
||
|
|
{%- if predictive_search.performed -%}
|
||
|
|
<div class="wrapper">
|
||
|
|
<span class="predictive-search-status visually-hidden" data-predictive-search-live-region-count-value role="status">
|
||
|
|
{%- liquid
|
||
|
|
if total_results == 0
|
||
|
|
echo 'general.search.no_results' | t: terms: terms
|
||
|
|
else
|
||
|
|
echo 'general.search.results_with_count' | t: count: total_results | replace: '**', '' | append: ': '
|
||
|
|
|
||
|
|
if query_count > 0
|
||
|
|
assign count = query_count | plus: collection_counter
|
||
|
|
echo 'general.search.results_suggestions_with_count' | t: count: count | append: ', '
|
||
|
|
endif
|
||
|
|
|
||
|
|
if page_count > 0
|
||
|
|
assign count = page_count | plus: article_count
|
||
|
|
echo 'general.search.results_pages_with_count' | t: count: count | append: ', '
|
||
|
|
endif
|
||
|
|
|
||
|
|
if product_count > 0
|
||
|
|
echo 'general.search.results_products_with_count' | t: count: product_count
|
||
|
|
endif
|
||
|
|
endif
|
||
|
|
-%}
|
||
|
|
</span>
|
||
|
|
<div class="search__results__wrapper" id="predictive-search-results" role="listbox" aria-label="{{ 'general.search.search_for' | t: terms: terms }}">
|
||
|
|
{%- if total_results > 0 -%}
|
||
|
|
<div class="search__results__outer">
|
||
|
|
<div class="search__results__other">
|
||
|
|
{%- if query_count > 0 -%}
|
||
|
|
<div class="search__results__other__list">
|
||
|
|
<div class="search__results__heading">
|
||
|
|
<p class="search__results__title">{{ 'general.search.suggestions' | t }}</p>
|
||
|
|
<span class="badge">{{ query_count }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul aria-label="{{ 'general.search.suggestions' | t }}" role="group">
|
||
|
|
{%- for query in predictive_search.resources.queries -%}
|
||
|
|
{%- assign total_results_counter = total_results_counter | plus: 1 -%}
|
||
|
|
<li class="other__inline animates" id="predictive-search-option-query-{{ forloop.index }}" role="option" aria-selected="false" style="animation-delay: {{ total_results_counter | times: 90 | plus: 10 }}ms;">
|
||
|
|
<p class="other__inline__title">
|
||
|
|
<a href="{{ query.url }}">
|
||
|
|
<span>{{ query.styled_text }}</span>
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
{%- endfor -%}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if product_count > 0 -%}
|
||
|
|
<div class="search__results__products">
|
||
|
|
<div class="search__results__products__title">
|
||
|
|
<div id="search_product_results_heading" class="search__results__heading">
|
||
|
|
<p class="search__results__title">{{ 'products.general.products' | t }}</p>
|
||
|
|
<span class="badge">{{ product_count }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul aria-label="{{ 'products.general.products' | t }}" class="search__results__products__list">
|
||
|
|
{%- for product in predictive_search.resources.products -%}
|
||
|
|
{%- liquid
|
||
|
|
assign total_results_counter = total_results_counter | plus: 1
|
||
|
|
assign on_sale = false
|
||
|
|
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
|
||
|
|
|
||
|
|
assign sold_out = true
|
||
|
|
if product.available
|
||
|
|
assign sold_out = false
|
||
|
|
endif
|
||
|
|
-%}
|
||
|
|
|
||
|
|
<div class="product__inline animates" style="animation-delay: {{ total_results_counter | times: 90 | plus: 10 }}ms;" role="option" aria-selected="false">
|
||
|
|
<a href="{{ product.url }}" class="product__inline__link">
|
||
|
|
{%- if product.featured_image != blank -%}
|
||
|
|
<div role="presentation" class="product__inline__image">
|
||
|
|
{% assign alt = product.title | strip_html %}
|
||
|
|
{{ product.featured_image | image_url: width: product.featured_image.width | image_tag: class: 'img-aspect-ratio', alt: alt }}
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<p class="product__inline__title">
|
||
|
|
{{ product.title | strip_html }}
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<p class="product__inline__price">
|
||
|
|
<span class="price{% if on_sale %} on-sale{% endif %}{% if sold_out %} sold-out{% endif %}">
|
||
|
|
{%- if settings.currency_code_enable -%}
|
||
|
|
{{ product_price | money_with_currency }}
|
||
|
|
{%- else -%}
|
||
|
|
{{ product_price | money }}
|
||
|
|
{%- endif -%}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{%- if sold_out -%}
|
||
|
|
<br>
|
||
|
|
<em>{{ 'products.product.sold_out' | t }}</em>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{% 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 %}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
{%- endfor -%}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if collection_counter > 0 -%}
|
||
|
|
{%- assign total_results_counter = total_results_counter | plus: collection_counter -%}
|
||
|
|
|
||
|
|
<div class="search__results__other__list">
|
||
|
|
<div id="search_collection_results_heading" class="search__results__heading">
|
||
|
|
<p class="search__results__title">{{ 'collections.sidebar.collections' | t }}</p>
|
||
|
|
<span class="badge">{{ collection_counter }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul aria-label="{{ 'collections.sidebar.collections' | t }}" role="group" class="search__results__collections__list">
|
||
|
|
{{ collections_markup }}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if article_count > 0 -%}
|
||
|
|
<div class="search__results__other__list">
|
||
|
|
<div id="search_article_results_heading" class="search__results__heading">
|
||
|
|
<p class="search__results__title">{{ 'blogs.article.articles' | t }}</p>
|
||
|
|
<span class="badge">{{ article_count }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul aria-label="{{ 'blogs.article.articles' | t }}" role="group" class="search__results__articles__list">
|
||
|
|
{%- for article in predictive_search.resources.articles -%}
|
||
|
|
{%- assign total_results_counter = total_results_counter | plus: 1 -%}
|
||
|
|
<li class="other__inline animates" style="animation-delay: {{ total_results_counter | times: 90 | plus: 10 }}ms;" id="predictive-search-option-article-{{ forloop.index }}" role="option" aria-selected="false">
|
||
|
|
<p class="other__inline__title">
|
||
|
|
<a href="{{ article.url }}">{{ article.title }}</a>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
{%- endfor -%}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if page_count > 0 -%}
|
||
|
|
<div class="search__results__other__list">
|
||
|
|
<div id="search_page_results_heading" class="search__results__heading">
|
||
|
|
<p class="search__results__title">{{ 'general.page.pages' | t }}</p>
|
||
|
|
<span class="badge">{{ page_count }}</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul aria-label="{{ 'general.page.pages' | t }}" role="group" class="search__results__articles__list">
|
||
|
|
{%- for page in predictive_search.resources.pages -%}
|
||
|
|
{%- assign total_results_counter = total_results_counter | plus: 1 -%}
|
||
|
|
<li class="other__inline animates" style="animation-delay: {{ total_results_counter | times: 90 | plus: 10 }}ms;" id="predictive-search-option-page-{{ forloop.index }}" role="option" aria-selected="false">
|
||
|
|
<p class="other__inline__title">
|
||
|
|
<a href="{{ page.url }}">{{ page.title }}</a>
|
||
|
|
</p>
|
||
|
|
</li>
|
||
|
|
{%- endfor -%}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{%- else -%}
|
||
|
|
<div class="search__results__empty">
|
||
|
|
<div aria-live="polite">
|
||
|
|
<p>
|
||
|
|
{{ 'general.search.no_results_for' | t }}
|
||
|
|
<em>{{ terms }}</em>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
<div class="search__results__actions">
|
||
|
|
<button
|
||
|
|
class="btn btn--outline search__results__btn !flex items-center flex-nowrap gap-r2 whitespace-normal max-w-full"
|
||
|
|
tabindex="-1"
|
||
|
|
role="option"
|
||
|
|
aria-selected="false"
|
||
|
|
>
|
||
|
|
<span class="line-clamp-1 text-ellipsis" data-predictive-search-search-for-text>{{ 'general.search.search_for' | t: terms: terms }}</span>
|
||
|
|
<span class="accent-size-5 [&>svg]:inline-block rtl:-scale-x-100">{%- render 'icon-core-chevron-right' -%}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|