first commit
This commit is contained in:
Axel
@@ -0,0 +1,306 @@
|
||||
<!-- 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 -%}
|
||||
@@ -0,0 +1,384 @@
|
||||
<!-- /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 %}
|
||||
@@ -0,0 +1,173 @@
|
||||
<!-- /snippets/product-buttons.liquid -->
|
||||
|
||||
{%- liquid
|
||||
assign buybutton_setting = false
|
||||
assign gift_card_recipient_feature_active = false
|
||||
assign current_variant = product.selected_or_first_available_variant
|
||||
|
||||
if block.settings.enable_gift_card_recipient and product.gift_card?
|
||||
assign gift_card_recipient_feature_active = true
|
||||
endif
|
||||
|
||||
comment
|
||||
Quick buy buttons are incompatable with gift card products and subscription products
|
||||
endcomment
|
||||
if block.settings.enable_payment_button and gift_card_recipient_feature_active == false
|
||||
assign buybutton_setting = true
|
||||
endif
|
||||
if product.selling_plan_groups.size > 0
|
||||
assign buybutton_setting = false
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div class="product__block__buttons" style="--PB: {{ block.settings.padding_bottom }}px;" {{ block.shopify_attributes }} >
|
||||
<div data-product-form-outer>
|
||||
{% comment %} The [data-product-form] tag distinguishes the product form from upsell instant-add-buttons. {% endcomment %}
|
||||
{%- form 'product', product, id: uniq_id, data-product-form: '', data-product-handle: product.handle -%}
|
||||
{%- unless hidden -%}
|
||||
<div class="product__form__inner" data-form-inner>
|
||||
|
||||
{% comment %}
|
||||
Note: the gift card recipient form is controlled in Checkout and must contain these undocumented line item propeties:
|
||||
* properties[__shopify_send_gift_card_to_recipient] - Hidden - Toggles the feature on/off in checkout, following properties have no effect without it
|
||||
* properties[Recipient email] - The email of the gift card recipient
|
||||
* properties[Recipient name] - The name of the gift card recipient
|
||||
* properties[Message] - Shopify chose a highly generic name for the gift card message, this could easily conflict with an app or custom code
|
||||
{% endcomment %}
|
||||
{%- if gift_card_recipient_feature_active -%}
|
||||
{%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div class="product__submit" data-buttons-wrapper data-add-action-wrapper data-error-boundary>
|
||||
<div data-error-display role='alert' class="add-action-errors"></div>
|
||||
|
||||
{%- assign button_text = 'products.product.add_to_cart' | t -%}
|
||||
{%- if product.metafields.theme.preorder.value == true -%}
|
||||
{% comment %} Add a line item property with 'Sale type: Pre-order' and make the button say 'Pre-order'{% endcomment %}
|
||||
<input type="hidden" data-product-preorder name="properties[{{ 'products.product.sale_type' | t }}]" value="{{ 'products.product.pre_order' | t }}">
|
||||
{%- assign button_text = 'products.product.pre_order' | t -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- render 'sibling-color-as-line-prop' product: product -%}
|
||||
|
||||
{%- if current_variant == null -%}
|
||||
{%- assign button_text = 'products.product.unavailable' | t -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if current_variant.available == false -%}
|
||||
{%- assign button_text = 'products.product.sold_out' | t -%}
|
||||
{%- endif -%}
|
||||
|
||||
<div class="product__submit__buttons{% if product.has_only_default_variant %} product__submit__buttons--clear{% endif %}">
|
||||
<span class="sr-only" aria-live="polite" x-show="isLoading">
|
||||
{{ 'products.product.adding_to_cart' | t }}
|
||||
</span>
|
||||
<span class="sr-only" aria-live="polite" x-show="isSuccess">
|
||||
{{ 'products.product.added_to_cart' | t }}
|
||||
</span>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
name="add"
|
||||
class="btn--outline btn--full btn--primary btn--add-to-cart"
|
||||
data-add-to-cart
|
||||
{% comment %} Explicitly add aria label so that button text isn't read out in screen readers in uppercase {% endcomment %}
|
||||
aria-label="{{ button_text }}"
|
||||
:class="{
|
||||
'has-success': isSuccess,
|
||||
'loading': isLoading
|
||||
}"
|
||||
{% unless current_variant.available %} disabled="disabled" {% endunless %}
|
||||
>
|
||||
<span class="btn-state-ready flex justify-center">
|
||||
<span data-add-to-cart-text>
|
||||
{{ button_text }}
|
||||
</span>
|
||||
{% if current_variant %}
|
||||
{% liquid
|
||||
comment
|
||||
start Yagi app code
|
||||
endcomment
|
||||
assign current_variant_price = current_variant.price
|
||||
|
||||
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 current_variant_price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price
|
||||
|
||||
if current_variant.metafields.app--168074346497.discount_type.value != nil and current_variant.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.01
|
||||
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
||||
|
||||
if current_variant.metafields.app--168074346497.discount_percentage.value > 0.01
|
||||
assign deducted_percentage = 1.0 | minus: current_variant.metafields.app--168074346497.discount_percentage.value
|
||||
endif
|
||||
|
||||
assign current_variant_price = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
endif
|
||||
|
||||
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 current_variant_price = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
endif
|
||||
endif
|
||||
|
||||
comment
|
||||
end Yagi app code
|
||||
endcomment
|
||||
%}
|
||||
<span class="cta__dot opacity-50">•</span>
|
||||
<span
|
||||
data-button-price
|
||||
{% if public_or_tags_matched %}data-yagi-matched{% endif %}
|
||||
data-yagi-price="{{ current_variant_price }}"
|
||||
x-text="$formatCurrency({{- current_variant_price -}} * Math.max(quantity, 1), { form: 'short', currency: '{{ cart.currency.iso_code }}' })"
|
||||
>
|
||||
{%- if settings.currency_code_enable -%}
|
||||
{{ current_variant_price | money_with_currency }}
|
||||
{%- else -%}
|
||||
{{ current_variant_price | money }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
<span class="btn-state-loading">
|
||||
<svg height="18" width="18" class="svg-loader">
|
||||
<circle r="7" cx="9" cy="9" />
|
||||
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||
</svg>
|
||||
</span>
|
||||
|
||||
<span class="btn-state-complete"> </span>
|
||||
</button>
|
||||
|
||||
{%- if buybutton_setting -%}
|
||||
<div class="product__submit__quick">
|
||||
{{ form | payment_button }}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% comment %} Shop pay split payment terms {% endcomment %}
|
||||
<div class="shop-pay-terms">{{- form | payment_terms -}}</div>
|
||||
{%- endunless -%}
|
||||
|
||||
{% comment %} The input with name="id" indicates the variant to add to cart {% endcomment %}
|
||||
<input type="hidden" name="id" x-model.fill="variantId" value="{{ current_variant.id }}">
|
||||
{%- endform -%}
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,578 @@
|
||||
<!-- /snippets/product-grid-item-variant.liquid -->
|
||||
|
||||
{% comment %}
|
||||
Inner content for a grid item
|
||||
{% endcomment %}
|
||||
|
||||
{%- liquid
|
||||
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
|
||||
|
||||
assign sellout_badge = false
|
||||
if sold_out and settings.badge_sellout
|
||||
assign sellout_badge = true
|
||||
endif
|
||||
|
||||
assign sale_badge = false
|
||||
if on_sale and settings.badge_sale
|
||||
assign sale_badge = true
|
||||
assign sale_badge_content = 'products.product.sale' | t
|
||||
if settings.badge_sale_discount
|
||||
if settings.badge_sale_type == 'dollar'
|
||||
if settings.currency_code_enable
|
||||
assign sale_badge_content = product_compare_at_price | minus: product_price | money_with_currency
|
||||
else
|
||||
assign sale_badge_content = product_compare_at_price | minus: product_price | money_without_trailing_zeros
|
||||
endif
|
||||
else
|
||||
assign difference = product_compare_at_price | minus: product_price
|
||||
assign percent_off = difference | times: 1.0 | divided_by: product_compare_at_price | times: 100
|
||||
assign sale_badge_content = percent_off | floor | append: '%'
|
||||
endif
|
||||
assign save_word = 'products.product.save' | t | append: ' '
|
||||
assign sale_badge_content = sale_badge_content | prepend: save_word
|
||||
endif
|
||||
endif
|
||||
|
||||
assign custom_badge = false
|
||||
if settings.badge_custom
|
||||
if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field'
|
||||
assign custom_badge = true
|
||||
assign custom_badge_content = product.metafields.theme.badge.value
|
||||
endif
|
||||
for tag in product.tags
|
||||
if tag contains "_badge_"
|
||||
assign tag_content = tag | remove: '_badge_' | replace: '_', ' '
|
||||
if tag_content != ''
|
||||
assign custom_badge = true
|
||||
assign custom_badge_content = tag_content
|
||||
endif
|
||||
break
|
||||
endif
|
||||
endfor
|
||||
endif
|
||||
|
||||
if badge_string and badge_string != ''
|
||||
assign custom_badge = true
|
||||
assign custom_badge_content = badge_string
|
||||
endif
|
||||
|
||||
assign tagged = false
|
||||
if sellout_badge or sale_badge or custom_badge
|
||||
assign tagged = true
|
||||
endif
|
||||
|
||||
comment
|
||||
Disqualify options that have more than 15 variants or are a combined length of > 90 characters
|
||||
endcomment
|
||||
if inline_variant_buttons.values.size > 15
|
||||
assign inline_variant_buttons = nil
|
||||
endif
|
||||
|
||||
if inline_variant_buttons
|
||||
assign all_characters = inline_variant_buttons.values | join: ""
|
||||
if all_characters.size >= 90
|
||||
assign inline_variant_buttons = nil
|
||||
endif
|
||||
endif
|
||||
|
||||
# Sellign plans can be added along with inline or instand buttons if
|
||||
# the product has exactly 1 selling plan with subscriptions required
|
||||
assign simple_selling_plan = nil
|
||||
|
||||
if inline_variant_buttons or instant_add_button
|
||||
if product.requires_selling_plan and product.selling_plan_groups.size == 1 and product.selling_plan_groups[0].selling_plans.size == 1
|
||||
# one variant, one required subscription, no choices to make
|
||||
assign simple_selling_plan = product.selected_or_first_available_selling_plan_allocation.selling_plan
|
||||
elsif product.selling_plan_groups.size > 0
|
||||
# Abort instant and inline add buttons, subs choices must be made
|
||||
assign inline_variant_buttons = nil
|
||||
assign instant_add_button = nil
|
||||
endif
|
||||
endif
|
||||
|
||||
# Catch case where first sibling has inline variants and subsequent do not
|
||||
if product.has_only_default_variant and inline_variant_buttons
|
||||
assign inline_variant_buttons = nil
|
||||
assign instant_add_button = true
|
||||
endif
|
||||
|
||||
# Allow configuration of image sizing for different numbers of grid columns
|
||||
# Note: desktop/tablet are set to a default of 3 just in case the grid sizes are not set to prevent accidental gigantic full-width images from being loaded
|
||||
assign columns_desktop = columns_desktop | default: section.settings.grid_large | default: 3
|
||||
assign columns_tablet = columns_tablet | default: section.settings.grid_medium | default: columns_desktop | default: 3
|
||||
assign columns_mobile = columns_mobile | default: section.settings.grid_mobile | default: 1
|
||||
assign section_width = section_width | default: section.settings.width | default: null
|
||||
-%}
|
||||
{%- capture badge -%}
|
||||
{%- if tagged %}
|
||||
{%- if custom_badge -%}
|
||||
<div class="product__badge product__badge--custom product__badge--{{ custom_badge_content | strip_html | handle }}">{{ custom_badge_content }}</div>
|
||||
{%- elsif sellout_badge -%}
|
||||
<div class="product__badge product__badge--sold">{{ 'products.product.sold_out' | t }}</div>
|
||||
{%- elsif sale_badge -%}
|
||||
<div class="product__badge product__badge--sale">{{ sale_badge_content }}</div>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- liquid
|
||||
assign first_image = product.media[0].preview_image
|
||||
assign container_wh_ratio = settings.product_card_wh_ratio
|
||||
assign image_cover = true
|
||||
|
||||
case settings.product_grid_image
|
||||
when 'crop'
|
||||
assign image_wh_ratio = container_wh_ratio
|
||||
when 'uneven'
|
||||
assign container_wh_ratio = first_image.aspect_ratio | default: settings.product_card_wh_ratio
|
||||
when 'scale'
|
||||
assign image_cover = false
|
||||
assign image_wh_ratio = first_image.aspect_ratio | default: settings.product_card_wh_ratio
|
||||
endcase
|
||||
|
||||
# Behavior is inferred based on setting and passed into JS
|
||||
assign image_hover = 'disabled'
|
||||
assign images_limit = settings.cycle_images_limit
|
||||
case images_limit
|
||||
when 1
|
||||
assign image_hover = 'disabled'
|
||||
when 2
|
||||
assign image_hover = 'second_immediately'
|
||||
else
|
||||
assign image_hover = 'cycle_images'
|
||||
endcase
|
||||
-%}
|
||||
|
||||
{%- capture sizes -%}
|
||||
{%- render 'image-grid-sizes',
|
||||
columns_desktop: columns_desktop,
|
||||
columns_tablet: columns_tablet,
|
||||
columns_mobile: columns_mobile,
|
||||
section_width: section_width
|
||||
%}
|
||||
{%- endcapture -%}
|
||||
|
||||
<product-grid-item-variant
|
||||
class="
|
||||
product-grid-item__content{% if on_sale %} on-sale{% endif %}
|
||||
{% if sold_out %} sold-out{% endif %}
|
||||
{% if tagged %} tagged{% endif %}
|
||||
{% comment %} only used to hide badge on hover {% endcomment %}
|
||||
{% if image_hover == 'cycle_images' %} is-slideshow{% endif %}
|
||||
"
|
||||
style="
|
||||
--enter-animation-duration: 225ms;
|
||||
--exit-animation-duration: 400ms;
|
||||
"
|
||||
data-grid-item="{{ product.id }}"
|
||||
data-slideshow-style="{{ image_hover }}"
|
||||
data-grid-item-variant="{{ variant.id }}"
|
||||
{% if visible != true %} hidden {% endif %}
|
||||
aria-label="{{ variant.title }}"
|
||||
>
|
||||
<div class="product-grid-item__container" data-error-boundary>
|
||||
<div data-error-display class="product-grid-item__error-display"> </div>
|
||||
<a href="{{ product.url }}" data-grid-link aria-label="{{ product.title | strip_html | escape }}">
|
||||
<div
|
||||
class="product-grid-item__images aspect-[--wh-ratio]"
|
||||
data-grid-images data-grid-slide
|
||||
style="
|
||||
--wh-ratio: {{ container_wh_ratio }};
|
||||
"
|
||||
>
|
||||
{%- if product.media.size > 0 -%}
|
||||
{% comment %}
|
||||
Manually store and increment this variable since we start skipping images below when we exceed the allowed images which would
|
||||
make using e.g. forloop.index0 not work since the index of the variant image could be greater than the number of images allowed
|
||||
{% endcomment %}
|
||||
{%- assign image_index = 0 -%}
|
||||
|
||||
{%- for media in product.media -%}
|
||||
{%- liquid
|
||||
# If we've already exceeded the number of allowed images, and this is not the variant featured media, skip it
|
||||
if image_index > images_limit
|
||||
if product.selected_variant and product.selected_variant.featured_media.id != media.id
|
||||
continue
|
||||
elsif variant.featured_media.id != media.id
|
||||
continue
|
||||
endif
|
||||
endif
|
||||
|
||||
assign img_object = media.preview_image
|
||||
assign class = "product-grid-item__image"
|
||||
assign loading = 'lazy'
|
||||
assign fetchpriority = "low"
|
||||
assign visible = false
|
||||
assign active_class = 'is-active'
|
||||
assign is_variant_featured_media = false
|
||||
assign is_selected_variant = false
|
||||
assign preload_image = false
|
||||
assign loading_image = 'lazy'
|
||||
|
||||
if variant.featured_media and media.id == variant.featured_media.id
|
||||
# Variant image is not necessarily first image or default image
|
||||
assign is_variant_featured_media = true
|
||||
endif
|
||||
|
||||
if product.selected_variant and product.selected_variant.featured_image
|
||||
if product.selected_variant.featured_media.id == media.id
|
||||
assign is_selected_variant = true
|
||||
endif
|
||||
|
||||
# Show variant image is there is a collection filter applied
|
||||
if is_variant_featured_media and is_selected_variant
|
||||
assign visible = true
|
||||
endif
|
||||
else
|
||||
# If no filters are active show the first image first
|
||||
if forloop.first
|
||||
assign visible = true
|
||||
endif
|
||||
endif
|
||||
|
||||
if visible
|
||||
assign fetchpriority = "high"
|
||||
if preload
|
||||
assign loading = 'eager'
|
||||
assign preload_image = true
|
||||
endif
|
||||
if eagerload
|
||||
assign loading_image = 'eager'
|
||||
endif
|
||||
endif
|
||||
%}
|
||||
|
||||
{%- capture srcset -%}
|
||||
{%- render 'image-grid-srcset',
|
||||
image: img_object,
|
||||
columns_desktop: columns_desktop,
|
||||
columns_tablet: columns_tablet,
|
||||
columns_mobile: columns_mobile,
|
||||
section_width: section_width,
|
||||
wh_ratio: image_wh_ratio,
|
||||
crop: 'center'
|
||||
%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{% comment %} Use a template to prevent hidden images from loading until user begins slideshow{% endcomment %}
|
||||
<product-grid-item-image
|
||||
class="
|
||||
product-grid-item__image-wrapper
|
||||
{% if visible %}{{ active_class }}{% endif %}
|
||||
"
|
||||
data-grid-image="{{ image_index }}"
|
||||
data-grid-image-target="{{ media.id }}"
|
||||
data-variant-id="{{ }}"
|
||||
loading="{{ loading }}"
|
||||
{% if visible %}data-grid-current-image{% endif %}
|
||||
{% if is_selected_variant and visible %}
|
||||
data-slide-for-filter-selected-variant
|
||||
{% endif %}
|
||||
{% if is_variant_featured_media %}
|
||||
data-slide-for-variant-media
|
||||
{% endif %}
|
||||
>
|
||||
{% unless visible %}<template>{% endunless %}
|
||||
|
||||
{% render 'image',
|
||||
cover: image_cover,
|
||||
img_object: img_object,
|
||||
class: class,
|
||||
sizes: sizes,
|
||||
srcset: srcset,
|
||||
preload: preload_image,
|
||||
loading: loading_image,
|
||||
fetchpriority: fetchpriority,
|
||||
wh_ratio: image_wh_ratio,
|
||||
placeholder: placeholder
|
||||
%}
|
||||
{% unless visible %}</template>{% endunless %}
|
||||
</product-grid-item-image>
|
||||
{%- assign image_index = image_index | plus: 1 -%}
|
||||
{%- endfor -%}
|
||||
{% else %}
|
||||
<div class="product-grid-item__image-wrapper is-active">
|
||||
{% render 'image',
|
||||
cover: image_cover,
|
||||
img_object: null,
|
||||
class: class,
|
||||
placeholder: placeholder,
|
||||
wh_ratio: image_wh_ratio
|
||||
%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{{ badge }}
|
||||
</a>
|
||||
|
||||
{% capture quick_action_toolbar_classes %}
|
||||
group/quick-actions-toolbar
|
||||
absolute
|
||||
flex flex-col justify-end items-end overflow-hidden
|
||||
top-[calc(var(--inner)/2)]
|
||||
right-[calc(var(--inner)/2)]
|
||||
bottom-[calc(var(--inner)/2)]
|
||||
left-[calc(var(--inner)/2)]
|
||||
transition duration-[--exit-animation-duration]
|
||||
md:items-normal
|
||||
md:opacity-0
|
||||
md:translate-y-r4
|
||||
md:group-hover/product-grid-item:opacity-100
|
||||
md:group-hover/product-grid-item:translate-y-0
|
||||
md:group-focus-within/product-grid-item:opacity-100
|
||||
md:group-focus-within/product-grid-item:translate-y-0
|
||||
|
||||
{% comment %}
|
||||
Prevent pointer events on the outer <inline-add-product> element since it covers the whole card
|
||||
and we only want the options menu to show when either the button wrapper or options menu itself
|
||||
are still being hovered
|
||||
{% endcomment %}
|
||||
pointer-events-none
|
||||
{% endcapture %}
|
||||
|
||||
{% capture quick_action_button_classes %}
|
||||
{{ settings.quick_add_button_color }}
|
||||
group/quick-action-button
|
||||
bg-button
|
||||
flex items-center justify-center
|
||||
type-accent font-bold text-r3
|
||||
transition-opacity duration-[--enter-animation-duration]
|
||||
pointer-events-auto
|
||||
w-r12 aspect-square
|
||||
min-w-[40px]
|
||||
min-h-[40px]
|
||||
md:min-h-[48px]
|
||||
md:px-r8 md:py-r5 md:w-full md:aspect-auto
|
||||
{% if sold_out %}opacity-50 !cursor-not-allowed{% endif %}
|
||||
{% endcapture %}
|
||||
|
||||
{%- if instant_add_button %}
|
||||
{% comment %} Allow for shorter default text on longer translations {% endcomment %}
|
||||
{% liquid
|
||||
if product.metafields.theme.preorder.value == true
|
||||
assign button_text = 'products.general.instant_add_pre_order' | t
|
||||
else
|
||||
assign button_text = 'products.general.instant_add' | t
|
||||
endif
|
||||
%}
|
||||
{% capture button %}
|
||||
<button
|
||||
data-add-to-cart
|
||||
type="submit"
|
||||
name="add"
|
||||
class="{{ quick_action_button_classes }}"
|
||||
:class="{
|
||||
'has-success': isSuccess,
|
||||
'loading': isLoading
|
||||
}"
|
||||
title="{% if sold_out %}{{ 'products.product.sold_out' | t }}{% else %}{{ button_text }}{% endif %}"
|
||||
:disabled="{{sold_out}} || isDisabled"
|
||||
aria-label="{{ button_text }}"
|
||||
>
|
||||
<span class="btn-state-ready text-button-contrast group-hover/quick-action-button:text-button-contrast/50 whitespace-nowrap">
|
||||
<span class="hidden md:block">
|
||||
{{ button_text }}
|
||||
</span>
|
||||
<span aria-hidden class="block md:hidden">
|
||||
{% render 'icon-set-classic-cart' %}
|
||||
</span>
|
||||
</span>
|
||||
<span class="btn-state-loading">
|
||||
<svg height="18" width="18" class="svg-loader" style="--border: rgb(var(--rgb-button-contrast) / 50%); --text: rgb(var(--rgb-button-contrast));">
|
||||
<circle r="7" cx="9" cy="9" />
|
||||
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="btn-state-complete" style="--primary: rgb(var(--rgb-button-contrast));"> </span>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
<div class="{{quick_action_toolbar_classes}}">
|
||||
{% render 'product-add-button-form', variant: variant, selling_plan: simple_selling_plan, button: button, class: "md:w-full" %}
|
||||
</div>
|
||||
{%- elsif inline_variant_buttons %}
|
||||
<div class="{{quick_action_toolbar_classes}}" x-data="productGridItemQuickAddMenu()">
|
||||
<button
|
||||
class="
|
||||
{{ quick_action_button_classes }}
|
||||
transition-opacity
|
||||
"
|
||||
title="{{ 'products.general.inline_add' | t }}"
|
||||
aria-haspopup="true"
|
||||
:aria-expanded="isOpen"
|
||||
:id="$id('quick-add-menu-button')"
|
||||
:aria-controls="$id('quick-add-menu-slideover')"
|
||||
@click.stop="open()"
|
||||
@mouseover="open()"
|
||||
x-ref="button"
|
||||
:class="
|
||||
isOpen ?
|
||||
'duration-[--enter-animation-duration] delay-0 opacity-0 md:opacity-100' :
|
||||
'duration-[--exit-animation-duration] delay-[--exit-animation-duration] opacity-100'
|
||||
"
|
||||
aria-label="{{ 'products.general.inline_add' | t }}"
|
||||
>
|
||||
<span
|
||||
class="
|
||||
whitespace-nowrap
|
||||
text-button-contrast
|
||||
transition translate-y-0 transform
|
||||
"
|
||||
:class="
|
||||
isOpen ?
|
||||
'duration-[--enter-animation-duration] delay-0 translate-y-full opacity-0' :
|
||||
'duration-[--exit-animation-duration] delay-[calc(var(--exit-animation-duration))] translate-y-0 opacity-100'
|
||||
"
|
||||
>
|
||||
<span class="hidden md:block">
|
||||
{{ 'products.general.inline_add' | t }}
|
||||
</span>
|
||||
<span aria-hidden class="block md:hidden">
|
||||
{% render 'icon-set-classic-cart' %}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
class="absolute top-0 right-0 bottom-0 left-0 overflow-hidden flex flex-col justify-end"
|
||||
role="popover"
|
||||
x-show="isOpen"
|
||||
x-cloak
|
||||
:aria-labelledby="$id('quick-add-menu-button')"
|
||||
>
|
||||
<div
|
||||
class="
|
||||
{{ settings.quick_add_button_color }}
|
||||
top-0 right-0 bottom-0 left-0 top-auto max-h-full overflow-scroll scrollbar-hide
|
||||
pointer-events-auto
|
||||
transition transform
|
||||
absolute
|
||||
origin-bottom
|
||||
bg-button
|
||||
md:opacity-100
|
||||
"
|
||||
x-show="isOpen"
|
||||
|
||||
{% comment %}
|
||||
Animate outer slider up or down
|
||||
{% endcomment %}
|
||||
x-transition:enter="duration-[calc(var(--enter-animation-duration)*2)] delay-[calc(var(--enter-animation-duration)/2)]"
|
||||
x-transition:enter-start="invisible translate-y-full opacity-0 md:opacity-100"
|
||||
x-transition:enter-end="visible translate-y-0 opacity-100 md:opacity-100"
|
||||
x-transition:leave="duration-[calc(var(--exit-animation-duration)*2)] delay-[calc(var(--exit-animation-duration)/4)]"
|
||||
x-transition:leave-start="visible translate-y-0 opacity-100 md:opacity-100"
|
||||
x-transition:leave-end="invisible translate-y-full opacity-0 md:opacity-100"
|
||||
>
|
||||
<div
|
||||
class="transition transform"
|
||||
x-show="isOpen"
|
||||
|
||||
{% comment %}
|
||||
Stagger inner slider up/down animation so it animates _after_ outer slider
|
||||
{% endcomment %}
|
||||
x-transition:enter="duration-[calc(var(--enter-animation-duration)*2)] delay-[calc(var(--enter-animation-duration)/2)]"
|
||||
x-transition:enter-start="translate-y-1/2 opacity-0"
|
||||
x-transition:enter-end="translate-y-0 opacity-full"
|
||||
x-transition:leave="duration-[calc(var(--exit-animation-duration))] delay-0"
|
||||
x-transition:leave-start="translate-y-0 opacity-full"
|
||||
x-transition:leave-end="translate-y-1/2 opacity-0"
|
||||
>
|
||||
{% render 'product-grid-item-quick-add-toolbar',
|
||||
inline_variants: inline_variants,
|
||||
inline_variant_buttons: inline_variant_buttons,
|
||||
simple_selling_plan: simple_selling_plan
|
||||
%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{%- elsif settings.quickview_enable -%}
|
||||
<div class="{{quick_action_toolbar_classes}}" x-data="productQuickViewButton({{ product.id }}, '{{ product.handle }}')">
|
||||
<div class="quickview md:w-full" data-quickview-holder="{{ product.id }}" data-add-action-wrapper>
|
||||
<button
|
||||
type="button"
|
||||
class="{{ quick_action_button_classes }}"
|
||||
@click.prevent="clickQuickviewButton"
|
||||
:class="{
|
||||
'loading': isLoading
|
||||
}"
|
||||
title="{% if sold_out %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.general.quick_view' | t }}{% endif %}"
|
||||
:disabled="{{sold_out}} || isDisabled"
|
||||
aria-label="{{ 'products.general.quick_view' | t }}"
|
||||
>
|
||||
<span class="btn-state-ready text-button-contrast group-hover/quick-action-button:text-button-contrast/50 whitespace-nowrap">
|
||||
<span class="hidden md:block">
|
||||
{{ 'products.general.quick_view' | t }}
|
||||
</span>
|
||||
<span aria-hidden class="block md:hidden">
|
||||
{% render 'icon-set-classic-cart' %}
|
||||
</span>
|
||||
</span>
|
||||
<span class="btn-state-loading">
|
||||
<svg height="18" width="18" class="svg-loader" style="--border: rgb(var(--rgb-button-contrast) / 50%); --text: rgb(var(--rgb-button-contrast));">
|
||||
<circle r="7" cx="9" cy="9" />
|
||||
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<script data-quickview-modal-template type="text/x-template">
|
||||
<div class="drawer drawer--right quickview__modal" data-quickview-modal data-form-holder id="{{ product.id }}" aria-hidden="true">
|
||||
<div class="drawer__content" data-product-quickview-ajax x-section-api='api-product-quickview'></div>
|
||||
|
||||
<span class="drawer__underlay" data-micromodal-close tabindex="-1">
|
||||
<span class="drawer__underlay__fill"></span>
|
||||
<span class="drawer__underlay__blur"></span>
|
||||
</span>
|
||||
</div>
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</product-grid-item-variant>
|
||||
@@ -0,0 +1,670 @@
|
||||
<!-- /snippets/product-grid-item-variant.liquid -->
|
||||
|
||||
{% comment %}
|
||||
A grid item for products used in collection grid view
|
||||
|
||||
* product {object} - The current prodcut
|
||||
|
||||
{% render 'product-grid-item', product: product %}
|
||||
{% endcomment %}
|
||||
|
||||
{%- liquid
|
||||
|
||||
assign on_sale = false
|
||||
assign product_price = product.price
|
||||
assign product_compare_at_price = product.compare_at_price
|
||||
|
||||
comment
|
||||
start Yagi app
|
||||
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
|
||||
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
|
||||
|
||||
# Siblings are a collection metafield called theme.siblings
|
||||
assign sibs_collection = nil
|
||||
assign has_siblings = false
|
||||
if settings.show_siblings and product.metafields.theme.siblings.value != blank and product.metafields.theme.siblings.type == 'single_line_text_field'
|
||||
assign sibs_collection = collections[product.metafields.theme.siblings.value]
|
||||
# Ensure the collection was set up to contain this product
|
||||
for sib_product in sibs_collection.products
|
||||
if sib_product == product
|
||||
assign has_siblings = true
|
||||
endif
|
||||
endfor
|
||||
endif
|
||||
|
||||
assign swatch_option = nil
|
||||
assign has_swatches = false
|
||||
assign swatch_limit = settings.card_swatch_limit
|
||||
|
||||
if settings.swatches_enable and settings.swatches_collection_enable
|
||||
# Detect new swatch system
|
||||
for option in product.options_with_values
|
||||
if option.values.first.swatch != null
|
||||
assign has_swatches = true
|
||||
assign swatch_option = option
|
||||
break
|
||||
endif
|
||||
endfor
|
||||
|
||||
if has_swatches == false
|
||||
# Detect old swatch system
|
||||
assign swatch_translation = 'general.swatches.color' | t
|
||||
assign swatch_labels = swatch_translation | append: ',' | split: ','
|
||||
for label in swatch_labels
|
||||
assign sanitized_label = label | lstrip | rstrip
|
||||
if product.options_by_name[sanitized_label].values.size > 0
|
||||
assign has_swatches = true
|
||||
assign swatch_option = product.options_by_name[sanitized_label]
|
||||
break
|
||||
endif
|
||||
endfor
|
||||
endif
|
||||
endif
|
||||
|
||||
# A button that will add to cart immediately: product with only one default variant or a product with color swatches and no other variants
|
||||
assign instant_add_button = nil
|
||||
|
||||
if settings.instant_add_enable
|
||||
if product.variants.size == 1
|
||||
assign instant_add_button = true
|
||||
elsif has_swatches and product.options.size == 1
|
||||
assign instant_add_button = true
|
||||
endif
|
||||
endif
|
||||
|
||||
# A quick add button that will show short variants like 'size' inside the button.
|
||||
assign inline_variant_buttons = nil
|
||||
|
||||
# Get the non color option
|
||||
# swatch_option.position -> 1 is off by one, it means product.options[0]
|
||||
# In case of siblings, the inline option buttons always use the first option
|
||||
if settings.instant_add_enable
|
||||
if product.options.size == 1
|
||||
assign inline_variant_buttons = product.options_with_values[0]
|
||||
elsif has_swatches and product.options.size == 2
|
||||
if swatch_option.position == 1
|
||||
assign inline_variant_buttons = product.options_with_values[1]
|
||||
else
|
||||
assign inline_variant_buttons = product.options_with_values[0]
|
||||
endif
|
||||
endif
|
||||
endif
|
||||
|
||||
|
||||
# Capture the swatch link markup so we only have filter product.variants by color one time
|
||||
assign swatch_link_markup = ''
|
||||
|
||||
# Pass pre-filtered color variants into content, because the logic needs to know about
|
||||
# swatch option positions and swatches need to use the where filter to get the list
|
||||
assign inline_variants = nil
|
||||
|
||||
# Placeholder to be displayed when no product image
|
||||
assign placeholder = placeholder | default: false
|
||||
-%}
|
||||
|
||||
<product-grid-item
|
||||
aria-label="{{ product.title | strip_html | escape }}"
|
||||
class="product-grid-item group/product-grid-item"
|
||||
data-item-id="{{ product.id }}"
|
||||
{{ attributes }}
|
||||
>
|
||||
{% if has_siblings and sibs_collection.products.size > 0 %}
|
||||
{%- liquid
|
||||
# Initialize an empty array to hold visible siblings (i.e. ones under swatch limit)
|
||||
assign visible_siblings = "" | split: ","
|
||||
|
||||
# Initial visible sibling count is 1 to account for the current product
|
||||
assign visible_sibling_count = 1
|
||||
|
||||
# Loop through siblings collection and add the current product, plus other siblings until we hit the swatch_limit
|
||||
for sibling in sibs_collection.products
|
||||
if sibling.id == product.id or visible_sibling_count < swatch_limit
|
||||
# Create a new array with the current value, then concat it into the main array
|
||||
assign new_array = sibling | sort
|
||||
assign visible_siblings = visible_siblings | concat: new_array
|
||||
|
||||
unless sibling.id == product.id
|
||||
assign visible_sibling_count = visible_sibling_count | plus: 1
|
||||
endunless
|
||||
endif
|
||||
endfor
|
||||
-%}
|
||||
|
||||
{%- for sib_product in visible_siblings -%}
|
||||
{% liquid
|
||||
assign visible = false
|
||||
assign first_sibling_variant = sib_product.variants[0]
|
||||
if sib_product.id == product.id
|
||||
assign visible = true
|
||||
endif
|
||||
|
||||
if visible and preload
|
||||
assign preload_variant = true
|
||||
endif
|
||||
if visible and eagerload
|
||||
assign eagerload_variant = true
|
||||
endif
|
||||
|
||||
assign inline_variant_buttons = nil
|
||||
if settings.instant_add_enable and sib_product.options.size == 1
|
||||
assign inline_variant_buttons = sib_product.options_with_values[0]
|
||||
endif
|
||||
|
||||
if inline_variant_buttons
|
||||
assign inline_variants = sib_product.variants
|
||||
endif
|
||||
-%}
|
||||
|
||||
{% render 'product-grid-item-variant',
|
||||
product: sib_product,
|
||||
variant: first_sibling_variant,
|
||||
badge_string: badge_string,
|
||||
visible: visible,
|
||||
instant_add_button: instant_add_button,
|
||||
inline_variant_buttons: inline_variant_buttons,
|
||||
inline_variants: inline_variants,
|
||||
section_width: section_width,
|
||||
eagerload: eagerload_variant,
|
||||
preload: preload_variant,
|
||||
placeholder: placeholder,
|
||||
columns_desktop: columns_desktop,
|
||||
columns_tablet: columns_tablet,
|
||||
columns_mobile: columns_mobile
|
||||
%}
|
||||
{% endfor %}
|
||||
{% elsif has_swatches %}
|
||||
{%- liquid
|
||||
|
||||
# Note: this is a hack based on options having a property named option1, option2, or option3 -- which we rely on below to filter the variants array
|
||||
assign swatch_position_key = 'option' | append: swatch_option.position
|
||||
assign selected_swatch_value = swatch_option.selected_value
|
||||
|
||||
# Initialize an empty array to hold visible siblings (i.e. ones under swatch limit)
|
||||
assign visible_swatches = "" | split: ","
|
||||
|
||||
# If there is a selected swatch, start the visible swatch count at 1 to account for it
|
||||
if selected_swatch_value != blank
|
||||
assign visible_swatch_count = 1
|
||||
else
|
||||
assign visible_swatch_count = 0
|
||||
endif
|
||||
|
||||
# Loop through siblings collection and add the current product, plus other swatches until we hit the swatch limit
|
||||
for swatch_value in swatch_option.values
|
||||
if swatch_value == selected_swatch_value or visible_swatch_count < swatch_limit
|
||||
# Create a new array with the current value, then concat it into the main array
|
||||
assign new_array = swatch_value | sort
|
||||
assign visible_swatches = visible_swatches | concat: new_array
|
||||
|
||||
unless swatch_value == selected_swatch_value
|
||||
assign visible_swatch_count = visible_swatch_count | plus: 1
|
||||
endunless
|
||||
endif
|
||||
endfor
|
||||
-%}
|
||||
|
||||
{%- for swatch_value in visible_swatches -%}
|
||||
{% liquid
|
||||
|
||||
# Limit S|M|L to low-variant products to ensure collection page performance
|
||||
if product.variants.size < 200
|
||||
assign this_color_variants = product.variants | where: swatch_position_key, swatch_value
|
||||
assign in_stock_options = this_color_variants | where: 'available'
|
||||
if inline_variant_buttons
|
||||
assign inline_variants = this_color_variants
|
||||
endif
|
||||
else
|
||||
# Fall back to quickview with section-rendering API variant selection if there's too many variants
|
||||
assign inline_variant_buttons = false
|
||||
assign inline_variants = nil
|
||||
endif
|
||||
|
||||
|
||||
# Use the default variant for the swatch value. If that variant has media attached the image will change.
|
||||
# If not, the variant image will not change when swatch is selected.
|
||||
assign current_variant = swatch_value.variant
|
||||
|
||||
# If there is a variant selected from filters, show that variant first
|
||||
assign visible = false
|
||||
if product.selected_variant.id == current_variant
|
||||
assign visible = true
|
||||
elsif forloop.first
|
||||
assign visible = true
|
||||
endif
|
||||
|
||||
if visible and preload
|
||||
assign preload_variant = true
|
||||
endif
|
||||
if visible and eagerload
|
||||
assign eagerload_variant = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
{% render 'product-grid-item-variant',
|
||||
product: product,
|
||||
variant: current_variant,
|
||||
badge_string: badge_string,
|
||||
visible: visible,
|
||||
instant_add_button: instant_add_button,
|
||||
inline_variant_buttons: inline_variant_buttons,
|
||||
inline_variants: inline_variants,
|
||||
section_width: section_width,
|
||||
swatch_option: swatch_option,
|
||||
eagerload: eagerload_variant,
|
||||
preload: preload_variant,
|
||||
placeholder: placeholder,
|
||||
columns_desktop: columns_desktop,
|
||||
columns_tablet: columns_tablet,
|
||||
columns_mobile: columns_mobile
|
||||
%}
|
||||
|
||||
{% capture swatch_link_markup %}
|
||||
{{ swatch_link_markup }}
|
||||
<radio-swatch title="{{ swatch_value.name }}" class="swatch__button{% if in_stock_options.size == 0 %} sold-out{% endif %}{% if settings.swatches_squares %} swatch__button--square{% endif %}">
|
||||
<a
|
||||
href="{{ current_variant.url }}"
|
||||
class="swatch__label"
|
||||
{% if swatch_value.swatch != null %}
|
||||
data-swatch
|
||||
style="--swatch: {{ swatch_value.swatch.color }}"
|
||||
{% else %}
|
||||
data-swatch="{{ swatch_value | escape_once }}"
|
||||
{% endif %}
|
||||
|
||||
data-grid-item-variant="{{ current_variant.id }}"
|
||||
data-swatch-index="{{ forloop.index0 }}"
|
||||
|
||||
{% if visible %}aria-current="true"{%- endif -%}
|
||||
{% if current_variant.featured_media %}
|
||||
data-swatch-image="{{ current_variant.featured_media.preview_image.src }}"
|
||||
{% endif %}
|
||||
|
||||
{% if current_variant.featured_media %}
|
||||
data-swatch-image-id="{{ current_variant.featured_media.id }}"
|
||||
{% endif %}
|
||||
>
|
||||
{% if swatch_value.swatch.image %}
|
||||
{% render 'image', img_object: swatch_value.swatch.image, width: 34, wh_ratio: 1 %}
|
||||
{% endif %}
|
||||
<span class="visually-hidden">{{ swatch_value }}</span>
|
||||
</a>
|
||||
</radio-swatch>
|
||||
{% endcapture %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
|
||||
{%- liquid
|
||||
|
||||
# Limit S|M|L to low-variant products to ensure collection page performance
|
||||
if inline_variant_buttons and product.variants.size < 200
|
||||
assign inline_variants = product.variants
|
||||
else
|
||||
assign inline_variant_buttons = false
|
||||
assign inline_variants = nil
|
||||
endif
|
||||
|
||||
assign selected_variant = product.selected_variant | default: product.variants[0]
|
||||
|
||||
if preload
|
||||
assign preload_variant = true
|
||||
endif
|
||||
if eagerload
|
||||
assign eagerload_variant = true
|
||||
endif
|
||||
-%}
|
||||
|
||||
{% render 'product-grid-item-variant',
|
||||
product: product,
|
||||
variant: selected_variant,
|
||||
badge_string: badge_string,
|
||||
visible: true,
|
||||
instant_add_button: instant_add_button,
|
||||
inline_variant_buttons: inline_variant_buttons,
|
||||
inline_variants: inline_variants,
|
||||
section_width: section_width,
|
||||
preload: preload_variant,
|
||||
eagerload: eagerload_variant,
|
||||
placeholder: placeholder,
|
||||
columns_desktop: columns_desktop,
|
||||
columns_tablet: columns_tablet,
|
||||
columns_mobile: columns_mobile
|
||||
%}
|
||||
{% endif %}
|
||||
|
||||
<div class="product__grid__info {{ text_align | default: settings.collection_text_alignment | default: 'text-center' }}">
|
||||
<a
|
||||
href="{{ product.url }}" data-grid-link aria-label="{{ product.title | strip_html | escape }}"
|
||||
{% comment %} The link wrapping the product variant image is already focusable, so this does not need to be {% endcomment %}
|
||||
tabindex="-1"
|
||||
>
|
||||
<p class="visually-hidden">{{ product.title | strip_html | escape }}</p>
|
||||
|
||||
<div class="product__grid__title__wrapper">
|
||||
<p id="product-{{ product.id }}-title" class="product__grid__title">
|
||||
{{ product.title | strip_html | escape }}
|
||||
</p>
|
||||
{%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
|
||||
<div class="rating__wrapper__grid">
|
||||
{% render 'product-rating', product: product, show_rating_count: settings.product_grid_show_rating_count %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
<div class="product__grid__price {% if settings.show_cutline %} product__grid__price--nowrap{% endif %}">
|
||||
{%- if settings.show_cutline -%}
|
||||
<span class="product__grid__cutline">{{ product.metafields.theme.cutline.value }}</span>
|
||||
{%- 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 %}
|
||||
</div>
|
||||
{% if product.selected_or_first_available_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 product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 %}
|
||||
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}
|
||||
{% endif %}
|
||||
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
|
||||
{% endcapture %}
|
||||
<p class="product__grid__price__unit">
|
||||
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
|
||||
<span class="price-per-unit">
|
||||
{%- if settings.currency_code_enable -%}
|
||||
{{ product.selected_or_first_available_variant.unit_price | money_with_currency }}
|
||||
{%- else -%}
|
||||
{{ product.selected_or_first_available_variant.unit_price | money }}
|
||||
{%- endif -%}
|
||||
{{ unit_price_separator }}{{ unit_price_base_unit }}
|
||||
</span>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% comment %} {% if sold_out %}
|
||||
<p class="product__grid__price__sold">
|
||||
<em>{{ 'products.product.sold_out' | t }}</em>
|
||||
</p>
|
||||
{% endif %} {% endcomment %}
|
||||
</a>
|
||||
|
||||
{% assign active_variant = product.selected_or_first_available_variant %}
|
||||
|
||||
<div class="product-card__actions mt-2">
|
||||
{%- form 'product', product, class: 'product-card__atc-form', novalidate: 'novalidate', data-type: 'add-to-cart-form', is: 'product-form' -%}
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name="id"
|
||||
value="{{ active_variant.id }}"
|
||||
{% if active_variant.available == false %}disabled{% endif %}
|
||||
>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
name="add"
|
||||
class="product-card__atc"
|
||||
{% if active_variant.available == false %}disabled{% endif %}
|
||||
>
|
||||
{%- if active_variant.available -%}
|
||||
{{ 'products.product.add_to_cart' | t }}
|
||||
{%- else -%}
|
||||
{{ 'products.product.sold_out' | t }}
|
||||
{%- endif -%}
|
||||
</button>
|
||||
|
||||
{%- endform -%}
|
||||
</div>
|
||||
|
||||
|
||||
{%- if has_siblings -%}
|
||||
{%- assign sibs_collection = collections[product.metafields.theme.siblings.value] -%}
|
||||
{% if sibs_collection != blank %}
|
||||
{%- assign excess_swatches = sibs_collection.products_count | minus: swatch_limit -%}
|
||||
<div class="product__grid__sibs">
|
||||
<div class="grid__swatch__container">
|
||||
<p class="grid__swatch__placeholder">{{ 'collections.general.swatches_with_count' | t: count: sibs_collection.products_count }}</p>
|
||||
<div class="grid__swatch__hover">
|
||||
<div class="sibs__slider">
|
||||
<div class="sibs__inner">
|
||||
{%- for sib_product in visible_siblings -%}
|
||||
{%- assign title_safe = sib_product.title | strip_html | escape -%}
|
||||
{%- assign color_name = sib_product.metafields.theme.cutline.value | default: title_safe -%}
|
||||
<div class="siblings__link__holder {% if sib_product.available == false %} sold-out{% endif %}">
|
||||
<a
|
||||
href="{{ sib_product.url }}"
|
||||
class="siblings__link"
|
||||
data-sibling-swatch-link
|
||||
data-grid-item-variant="{{ sib_product.variants[0].id }}"
|
||||
data-grid-item-swatch-image="0"
|
||||
title="{{ color_name }}"
|
||||
{% if sib_product.handle == product.handle %}aria-current="true"{%- endif -%}
|
||||
>
|
||||
<div class="siblings__swatch">
|
||||
<div class="sibling__image{% if settings.swatches_squares %} sibling__image--square{% endif %}">
|
||||
{% assign image = sib_product.featured_media.preview_image %}
|
||||
{% assign image_width = 26 %}
|
||||
{% assign image_width_2x = image_width | times: 2 | at_most: image.width %}
|
||||
{% assign alt = image.alt | default: color_name %}
|
||||
|
||||
{% capture srcset %}
|
||||
{{ image | image_url: width: image_width_2x }} 2x,
|
||||
{{ image | image_url: width: image_width }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- render 'image',
|
||||
img_object: image,
|
||||
wh_ratio: 1.0,
|
||||
srcset: srcset,
|
||||
fetchpriority: 'low',
|
||||
width: image_width,
|
||||
placeholder: placeholder,
|
||||
alt: alt
|
||||
-%}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
{% if excess_swatches > 0 %} <a class="siblings__more-link" href="{{product.url}}">+{{ excess_swatches }}</a>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{%- elsif has_swatches and swatch_link_markup != '' -%}
|
||||
{%- assign excess_swatches = swatch_option.values.size | minus: swatch_limit -%}
|
||||
|
||||
<div class="grid__swatch__container">
|
||||
<p class="grid__swatch__placeholder">
|
||||
{{ 'collections.general.swatches_with_count' | t: count: swatch_option.values.size }}
|
||||
</p>
|
||||
<div class="grid__swatch__hover" aria-label="Options">
|
||||
{{ swatch_link_markup }} {% if excess_swatches > 0 %}
|
||||
<a class="grid__swatch__more-link" href="{{product.url}}">+{{ excess_swatches }}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</product-grid-item>
|
||||
|
||||
<style>
|
||||
.product-card__actions {
|
||||
position: static !important;
|
||||
margin-top: 1rem;
|
||||
opacity: 1 !important;
|
||||
transform: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.product-card__actions {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
.product-card__atc {
|
||||
font-size: 0.9rem;
|
||||
padding: 0.8rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card__actions .product-card__atc {
|
||||
width: 100% !important;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #000 !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1.25rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
transition: all 0.25s ease;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.85rem;
|
||||
min-height: 0 !important;
|
||||
height: auto !important;
|
||||
font-family: var(--FONT-STACK-BODY);
|
||||
font-style: var(--FONT-STYLE-BODY);
|
||||
font-weight: var(--FONT-WEIGHT-BODY);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.product-card__actions .product-card__atc {
|
||||
padding: 0.45rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card__actions .product-card__atc:hover,
|
||||
.product-card__actions .product-card__atc:focus {
|
||||
background-color: #111 !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.product-card__actions .product-card__atc[disabled] {
|
||||
background-color: #555 !important;
|
||||
color: #ccc !important;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.product-card:not(.product-card--list) .product-card__actions .btn {
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
transform: none !important;
|
||||
pointer-events: auto !important;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.product-card__main-actions {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* === Fix product card squishing on small screens === */
|
||||
@media (max-width: 767px) {
|
||||
.collection-products .product-grid,
|
||||
.collection-products .grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.collection-products .product-card {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.collection-products .product-grid,
|
||||
.collection-products .grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.product-card,
|
||||
.product-card__wrapper {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-card__image-wrapper { flex: 0 0 auto; }
|
||||
.product-card__info { flex: 1 1 auto; display: flex; flex-direction: column; }
|
||||
.product-card__actions { margin-top: auto; }
|
||||
|
||||
.product__grid__title {
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
min-height: calc(1.3em * 2); /* ensures same vertical space even if short */
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2; /* clamp to 2 lines */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
@supports not (-webkit-line-clamp: 2) {
|
||||
.product__grid__title { max-height: calc(1.3em * 2); }
|
||||
}
|
||||
|
||||
.product-card__type,
|
||||
.f-price { white-space: normal; word-break: break-word; }
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
<!-- /snippets/product-price.liquid -->
|
||||
{%- liquid
|
||||
assign current_variant = product.selected_or_first_available_variant
|
||||
assign price = current_variant.price
|
||||
assign compare_at_price = current_variant.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 price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price
|
||||
assign compare_at_price = current_variant.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 price = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
endif
|
||||
|
||||
if price < current_variant.price and compare_at_price == 0 or compare_at_price == blank
|
||||
assign compare_at_price = current_variant.price
|
||||
endif
|
||||
endif
|
||||
|
||||
comment
|
||||
end Yagi app code
|
||||
endcomment
|
||||
|
||||
assign sale_type = settings.badge_sale_type
|
||||
|
||||
if block.settings.price_size
|
||||
assign price_size_class = block.settings.price_size | prepend: 'accent-size-'
|
||||
assign price_small_class = block.settings.price_size | minus: 1 | prepend: 'accent-size-'
|
||||
endif
|
||||
|
||||
# Select current selling plan if it's specified in the URL
|
||||
assign selected_selling_plan = product.selected_selling_plan
|
||||
if product.requires_selling_plan
|
||||
# Fallback to the first available selling plan
|
||||
assign selected_selling_plan = product.selected_or_first_available_selling_plan_allocation.selling_plan | default: product.selling_plan_groups[0].selling_plans[0]
|
||||
endif
|
||||
|
||||
assign sale_text = 'products.product.sale' | t
|
||||
|
||||
# Subscription price
|
||||
if selected_selling_plan
|
||||
assign sale_text = 'products.product.subscription' | t
|
||||
|
||||
# Make sure the variant exists(it isn't 'unavailable') and showing a price makes sense
|
||||
if current_variant
|
||||
assign price_adjustment = selected_selling_plan.price_adjustments[0]
|
||||
|
||||
case price_adjustment.value_type
|
||||
when 'percentage'
|
||||
assign sale_type = 'percentage'
|
||||
assign plan_discount_amount = price | times: price_adjustment.value | divided_by: 100
|
||||
assign compare_at_price = price
|
||||
assign price = compare_at_price | minus: plan_discount_amount
|
||||
when 'fixed_amount'
|
||||
assign sale_type = 'dollar'
|
||||
assign compare_at_price = price
|
||||
assign price = compare_at_price | minus: price_adjustment.value
|
||||
when 'price'
|
||||
assign sale_type = 'dollar'
|
||||
assign compare_at_price = price
|
||||
assign price = price_adjustment.value
|
||||
endcase
|
||||
endif
|
||||
endif
|
||||
-%}
|
||||
|
||||
<div class="product__block__price" style="--PB: {{ block.settings.padding_bottom }}px;" {{ block.shopify_attributes }}>
|
||||
<div class="product__price__wrap">
|
||||
<div class="product__price__main" data-price-wrapper>
|
||||
<span class="product__price {{ price_size_class }}">
|
||||
<span data-product-price {% if compare_at_price > price %} class="product__price--sale"{% endif %}>
|
||||
{%- if settings.currency_code_enable -%}
|
||||
{{ price | money_with_currency }}
|
||||
{%- else -%}
|
||||
{{ price | money }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
{% if compare_at_price > price or product.selected_selling_plan %}
|
||||
{% case sale_type %}
|
||||
{% when 'strike' %}
|
||||
<span data-compare-price class="product__price--compare {{ price_size_class }}">
|
||||
{%- if settings.currency_code_enable -%}
|
||||
{{ compare_at_price | money_with_currency }}
|
||||
{%- else -%}
|
||||
{{ compare_at_price | money }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{% when 'percentage' %}
|
||||
{% assign difference = compare_at_price | minus: price %}
|
||||
{% assign percent_off = difference | times: 100 | divided_by: compare_at_price %}
|
||||
<span class="product__price--off">
|
||||
<span>{{ sale_text }}</span>
|
||||
{% if percent_off > 0 %}
|
||||
<em>•</em>
|
||||
{{ 'products.product.save' | t }}
|
||||
<span>{{ percent_off | floor | append: '%' }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% when 'dollar' %}
|
||||
{% assign amount_off = compare_at_price | minus: price %}
|
||||
<span class="product__price--off">
|
||||
<span>{{ sale_text }}</span>
|
||||
<em>•</em>
|
||||
{{ 'products.product.save' | t }}
|
||||
<span>{{ amount_off | money }}</span>
|
||||
</span>
|
||||
{% endcase %}
|
||||
{% endif %}
|
||||
|
||||
{% if current_variant.unit_price != blank %}
|
||||
{% capture show_units %}
|
||||
{%- unless current_variant.unit_price -%}style="display: none;"{%- endunless -%}
|
||||
{% endcapture %}
|
||||
{% 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 %}
|
||||
<span>
|
||||
{% if current_variant.unit_price_measurement %}
|
||||
{% if current_variant.unit_price_measurement.reference_value != 1 %}
|
||||
{{ current_variant.unit_price_measurement.reference_value }}
|
||||
{%- endif -%}
|
||||
{{ current_variant.unit_price_measurement.reference_unit }}
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endcapture %}
|
||||
<div class="product__price--unit {{ price_small_class }}">
|
||||
<span data-product-unit {{ show_units }}>
|
||||
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
|
||||
<span data-product-unit-price id="unit-price-{{ block.id }}">
|
||||
{%- if settings.currency_code_enable -%}
|
||||
{{ current_variant.unit_price | money_with_currency }}
|
||||
{%- else -%}
|
||||
{{ current_variant.unit_price | money }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{{ unit_price_separator }}
|
||||
<span data-product-base id="unit-price-base-{{ block.id }}">{{ unit_price_base_unit }}</span>
|
||||
</span>
|
||||
<span class="hide">
|
||||
{{ 'products.product.each' | t }}
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user