first commit
This commit is contained in:
Axel
@@ -0,0 +1,119 @@
|
|||||||
|
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
|
||||||
|
{%- if predictive_search.performed -%}
|
||||||
|
<div class="cols">
|
||||||
|
<p>{{ 'search.results_plus_term' | t: term: predictive_search.terms }} </p>
|
||||||
|
<p class="mobile-hide"><a href="{{ routes.search_url }}?q={{ predictive_search.terms }}" class="strong">{{ 'search.view_all_results' | t }} <i aria-hidden="true" class="icon-chevron-right"></i></a></p>
|
||||||
|
</div>
|
||||||
|
{%- liquid
|
||||||
|
if settings.search_drawer_enable_suggestions
|
||||||
|
assign all_suggestions = predictive_search.resources.queries
|
||||||
|
endif
|
||||||
|
if settings.search_drawer_enable_collections
|
||||||
|
if all_suggestions
|
||||||
|
assign all_suggestions = all_suggestions | concat: predictive_search.resources.collections
|
||||||
|
else
|
||||||
|
assign all_suggestions = predictive_search.resources.collections
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
{%- if all_suggestions.size > 0 and all_suggestions.first.text != predictive_search.terms -%}
|
||||||
|
{%- if settings.search_drawer_enable_suggestions -%}<p class="strong">{{ 'search.suggestions' | t }}</p>{%- endif -%}
|
||||||
|
<ul class="l4pl">
|
||||||
|
{%- for suggestion in all_suggestions limit: 5 -%}
|
||||||
|
{%- unless suggestion.text == predictive_search.terms %}
|
||||||
|
<li><a href="{{ suggestion.url }}"{% if suggestion.text %} data-search-suggestion="{{ suggestion.text }}"{% endif %}>{{ suggestion.title | highlight: predictive_search.terms }}{{ suggestion.text | highlight: predictive_search.terms }}</a></li>
|
||||||
|
{%- endunless -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if settings.search_drawer_enable_products and predictive_search.resources.products.size > 0 -%}
|
||||||
|
<ul class="l4ca compact">
|
||||||
|
{%- for product in predictive_search.resources.products -%}
|
||||||
|
<li class="{% if product.featured_media == blank %} no-img{% endif %}{% if settings.fill_product_images %} cover{% endif %}{% if product.compare_at_price > product.price %} has-discount{% endif %}">
|
||||||
|
{%- if product.featured_media != blank -%}
|
||||||
|
<figure{% if settings.multiply_product_images == 'multiply' %} class="img-multiply"{% elsif settings.multiply_product_images == 'multiply-bg' %} class="img-multiply-bg"{% endif %}>
|
||||||
|
<picture>
|
||||||
|
<img src="{{ product.featured_media | image_url: width: 140 }}"
|
||||||
|
srcset="{{ product.featured_media | image_url: width: 70 }} 1x,{{ product.featured_media | image_url: width: 140 }} 2x"
|
||||||
|
alt="{{ product.featured_media.alt }}"
|
||||||
|
width="70"
|
||||||
|
height="71"
|
||||||
|
>
|
||||||
|
</picture>
|
||||||
|
</figure>
|
||||||
|
{%- endif -%}
|
||||||
|
<section>
|
||||||
|
<div class="cols">
|
||||||
|
<h2>
|
||||||
|
{%- if settings.search_drawer_show_vendor and product.vendor != "vendor-unknown" and product.vendor != shop.name -%}
|
||||||
|
<span class="small">{{ product.vendor }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
<a href="{{ product.url }}">{{ product.title }} </a>
|
||||||
|
</h2>
|
||||||
|
{%- if settings.search_drawer_show_price -%}
|
||||||
|
<p class="price s1pr">
|
||||||
|
{% liquid
|
||||||
|
comment
|
||||||
|
start Yagi app code
|
||||||
|
endcomment
|
||||||
|
|
||||||
|
assign product_price = product.price
|
||||||
|
assign product_compare_at_price = product.compare_at_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 product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||||
|
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 -%}<span class="old-price">{{ product_compare_at_price | money }}</span> {%- endif -%}
|
||||||
|
{{ product_price | money }}
|
||||||
|
</p>
|
||||||
|
{%- endif -%}
|
||||||
|
</div>
|
||||||
|
{%- if product.metafields.reviews.rating and settings.show_product_rating -%}
|
||||||
|
<p class="r6rt" data-val="{{ product.metafields.reviews.rating.value }}" data-of="5">
|
||||||
|
{%- if product.metafields.reviews.rating_count -%}{{ product.metafields.reviews.rating_count }} {{ 'product.reviews.count' | t: count: product.metafields.reviews.rating_count | downcase }}{%- endif -%}
|
||||||
|
</p>
|
||||||
|
{%- endif -%}
|
||||||
|
</section>
|
||||||
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
{%- endif -%}
|
||||||
|
<p class="mobile-only"><a href="{{ routes.search_url }}?q={{ predictive_search.terms }}" class="strong">{{ 'search.view_all_results' | t }} <i aria-hidden="true" class="icon-chevron-right"></i></a></p>
|
||||||
|
{%- liquid
|
||||||
|
assign all_articles = ''
|
||||||
|
if settings.search_drawer_enable_pages
|
||||||
|
assign all_articles = predictive_search.resources.pages
|
||||||
|
endif
|
||||||
|
if settings.search_drawer_enable_articles
|
||||||
|
assign all_articles = all_articles | concat: predictive_search.resources.articles
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
{%- if all_articles.size > 0 -%}
|
||||||
|
<p class="strong">{{ 'search.questions_and_advice' | t }}</p>
|
||||||
|
<ul class="l4pl">
|
||||||
|
{%- for article in all_articles limit: 5 -%}
|
||||||
|
<li><a href="{{ article.url }}">{{ article.title | highlight: predictive_search.terms }}</a></li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endif -%}
|
||||||
@@ -0,0 +1,916 @@
|
|||||||
|
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
|
||||||
|
{%- liquid
|
||||||
|
assign container = 'li'
|
||||||
|
assign placeholder_int = placeholder_int | default: 1
|
||||||
|
assign width_class = width_class | default: ''
|
||||||
|
assign sizes = sizes | default: false
|
||||||
|
assign slider = slider | default: false
|
||||||
|
assign type = type | default: 'grid'
|
||||||
|
assign no_lazyload = no_lazyload | default: false
|
||||||
|
assign enable_image_choice = enable_image_choice | default: false
|
||||||
|
assign img_view = img_view | default: 'first'
|
||||||
|
if fill_images == null
|
||||||
|
assign fill_images = settings.fill_product_images
|
||||||
|
endif
|
||||||
|
if quick_buy_compact == null
|
||||||
|
assign quick_buy_compact = false
|
||||||
|
endif
|
||||||
|
if enable_quick_buy_drawer == null
|
||||||
|
if settings.layout_productcard == 'quickshop'
|
||||||
|
assign enable_quick_buy_drawer = true
|
||||||
|
else
|
||||||
|
assign enable_quick_buy_drawer = false
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
if enable_quick_buy_desktop == null
|
||||||
|
assign enable_quick_buy_desktop = true
|
||||||
|
endif
|
||||||
|
if enable_quick_buy_mobile == null
|
||||||
|
assign enable_quick_buy_mobile = true
|
||||||
|
endif
|
||||||
|
if enable_quick_buy_qty_selector == null
|
||||||
|
assign enable_quick_buy_qty_selector = false
|
||||||
|
endif
|
||||||
|
if enable_variant_picker == null
|
||||||
|
assign enable_variant_picker = true
|
||||||
|
endif
|
||||||
|
if enable_color_picker == null
|
||||||
|
assign enable_color_picker = settings.show_color_swatches
|
||||||
|
endif
|
||||||
|
if show_image == null
|
||||||
|
assign show_image = true
|
||||||
|
assign show_labels = true
|
||||||
|
assign show_title = true
|
||||||
|
assign show_price = true
|
||||||
|
assign show_stock = true
|
||||||
|
assign show_vendor = settings.show_vendor
|
||||||
|
assign show_rating = settings.show_product_rating
|
||||||
|
endif
|
||||||
|
if layout == 'list-compact'
|
||||||
|
assign show_labels = false
|
||||||
|
assign show_stock = false
|
||||||
|
assign show_vendor = false
|
||||||
|
assign show_rating = false
|
||||||
|
endif
|
||||||
|
if layout == 'hotspot'
|
||||||
|
assign show_labels = false
|
||||||
|
assign show_image = false
|
||||||
|
assign container = 'div'
|
||||||
|
if product.variants.size > 1 or product.available == false
|
||||||
|
assign enable_quick_buy_drawer = true
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
assign current_variant = product.selected_or_first_available_variant
|
||||||
|
if custom_height_ratio == null
|
||||||
|
assign custom_height_ratio = settings.custom_product_image_ratio
|
||||||
|
endif
|
||||||
|
assign custom_height_ratio = custom_height_ratio | divided_by: 100.0
|
||||||
|
assign image_width = 430
|
||||||
|
assign image_height = image_width | times: custom_height_ratio | round
|
||||||
|
assign image_width_2 = image_width | times: 1.5
|
||||||
|
assign image_height_2 = image_height | times: 1.5
|
||||||
|
assign image_width_small = image_width | divided_by: 3
|
||||||
|
assign image_height_small = image_height | divided_by: 3
|
||||||
|
if product == blank
|
||||||
|
assign vendor = 'Vendor name'
|
||||||
|
assign title = 'Product title'
|
||||||
|
assign price = 0 | money
|
||||||
|
else
|
||||||
|
assign vendor = product.vendor
|
||||||
|
if vendor == 'vendor-unknown' or vendor == shop.name
|
||||||
|
assign show_vendor = false
|
||||||
|
endif
|
||||||
|
assign title = product.title
|
||||||
|
if layout == 'list-compact'
|
||||||
|
assign price = current_variant.price | money
|
||||||
|
else
|
||||||
|
assign price = product.price | money
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
assign total_stock = 0
|
||||||
|
for variant in product.variants
|
||||||
|
if variant.matched and variant.inventory_quantity > 0
|
||||||
|
assign total_stock = total_stock | plus: variant.inventory_quantity
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
if total_stock <= 0
|
||||||
|
assign total_stock = current_variant.inventory_quantity
|
||||||
|
endif
|
||||||
|
if total_stock <= 0 and current_variant.inventory_management != null and current_variant.inventory_policy == 'continue' and current_variant.available and current_variant.inventory_quantity <= 0 and settings.preorder
|
||||||
|
assign preorder = true
|
||||||
|
unless settings.show_preorder_inventory
|
||||||
|
assign show_stock = false
|
||||||
|
endunless
|
||||||
|
endif
|
||||||
|
assign static_color_picker = false
|
||||||
|
if settings.layout_productcard == 'variant_picker' or settings.layout_productcard == 'quickshop' or settings.layout_productcard == 'add_to_cart'
|
||||||
|
assign static_color_picker = true
|
||||||
|
elsif settings.color_swatch_behavior == 'static' and settings.layout_productcard == 'standard'
|
||||||
|
assign static_color_picker = true
|
||||||
|
endif
|
||||||
|
assign overlay_static = false
|
||||||
|
if settings.quickshop_behavior == 'static'
|
||||||
|
if settings.layout_productcard == 'quickshop' or settings.layout_productcard == 'add_to_cart'
|
||||||
|
assign overlay_static = true
|
||||||
|
endif
|
||||||
|
elsif settings.color_swatch_behavior == 'static' and settings.layout_productcard == 'standard'
|
||||||
|
assign overlay_static = true
|
||||||
|
endif
|
||||||
|
assign collection_page = false
|
||||||
|
if origin == 'collection' or origin == 'search'
|
||||||
|
assign collection_page = true
|
||||||
|
endif
|
||||||
|
assign quickshop = false
|
||||||
|
if settings.layout_productcard == 'quickshop'
|
||||||
|
assign quickshop = true
|
||||||
|
elsif settings.layout_productcard != 'standard'
|
||||||
|
if layout == 'list' or layout == 'hotspot' or layout == 'grid'
|
||||||
|
assign quickshop = true
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
assign fixed_text_alignment_left = false
|
||||||
|
if layout == 'list'
|
||||||
|
assign fixed_text_alignment_left = true
|
||||||
|
endif
|
||||||
|
|
||||||
|
assign color_triggers = settings.color_swatch_name | newline_to_br | strip_newlines | replace: '<br />', '|' | split: '|'
|
||||||
|
assign color_option = false
|
||||||
|
if enable_color_picker
|
||||||
|
if settings.enable_color_swatches
|
||||||
|
for option in product.options_with_values
|
||||||
|
if color_triggers contains option.name
|
||||||
|
assign color_option = option
|
||||||
|
break
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
endif
|
||||||
|
assign colors_size = color_option.values | size
|
||||||
|
if settings.color_swatches_single and colors_size < 2
|
||||||
|
assign color_option = false
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
|
||||||
|
assign size_triggers = settings.variant_picker_name | newline_to_br | strip_newlines | replace: '<br />', '|' | split: '|'
|
||||||
|
assign size_option = false
|
||||||
|
if settings.layout_productcard == 'variant_picker'
|
||||||
|
for option in product.options_with_values
|
||||||
|
if size_triggers contains option.name
|
||||||
|
assign size_option = option
|
||||||
|
assign size_option_index = forloop.index0
|
||||||
|
break
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
endif
|
||||||
|
|
||||||
|
if product.options_with_values.first.values.first.product_url
|
||||||
|
assign size_option = false
|
||||||
|
endif
|
||||||
|
if product.variants.size == 250
|
||||||
|
assign quickshop = true
|
||||||
|
assign enable_color_picker = false
|
||||||
|
assign size_option = false
|
||||||
|
endif
|
||||||
|
|
||||||
|
assign rating_value = false
|
||||||
|
assign rating_count = false
|
||||||
|
if product.metafields.syncer.reviews
|
||||||
|
assign locale_ratings = product.metafields.syncer.reviews.value.reviews[localization.language.iso_code]
|
||||||
|
if locale_ratings
|
||||||
|
assign rating_value = locale_ratings.rating
|
||||||
|
assign rating_count = locale_ratings.count
|
||||||
|
else
|
||||||
|
assign rating_value = product.metafields.syncer.reviews.value.cumulative_rating
|
||||||
|
assign rating_count = product.metafields.syncer.reviews.value.total_reviews
|
||||||
|
endif
|
||||||
|
elsif product.metafields.reviews.rating
|
||||||
|
assign rating_value = product.metafields.reviews.rating.value
|
||||||
|
assign rating_count = product.metafields.reviews.rating_count
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
{%- if enable_quick_buy_desktop or enable_quick_buy_mobile -%}
|
||||||
|
{%- liquid
|
||||||
|
assign product_form_class = 'f8pr form-card ' | append: settings.productcards_text_alignment
|
||||||
|
if settings.layout_productcard == 'variant_picker' and layout != 'list-compact'
|
||||||
|
assign product_form_class = product_form_class | append: ' no-border'
|
||||||
|
endif
|
||||||
|
assign product_form_id = 'quick-add-' | append: section.id | append: product.id | append: '-quick-add-form_x'
|
||||||
|
-%}
|
||||||
|
{%- capture quick_buy -%}
|
||||||
|
{%- if layout == 'list-compact' -%}
|
||||||
|
{%- form 'product', product, id: product_form_id, class: product_form_class, novalidate: 'novalidate' -%}
|
||||||
|
{%- assign available_variants = product.variants | where: "available" -%}
|
||||||
|
{%- if enable_variant_picker and available_variants.size > 1 and product.variants.size < 250 -%}
|
||||||
|
<p>
|
||||||
|
<select name="id" id="{{ product_form_id }}-id">
|
||||||
|
{%- for variant in product.variants -%}
|
||||||
|
{%- unless variant.available -%}{% continue %}{%- endunless -%}
|
||||||
|
{%- liquid
|
||||||
|
if variant.featured_image
|
||||||
|
assign product_image = variant.featured_image
|
||||||
|
else
|
||||||
|
assign product_image = product.featured_image
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
<option
|
||||||
|
value="{{ variant.id }}"
|
||||||
|
data-variantinfo='{ {% if product_image %}"image":"{%- if fill_images -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ product_image | image_url: width: image_width_2, height: image_height_2 }}{%- endif -%}",{% endif %}"price_old":"{%- if variant.compare_at_price > variant.price -%}{{ variant.compare_at_price | money }}{%- endif -%}","price":"{{ variant.price | money }}"}'
|
||||||
|
{% unless variant.available %}disabled data-class="disabled"{% endunless %}
|
||||||
|
{% if variant == current_variant %}selected{% endif %}
|
||||||
|
>{{ variant.title }}</option>
|
||||||
|
{%- endfor -%}
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
{%- else -%}
|
||||||
|
<input type="hidden" name="id" value="{{ current_variant.id }}">
|
||||||
|
{%- endif -%}
|
||||||
|
<p class="submit">
|
||||||
|
<button type="submit" class="{% if preorder %}overlay-preorder m0{% elsif current_variant.available %}overlay-buy_button{% else %}overlay-unavailable-buy-button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}">
|
||||||
|
{% if preorder %}{%- if layout == 'list-compact' -%}<i aria-hidden="true" class="icon-cart" aria-label="{{ settings.preorder_button_text }}"></i> {%- else -%}{{ settings.preorder_button_text }}{%- endif -%}{% else %}<i aria-hidden="true" class="icon-cart" aria-label="{{ 'product.form.add_to_cart' | t }}"></i> {{ 'product.form.add_to_cart' | t }}{% endif %}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
{%- endform -%}
|
||||||
|
{%- else -%}
|
||||||
|
{% if quickshop %}
|
||||||
|
<p class="link-btn
|
||||||
|
{% unless layout == 'list' or origin == 'complementary' %}text-end{% endunless %}
|
||||||
|
quickshop
|
||||||
|
{% if layout == 'list' or layout == 'hotspot' or layout == 'grid' %}
|
||||||
|
{% if layout == 'grid' %}visible mobile-text-end{% endif %}
|
||||||
|
{% else %}
|
||||||
|
{% if settings.quickshop_behavior == 'static' %}visible{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
">
|
||||||
|
<a href="{{ product.url }}" class="circle {% if preorder %}overlay-preorder{% else %}overlay-buy_button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" data-quickshop aria-label="{{ 'product.form.add_to_cart' | t }}" style="--s: 45px;"><i aria-hidden="true" class="icon-cart"></i> <span class="hidden">{{ 'product.form.add_to_cart' | t }}</span></a>
|
||||||
|
</p>
|
||||||
|
{% elsif settings.layout_productcard == 'add_to_cart' and product.id %}
|
||||||
|
<p class="link-btn text-end quickshop visible mobile-hide">
|
||||||
|
<a href="{{ product.url }}" class="circle {% if preorder %}overlay-preorder{% else %}overlay-buy_button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" data-quickshop aria-label="{{ 'product.form.add_to_cart' | t }}" style="--s: 45px;"><i aria-hidden="true" class="icon-cart"></i> <span class="hidden">{{ 'product.form.add_to_cart' | t }}</span></a>
|
||||||
|
</p>
|
||||||
|
{% if current_variant.available or preorder %}
|
||||||
|
{% unless collection_page %}
|
||||||
|
{% assign product_form_class = product_form_class %}
|
||||||
|
{% endunless %}
|
||||||
|
{%- form 'product', product, id: product_form_id, class: product_form_class, novalidate: 'novalidate' -%}
|
||||||
|
{%- assign available_variants = product.variants | where: "available" -%}
|
||||||
|
{%- if available_variants.size > 1 -%}
|
||||||
|
<fieldset>
|
||||||
|
<p class="submit">
|
||||||
|
<span class="has-select" style="--main_fz: {{ settings.product_button_fontsize }}; font-size: {{ settings.product_button_fontsize }};">
|
||||||
|
<select name="id" id="{{ product_form_id }}-id">
|
||||||
|
{%- for variant in product.variants -%}
|
||||||
|
{%- unless variant.available -%}{% continue %}{%- endunless -%}
|
||||||
|
{%- liquid
|
||||||
|
assign featured_media_position = variant.featured_media.position
|
||||||
|
unless featured_media_position
|
||||||
|
assign featured_media_position = 1
|
||||||
|
endunless
|
||||||
|
|
||||||
|
if variant.featured_image
|
||||||
|
assign product_image = variant.featured_image
|
||||||
|
else
|
||||||
|
assign product_image = product.featured_image
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
<option
|
||||||
|
value="{{ variant.id }}"
|
||||||
|
data-variantinfo='{ {% if product_image %}"image":"{%- if fill_images -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ product_image | image_url: width: image_width_2, height: image_height_2 }}{%- endif -%}",{% endif %}"price_old":"{%- if variant.compare_at_price > variant.price -%}{{ variant.compare_at_price | money }}{%- endif -%}","price":"{{ variant.price | money }}"}'
|
||||||
|
{% unless variant.available %}disabled data-class="disabled"{% endunless %}
|
||||||
|
{% if variant == current_variant %}selected{% endif %}
|
||||||
|
data-slide-to="{{ featured_media_position | minus: 1 }}"
|
||||||
|
>{{ variant.title }}</option>
|
||||||
|
{%- endfor -%}
|
||||||
|
</select>
|
||||||
|
</span>
|
||||||
|
<button type="submit" class="{% if preorder %}overlay-preorder m0{% elsif current_variant.available %}overlay-buy_button{% else %}overlay-unavailable-buy-button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" aria-label="{% if preorder %}{{ settings.preorder_button_text }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}">
|
||||||
|
<span><i aria-hidden="true" class="icon-cart"></i></span>
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
{%- else -%}
|
||||||
|
<p class="submit">
|
||||||
|
<input type="hidden" name="id" value="{{ current_variant.id }}">
|
||||||
|
<button type="submit" class="{% if preorder %}overlay-preorder m0{% elsif current_variant.available %}overlay-buy_button{% else %}overlay-unavailable-buy-button{% endif %}{% if settings.buy_button_style == 'inv' %} inv{% endif %}" aria-label="{% if preorder %}{{ settings.preorder_button_text }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}">
|
||||||
|
<span>{% if settings.cart_icon_no_text == false %}<i aria-hidden="true" class="icon-cart"></i>{% else %}{% if preorder %}{{ settings.preorder_button_text }}{% else %}{{ 'product.form.add_to_cart' | t }}{% endif %}{% endif %} {{ 'product.form.add_to_cart' | t }}</span>
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endform -%}
|
||||||
|
{% else %}
|
||||||
|
<p class="link-btn{% unless collection_page %} {% endunless %}"><a href="{{ product.url }}" aria-label="{{ 'product.form.not_in_stock' | t }}" class="overlay-unavailable_buy_button{% if settings.buy_button_style == 'inv' %} inv{% endif %}">{{ 'product.form.not_in_stock' | t }}</a></p>
|
||||||
|
{% endif %}
|
||||||
|
{% elsif settings.layout_productcard == 'variant_picker' %}
|
||||||
|
<p class="link-btn text-end quickshop visible">
|
||||||
|
<a href="{{ product.url }}" class="circle overlay-buy_button{% if settings.buy_button_style == 'inv' %} inv{% endif %}" data-quickshop aria-label="{{ 'product.form.add_to_cart' | t }}"><i aria-hidden="true" class="icon-cart"></i> <span class="hidden">{{ 'product.form.add_to_cart' | t }}</span></a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{% if size_option %}
|
||||||
|
{%- assign product_form_class = product_form_class | append: ' hidden' -%}
|
||||||
|
{% if size_option.values %}
|
||||||
|
{% comment %}Redirect to product if it has a third option or color swatch is disabled and there is a second option{% endcomment %}
|
||||||
|
{%- liquid
|
||||||
|
assign go_to_product = false
|
||||||
|
if color_option and product.options.size < 3
|
||||||
|
assign go_to_product = true
|
||||||
|
elsif color_option == false and product.options.size < 2
|
||||||
|
assign go_to_product = true
|
||||||
|
endif
|
||||||
|
if enable_color_picker
|
||||||
|
if settings.color_swatches_single and colors_size < 2
|
||||||
|
assign go_to_product = false
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
if go_to_product
|
||||||
|
assign product_form_class = product_form_class | append: ' product-options'
|
||||||
|
endif
|
||||||
|
%}
|
||||||
|
{% assign product_form_class = product_form_class | append: ' mobile-hide' %}
|
||||||
|
{%- form 'product', product, id: product_form_id, class: product_form_class, novalidate: 'novalidate' -%}
|
||||||
|
<select name="id" id="id-{{ section.id }}-{{ product.id }}" data-url="{{ product.url }}" data-template="{{ section.id }}" required class="{% comment %}js-hidden{% endcomment %}" form="{{ product_form_id }}">
|
||||||
|
{%- for variant in product.variants -%}
|
||||||
|
{%- liquid
|
||||||
|
assign featured_media_position = variant.featured_media.position
|
||||||
|
unless featured_media_position
|
||||||
|
assign featured_media_position = 1
|
||||||
|
endunless
|
||||||
|
|
||||||
|
if variant.featured_image
|
||||||
|
assign product_image = variant.featured_image
|
||||||
|
else
|
||||||
|
assign product_image = product.featured_image
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
{% if block.settings.show_unavailable_variants == false and variant.available == false %}{% continue %}{% endif %}
|
||||||
|
<option
|
||||||
|
value="{{ variant.id }}"
|
||||||
|
data-variantinfo='{ {% if product_image %}"image":"{%- if fill_images -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ product_image | image_url: width: image_width_2, height: image_height_2, pad_color: 'fff' }}{%- endif -%}",{% endif %}"price_old":"{%- if variant.compare_at_price > variant.price -%}{{ variant.compare_at_price | money }}{%- endif -%}","price":"{{ variant.price | money }}"}' data-options='{"id":{{ variant.id }},"options":{{ variant.options | json | escape }}}'
|
||||||
|
{% unless variant.available %}disabled data-class="disabled"{% endunless %}
|
||||||
|
data-slide-to="{{ featured_media_position | minus: 1 }}"
|
||||||
|
>{{ variant.title }}</option>
|
||||||
|
{%- endfor -%}
|
||||||
|
</select>
|
||||||
|
<p class="submit m10 {% unless current_variant.available %}unavailable{% endunless %}">
|
||||||
|
{%- if current_variant.available -%}
|
||||||
|
<button type="submit" class="overlay-buy_button{% if block.settings.button_style == 'inv' %} inv{% endif %}">{{ 'product.form.add_to_cart' | t }}</button>
|
||||||
|
{%- else -%}
|
||||||
|
<button type="submit" class="disabled overlay-unavailable-buy-button{% if block.settings.button_style == 'inv' %} inv{% endif %}">{{ 'product.form.not_in_stock' | t }}</button>
|
||||||
|
{%- endif -%}
|
||||||
|
</p>
|
||||||
|
{%- endform -%}
|
||||||
|
|
||||||
|
<ul class="check inline plain text-center variant-picker mobile-hide" name="id" id="{{ product_form_id }}-id">
|
||||||
|
{% if settings.button_label %}<li class="wide">{{ settings.button_label }}</li>{% endif %}
|
||||||
|
{%- for value in size_option.values -%}
|
||||||
|
<li>
|
||||||
|
<input type="radio"
|
||||||
|
id="option-{{ product.id }}--{{ forloop.index0 }}"
|
||||||
|
value="{{ value.name | escape }}"
|
||||||
|
name="options[{{ section.id }}-{{ size_option.name | escape }}]"
|
||||||
|
title="{{ value.name }}"
|
||||||
|
data-url="{{ product.url }}"
|
||||||
|
data-template="{{ section.id }}"
|
||||||
|
form="{{ form_id }}"
|
||||||
|
autocomplete="off"
|
||||||
|
>
|
||||||
|
<label{% unless value.variant.available %} class="disabled-style"{% endunless %} for="option-{{ product.id }}--{{ forloop.index0 }}">
|
||||||
|
{{ value.name }}
|
||||||
|
</label>
|
||||||
|
</li>
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endcapture %}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- capture color_picker -%}
|
||||||
|
{%- if enable_color_picker -%}
|
||||||
|
{% if color_option %}
|
||||||
|
<ul class="check color" data-limit="6">
|
||||||
|
{% for color in color_option.values %}
|
||||||
|
{%- liquid
|
||||||
|
for variant in product.variants
|
||||||
|
assign options = variant.options | map: 'name'
|
||||||
|
if options contains color
|
||||||
|
assign color_variant = variant
|
||||||
|
break
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
-%}
|
||||||
|
{% capture swatch %}
|
||||||
|
{% if color_variant and color_variant.featured_media and settings.color_swatches_variant_image %}
|
||||||
|
<img src="{{ color_variant.featured_media | image_url: width: image_width_small, height: image_height_small, crop: 'center' }}" alt="{{ color }}" width="30" height="23" loading="lazy" class="color-variant-img filled">
|
||||||
|
{% elsif color.swatch.image %}
|
||||||
|
<i aria-hidden="true" class="icon-circle" style="background-image: url('{{ color.swatch.image | image_url }}');"></i>
|
||||||
|
{% elsif color.swatch.color %}
|
||||||
|
<i aria-hidden="true" class="icon-circle" style="background-color: {{ color.swatch.color }};"></i>
|
||||||
|
{% else %}
|
||||||
|
<i aria-hidden="true"
|
||||||
|
class="icon-circle swatch-custom-color-{{ color | split: ' ' | handleize }}"
|
||||||
|
style="background-color:{{ color | split: ' ' | last }}"
|
||||||
|
></i>
|
||||||
|
{% endif %}
|
||||||
|
{% endcapture %}
|
||||||
|
<li {% if color_variant and color_variant.featured_media %}
|
||||||
|
data-img="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{{ color_variant.featured_media | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}
|
||||||
|
{%- else -%}
|
||||||
|
{{ color_variant.featured_media | image_url: height: image_height_2 }}
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
{% endif %}
|
||||||
|
>
|
||||||
|
{% if settings.layout_productcard == 'variant_picker' and size_option %}
|
||||||
|
{% comment %}Find match between color and size / add available sizes as data attribute{% endcomment %}
|
||||||
|
{%- liquid
|
||||||
|
if size_option.values
|
||||||
|
assign data_sizes = ''
|
||||||
|
assign data_sizes_availability = ''
|
||||||
|
|
||||||
|
for variant in product.variants
|
||||||
|
assign options = variant.options | map: 'name'
|
||||||
|
if options contains color
|
||||||
|
assign found_size = false
|
||||||
|
|
||||||
|
for size in data_sizes
|
||||||
|
if options contains size
|
||||||
|
assign found_size = true
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
|
||||||
|
unless found_size
|
||||||
|
assign data_sizes = data_sizes | append: variant.options[size_option_index] | append: '/'
|
||||||
|
assign data_sizes_availability = data_sizes_availability | append: variant.available | append: '/'
|
||||||
|
endunless
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
<input type="radio"
|
||||||
|
id="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index0 }}"
|
||||||
|
value="{{ color }}"
|
||||||
|
name="options[{{ section.id }}-{{ product.id }}]"
|
||||||
|
title="{{ value }}"
|
||||||
|
{% if forloop.index0 == 0 %}checked{% endif %}
|
||||||
|
data-url="{{ product.url }}"
|
||||||
|
data-template="{{ section.id }}"
|
||||||
|
form="{{ form_id }}"
|
||||||
|
data-sizes="{{ data_sizes | remove_last: '/' }}"
|
||||||
|
data-sizes-availability="{{ data_sizes_availability | remove_last: '/' }}"
|
||||||
|
>
|
||||||
|
<label for="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index0 }}">
|
||||||
|
{{ swatch }}
|
||||||
|
</label>
|
||||||
|
{% else %}
|
||||||
|
<input type="radio" id="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index }}" name="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index }}">
|
||||||
|
<label for="color-{{ product.id }}-{{ variant.id }}-{{ forloop.index }}">
|
||||||
|
<a href="{% if color_variant %}{{ color_variant.url }}{% else %}{{ product.url }}{% endif %}" aria-label="{{ color }}">
|
||||||
|
{{ swatch }}
|
||||||
|
</a>
|
||||||
|
</label>
|
||||||
|
{% endif %}
|
||||||
|
</li>
|
||||||
|
{% endfor %}
|
||||||
|
</ul>
|
||||||
|
{% endif %}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endcapture %}
|
||||||
|
|
||||||
|
<{{ container }}
|
||||||
|
class="
|
||||||
|
product-card {{ width_class }}{% if quick_buy %} has-form{% endif %}
|
||||||
|
{% unless current_variant.available %}unavailable{% endunless %}
|
||||||
|
{% unless layout contains 'list' or layout == 'hotspot' %}{% if settings.productcards_text_alignment == 'left' or fixed_text_alignment_left %}text-start{% elsif settings.productcards_text_alignment == 'center' %}text-center{% elsif settings.productcards_text_alignment == 'right' %}text-end{% endif %}{% endunless %}
|
||||||
|
{% if settings.image_behaviour != 'slider' and product.media[1] != nil %}second-img-hover{% endif %}
|
||||||
|
{% if collection_img_view != 'first' and product.media[1] != nil and collection_page %}second-img-first{% endif %}
|
||||||
|
{% if settings.layout_productcard == 'add_to_cart' or settings.layout_productcard == 'variant_picker' %}update-variants dynamic-quickshop{% endif %}
|
||||||
|
{% if product == blank %}placeholder-product{% endif %}
|
||||||
|
"
|
||||||
|
{% if layout == 'list-compact' %}
|
||||||
|
data-product-id="{{ product.id }}"
|
||||||
|
{% endif %}
|
||||||
|
style="--ratio:{{ custom_height_ratio }};{% if settings.layout_productcard == 'variant_picker' %} --check_plain_bg: var(--{{ settings.variant_color_palette }}_bg); --check_plain_fg: var(--{{ settings.variant_color_palette }}_fg); --check_plain_o: {{ settings.background_opacity | divided_by: 100.0 }};{% endif %}"
|
||||||
|
>
|
||||||
|
{%- if show_image -%}
|
||||||
|
<figure
|
||||||
|
class="{% if overlay_static %}overlay-static {% endif %}"
|
||||||
|
{% if img_padding and img_vertical_position %}
|
||||||
|
style="--img_padding:{{ img_padding }}%;--img_vertical_position:{{ img_vertical_position }}%;"
|
||||||
|
{% endif %}
|
||||||
|
>
|
||||||
|
{% if show_labels %}{%- render 'product-labels', product: product, origin: 'productitem' -%}{% endif %}
|
||||||
|
{%- liquid
|
||||||
|
if layout == 'list-compact' and current_variant.featured_image
|
||||||
|
assign product_image = current_variant.featured_image
|
||||||
|
else
|
||||||
|
assign product_image = product.featured_media
|
||||||
|
endif
|
||||||
|
assign first_image = product_image
|
||||||
|
assign second_image = product.media[1]
|
||||||
|
if collection_page and img_view == 'last'
|
||||||
|
assign second_image = product.media | last
|
||||||
|
elsif collection_page == false and settings.image_behaviour == 'last_image'
|
||||||
|
assign second_image = product.media | last
|
||||||
|
endif
|
||||||
|
if settings.layout_productcard == 'variant_picker' and size_option
|
||||||
|
elsif second_image != null and settings.image_behaviour != 'slider' and layout != 'list-compact'
|
||||||
|
assign show_secondary_image = true
|
||||||
|
elsif second_image != null and enable_image_choice
|
||||||
|
assign show_secondary_image = true
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
{%- if product != blank and first_image -%}
|
||||||
|
{%- if collection_page and settings.image_behaviour == 'slider' -%}
|
||||||
|
<picture class="{% if product.media.size > 1 and settings.image_behaviour == 'slider' %}slider{% endif %}{% if settings.multiply_product_images == 'multiply' %} img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %} img-multiply-bg{% endif %}">
|
||||||
|
{% if collection_img_view != 'first' and product.media[1] != null %}
|
||||||
|
{% assign show_product = false %}
|
||||||
|
{%- for image in product.media -%}
|
||||||
|
{% if img_view == 'last' %}
|
||||||
|
{% if forloop.last == true %}
|
||||||
|
{% assign show_product = true %}
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
{% if forloop.index == 2 %}
|
||||||
|
{% assign show_product = true %}
|
||||||
|
{% else %}
|
||||||
|
{% assign show_product = false %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% unless show_product %}{% continue %}{% endunless %}
|
||||||
|
{% unless layout == 'list-compact' -%}
|
||||||
|
<a href="{{ product.url }}" aria-label="{{ title | escape }}">
|
||||||
|
{%- endunless %}
|
||||||
|
<img
|
||||||
|
src="{%- if fill_images -%}{{ image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ image | image_url: height: image_height_2 }}{%- endif -%}"
|
||||||
|
{%- if sizes -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{%- render 'image-srcset', image: image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
|
||||||
|
{%- else -%}
|
||||||
|
{%- render 'image-srcset', image: image, max_width: 640 -%}
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
sizes="{{ sizes }}"
|
||||||
|
{%- else -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{{ first_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ image | image_url: height: image_height_2, crop: 'center' }} 2x
|
||||||
|
{%- else -%}
|
||||||
|
{{ first_image | image_url: height: image_height }} 1x, {{ image | image_url: height: image_height_2 }} 2x
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
{%- endif -%}
|
||||||
|
width="{{ image_width }}"
|
||||||
|
height="{{ image_height }}"
|
||||||
|
alt="{{ image.alt | default: product.title | escape }}"
|
||||||
|
loading="{% if section.index > 2 or no_lazyload == false or section.location == 'footer' %}lazy{% else %}eager{% endif %}"
|
||||||
|
data-index="2"
|
||||||
|
class="second-first{% if fill_images %} filled{% endif %}"
|
||||||
|
>
|
||||||
|
{% unless layout == 'list-compact' %}</a>{% endunless %}
|
||||||
|
{%- endfor -%}
|
||||||
|
{% endif %}
|
||||||
|
{% assign show_product = true %}
|
||||||
|
{% if img_view == 'last' and collection_img_view == 'first' %}
|
||||||
|
{% assign product_images_size = product.media | size | minus: 1 %}
|
||||||
|
{% assign product_image_first = product.media | slice: 0 %}
|
||||||
|
{% assign product_image_last = product.media | slice: product_images_size %}
|
||||||
|
{% assign product_images_new = product_image_first | concat: product_image_last %}
|
||||||
|
{% if product_images_size > 1 %}
|
||||||
|
{% assign product_rest_size = product_images_size | minus: 1 %}
|
||||||
|
{% assign product_image_rest = product.media | slice: 1, product_rest_size %}
|
||||||
|
{% assign product_images_new = product_images_new | concat: product_image_rest %}
|
||||||
|
{% endif %}
|
||||||
|
{% else %}
|
||||||
|
{% assign product_images_new = product.media %}
|
||||||
|
{% endif %}
|
||||||
|
{%- for image in product_images_new -%}
|
||||||
|
{% if collection_img_view != 'first' %}
|
||||||
|
{% if img_view == 'last' %}
|
||||||
|
{% if forloop.last == true %}
|
||||||
|
{% assign show_product = false %}
|
||||||
|
{% endif %}
|
||||||
|
{% elsif img_view == 'second' %}
|
||||||
|
{% if forloop.index == 2 %}
|
||||||
|
{% assign show_product = false %}
|
||||||
|
{% else %}
|
||||||
|
{% assign show_product = true %}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
{% elsif img_view == 'last' %}
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% unless show_product %}{% continue %}{% endunless %}
|
||||||
|
{% unless layout == 'list-compact' %}<a href="{{ product.url }}">{% endunless %}
|
||||||
|
<img
|
||||||
|
src="{%- if fill_images -%}{{ image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ image | image_url: height: image_height_2 }}{%- endif -%}"
|
||||||
|
{%- if sizes -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{%- render 'image-srcset', image: image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
|
||||||
|
{%- else -%}
|
||||||
|
{%- render 'image-srcset', image: image, max_width: 640 -%}
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
sizes="{{ sizes }}"
|
||||||
|
{%- else -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{{ first_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
|
||||||
|
{%- else -%}
|
||||||
|
{{ first_image | image_url: height: image_height }} 1x, {{ image | image_url: height: image_height_2 }} 2x
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
{%- endif -%}
|
||||||
|
width="{{ image_width }}"
|
||||||
|
height="{{ image_height }}"
|
||||||
|
alt="{{ image.alt | default: product.title | escape }}"
|
||||||
|
loading="{% if section.index > 2 or no_lazyload == false or forloop.first == false or section.location == 'footer' %}lazy{% else %}eager{% endif %}"
|
||||||
|
data-index="{{ forloop.index }}"
|
||||||
|
{% if fill_images %}
|
||||||
|
class="filled"
|
||||||
|
{% endif %}
|
||||||
|
>
|
||||||
|
{% unless layout == 'list-compact' %}</a>{% endunless %}
|
||||||
|
{%- endfor -%}
|
||||||
|
</picture>
|
||||||
|
{%- else -%}
|
||||||
|
{% unless layout == 'list-compact' %}<a href="{{ product.url }}">{% endunless %}
|
||||||
|
<picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}">
|
||||||
|
<img
|
||||||
|
src="{%- if fill_images -%}{{ first_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ first_image | image_url: height: image_height_2 }}{%- endif -%}"
|
||||||
|
{%- if sizes -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{%- render 'image-srcset', image: first_image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
|
||||||
|
{%- else -%}
|
||||||
|
{%- render 'image-srcset', image: first_image, max_width: 640 -%}
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
sizes="{{ sizes }}"
|
||||||
|
{%- else -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{{ first_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ first_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
|
||||||
|
{%- else -%}
|
||||||
|
{{ first_image | image_url: height: image_height }} 1x, {{ first_image | image_url: height: image_height_2 }} 2x
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
{%- endif -%}
|
||||||
|
width="{{ image_width }}"
|
||||||
|
height="{{ image_height }}"
|
||||||
|
alt="{{ first_image.alt | default: product.title | escape }}"
|
||||||
|
loading="{% if section.index > 2 or no_lazyload == false or forloop.first == false or section.location == 'footer' %}lazy{% else %}eager{% endif %}"
|
||||||
|
{% if fill_images %}
|
||||||
|
class="filled"
|
||||||
|
{% endif %}
|
||||||
|
>
|
||||||
|
</picture>
|
||||||
|
{% if show_secondary_image and settings.image_behaviour != 'slider' %}
|
||||||
|
<picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}">
|
||||||
|
<img
|
||||||
|
src="{%- if fill_images -%}{{ second_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }}{%- else -%}{{ second_image | image_url: height: image_height_2 }}{%- endif -%}"
|
||||||
|
{%- if sizes -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{%- render 'image-srcset', image: second_image, format: 'custom', image_height: custom_height_ratio, max_width: 640, crop: 'center' -%}
|
||||||
|
{%- else -%}
|
||||||
|
{%- render 'image-srcset', image: second_image, max_width: 640 -%}
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
sizes="{{ sizes }}"
|
||||||
|
{%- else -%}
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{{ second_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ second_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
|
||||||
|
{%- else -%}
|
||||||
|
{{ second_image | image_url: height: image_height }} 1x, {{ second_image | image_url: height: image_height_2 }} 2x
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
{%- endif -%}
|
||||||
|
width="{{ image_width }}"
|
||||||
|
height="{{ image_height }}"
|
||||||
|
alt="{{ second_image.alt | default: product.title | escape }}"
|
||||||
|
loading="lazy"
|
||||||
|
{% if fill_images %}
|
||||||
|
class="filled"
|
||||||
|
{% endif %}
|
||||||
|
>
|
||||||
|
</picture>
|
||||||
|
{% endif %}
|
||||||
|
{% unless layout == 'list-compact' %}</a>{% endunless %}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- elsif product.media[0].media_type == 'video' or product.media[0].media_type == 'external_video' -%}
|
||||||
|
{% unless layout == 'list-compact' %}<a href="{{ product.url }}">{% endunless %}
|
||||||
|
<picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}">
|
||||||
|
<img
|
||||||
|
src="{{ product.media[0].preview_image | image_url: width: image_width_2, height: image_height_2 }}"
|
||||||
|
srcset="
|
||||||
|
{%- if fill_images -%}
|
||||||
|
{{ product.media[0].preview_image | image_url: width: image_width, height: image_height, crop: 'center' }} 1x, {{ product.media[0].preview_image | image_url: width: image_width_2, height: image_height_2, crop: 'center' }} 2x
|
||||||
|
{%- else -%}
|
||||||
|
{{ product.media[0].preview_image | image_url: height: image_height }} 1x, {{ product.media[0].preview_image | image_url: height: image_height_2 }} 2x
|
||||||
|
{%- endif -%}
|
||||||
|
"
|
||||||
|
width="{{ image_width }}"
|
||||||
|
height="{{ image_height }}"
|
||||||
|
alt="{{ product.title }}"
|
||||||
|
loading="lazy"
|
||||||
|
{% if fill_images %}
|
||||||
|
class="filled"
|
||||||
|
{% endif %}
|
||||||
|
>
|
||||||
|
</picture>
|
||||||
|
{% unless layout == 'list-compact' %}</a>{% endunless %}
|
||||||
|
{% else %}
|
||||||
|
<picture class="{% if settings.multiply_product_images == 'multiply' %}img-multiply{% elsif settings.multiply_product_images == 'multiply-bg' %}img-multiply-bg{% endif %}"
|
||||||
|
><a href="{{ product.url }}">
|
||||||
|
{{- 'product-' | append: placeholder_int | placeholder_svg_tag: 'placeholder-svg' -}}
|
||||||
|
</a></picture
|
||||||
|
>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if static_color_picker == false -%}
|
||||||
|
{{ color_picker }}
|
||||||
|
{%- endif -%}
|
||||||
|
<button
|
||||||
|
class="wishlist-productcard hidden"
|
||||||
|
title="Wishlist"
|
||||||
|
data-product-id="{{ product.id }}"
|
||||||
|
data-variant-id="{{ current_variant.id }}"
|
||||||
|
>
|
||||||
|
<i class="icon-heart-outline"></i>
|
||||||
|
</button>
|
||||||
|
{% comment %} {%- if quick_buy
|
||||||
|
and layout != 'list-compact'
|
||||||
|
and settings.layout_productcard != 'standard'
|
||||||
|
and layout != 'list'
|
||||||
|
-%}
|
||||||
|
{{ quick_buy | replace: '-quick-add-form_x', '1' }}
|
||||||
|
{%- endif -%} {% endcomment %}
|
||||||
|
</figure>
|
||||||
|
{%- endif -%}
|
||||||
|
{% if layout == 'list-compact' %}<section>{% else %}<div>{% endif %}
|
||||||
|
{%- if show_title or show_vendor -%}
|
||||||
|
<h3
|
||||||
|
{% unless show_vendor %}
|
||||||
|
class="p0"
|
||||||
|
{% endunless %}
|
||||||
|
>
|
||||||
|
{%- if show_vendor -%}
|
||||||
|
<span class="small">
|
||||||
|
{{ vendor }}
|
||||||
|
</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if show_title -%}
|
||||||
|
<a href="{{ product.url }}" class="product-card-title">{{ title }}</a>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if layout == 'list-compact' and product.has_only_default_variant == false -%}
|
||||||
|
{% if enable_variant_picker == false or enable_variant_picker and available_variants.size == 1 %}
|
||||||
|
<span class="small">
|
||||||
|
{{ current_variant.title }}
|
||||||
|
</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endif -%}
|
||||||
|
</h3>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if rating_value and show_rating -%}
|
||||||
|
<p class="r6rt" data-val="{{ rating_value }}" data-of="5">
|
||||||
|
<a href="{{ product.url }}">
|
||||||
|
{%- if rating_count -%}
|
||||||
|
{{ rating_count }}
|
||||||
|
<span>{{ 'product.reviews.count' | t: count: rating_count }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if show_stock -%}
|
||||||
|
{%- render 'product-deliverytime',
|
||||||
|
product: product,
|
||||||
|
show_stock: false,
|
||||||
|
current_variant: current_variant,
|
||||||
|
container: 'p',
|
||||||
|
extra_class: 'list-hide',
|
||||||
|
origin: 'productitem'
|
||||||
|
-%}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if show_price -%}
|
||||||
|
<p class="price s1pr yagi">
|
||||||
|
{%- liquid
|
||||||
|
comment
|
||||||
|
start Yagi app code
|
||||||
|
endcomment
|
||||||
|
assign product_price_min = product.price_min
|
||||||
|
assign product_price_max = product.price_max
|
||||||
|
assign current_variant_price = current_variant.price
|
||||||
|
assign current_variant_compare_at_price = current_variant_compare_at_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
|
||||||
|
assign current_variant_compare_at_price = current_variant.compare_at_price
|
||||||
|
|
||||||
|
assign product_price_min = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price_min
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
if current_variant_price < current_variant.price and current_variant_compare_at_price == 0 or current_variant_compare_at_price == blank
|
||||||
|
assign current_variant_compare_at_price = current_variant.price
|
||||||
|
endif
|
||||||
|
|
||||||
|
if layout == 'list-compact'
|
||||||
|
assign price = current_variant_price | money
|
||||||
|
else
|
||||||
|
assign price = product_price_min | money
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
|
||||||
|
assign price_min = product_price_min | money
|
||||||
|
assign price_max = product_price_max | money
|
||||||
|
|
||||||
|
comment
|
||||||
|
end Yagi app code
|
||||||
|
endcomment
|
||||||
|
-%}
|
||||||
|
|
||||||
|
{%- if product.price_varies and settings.show_price_varies and layout != 'list-compact' -%}
|
||||||
|
|
||||||
|
{{ price_min -}}
|
||||||
|
<span class="price-varies"> - {{ price_max }}</span>
|
||||||
|
{%- else -%}
|
||||||
|
{%- if current_variant_compare_at_price > current_variant_price -%}
|
||||||
|
<span class="old-price">{{ current_variant_compare_at_price | money }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{{ price }}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if current_variant.unit_price_measurement -%}
|
||||||
|
<span class="small">
|
||||||
|
{{ 'product.unit_price_label' | t }} {{ current_variant.unit_price | unit_price_with_measurement: current_variant.unit_price_measurement }}
|
||||||
|
</span>
|
||||||
|
{%- endif -%}
|
||||||
|
</p>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if quick_buy
|
||||||
|
and layout != 'list-compact'
|
||||||
|
and settings.layout_productcard != 'standard'
|
||||||
|
and layout != 'list'
|
||||||
|
-%}
|
||||||
|
<div class="product-card-add-to-cart">
|
||||||
|
{{ quick_buy | replace: '-quick-add-form_x', '1' }}
|
||||||
|
</div>
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
|
||||||
|
{%- if color_picker and static_color_picker -%}
|
||||||
|
{{ color_picker }}
|
||||||
|
{%- endif -%}
|
||||||
|
{% if layout == 'list-compact' %}
|
||||||
|
<section>
|
||||||
|
{% elsif settings.layout_productcard != 'variant_picker' %}
|
||||||
|
<div class="static">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if quick_buy %}
|
||||||
|
{% if layout == 'hotspot' or layout == 'list' or layout == 'grid' %}
|
||||||
|
{{ quick_buy | replace: '-quick-add-form_x', '1' }}
|
||||||
|
{% endif %}
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% comment %}
|
||||||
|
{%- if quick_buy and settings.layout_productcard != 'variant_picker' -%}
|
||||||
|
{% if layout == 'list-compact' %}<footer>{% endif %}
|
||||||
|
{{ quick_buy | replace: '-quick-add-form_x', '2' }}
|
||||||
|
{% if layout == 'list-compact' %}</footer>{% endif %}
|
||||||
|
{%- endif -%}
|
||||||
|
{% endcomment %}
|
||||||
|
{%- if quick_buy and layout == 'list-compact' -%}
|
||||||
|
<footer>
|
||||||
|
{{ quick_buy | replace: '-quick-add-form_x', '2' }}
|
||||||
|
</footer>
|
||||||
|
{%- endif -%}
|
||||||
|
{% if layout == 'list-compact' %}
|
||||||
|
</section>
|
||||||
|
{% elsif settings.layout_productcard != 'variant_picker' %}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</{{ container }}>
|
||||||
|
|
||||||
@@ -0,0 +1,91 @@
|
|||||||
|
{%- liquid
|
||||||
|
assign current_variant = product.selected_or_first_available_variant
|
||||||
|
assign custom_label_namespace = settings.product_custom_label | split: '.' | first
|
||||||
|
assign custom_label_key = settings.product_custom_label | split: '.' | last
|
||||||
|
assign custom_label = product.metafields[custom_label_namespace][custom_label_key]
|
||||||
|
assign total_stock = 0
|
||||||
|
|
||||||
|
comment
|
||||||
|
start Yagi app code
|
||||||
|
endcomment
|
||||||
|
assign current_variant_price = current_variant.price
|
||||||
|
assign current_variant_compare_at_price = current_variant.compare_at_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
|
||||||
|
assign current_variant_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 current_variant_price = current_variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||||
|
endif
|
||||||
|
|
||||||
|
if current_variant_price < current_variant.price and current_variant_compare_at_price == 0 or current_variant_compare_at_price == blank
|
||||||
|
assign current_variant_compare_at_price = current_variant.price
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
|
||||||
|
comment
|
||||||
|
end Yagi app code
|
||||||
|
endcomment
|
||||||
|
|
||||||
|
if origin == 'productitem'
|
||||||
|
for variant in product.variants
|
||||||
|
if variant.matched and variant.inventory_quantity > 0
|
||||||
|
assign total_stock = total_stock | plus: variant.inventory_quantity
|
||||||
|
endif
|
||||||
|
endfor
|
||||||
|
endif
|
||||||
|
if total_stock == 0
|
||||||
|
assign total_stock = current_variant.inventory_quantity
|
||||||
|
endif
|
||||||
|
|
||||||
|
if current_variant_compare_at_price > current_variant_price and settings.show_sale_label
|
||||||
|
assign show_sale_label = true
|
||||||
|
if settings.sale_label_price == 'percentage'
|
||||||
|
assign discount = current_variant_compare_at_price | minus: current_variant_price | times: 100.0 | divided_by: current_variant_compare_at_price
|
||||||
|
if discount > 1
|
||||||
|
assign discount = discount | round
|
||||||
|
else
|
||||||
|
assign discount = discount | round: 1
|
||||||
|
endif
|
||||||
|
if discount == 100 and product.price != 0
|
||||||
|
assign discount = discount | minus: 0.1
|
||||||
|
endif
|
||||||
|
elsif settings.sale_label_price == 'amount'
|
||||||
|
assign discount = current_variant_compare_at_price | minus: current_variant_price | money
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
|
||||||
|
<span class="s1lb label plain">
|
||||||
|
{%- if show_sale_label -%}
|
||||||
|
<span class="overlay-sale">{{ 'product.sale_tag' | t }}{% if settings.sale_label_price == 'percentage' %} -{{ discount }}%{% elsif settings.sale_label_price == 'amount' %} -{{ discount }}{% endif %}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if settings.show_stock_label and total_stock > 0 and total_stock <= settings.stock_label_qty -%}
|
||||||
|
<span>{{ 'product.stock_tag' | t }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if settings.show_out_of_stock_label and total_stock <= 0 and current_variant.available == false -%}
|
||||||
|
<span>{{ 'product.not_in_stock_tag' | t }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if total_stock <= 0 and current_variant.inventory_management != nil and current_variant.inventory_policy == 'continue' and current_variant.available and current_variant.inventory_quantity <= 0 and settings.preorder -%}
|
||||||
|
<span class="overlay-preorder">{{ 'product.preorder_tag' | t }}</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- if custom_label != blank -%}
|
||||||
|
<span>{{ custom_label }}</span>
|
||||||
|
{%- endif %}
|
||||||
|
</span>
|
||||||
Reference in New Issue
Block a user