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