Add snippets/product-grid-item-3-sib-bottom-price.liquid
This commit is contained in:
683
snippets/product-grid-item-3-sib-bottom-price.liquid
Normal file
683
snippets/product-grid-item-3-sib-bottom-price.liquid
Normal file
@@ -0,0 +1,683 @@
|
||||
{% comment %}
|
||||
Renders list of products in grid layout
|
||||
|
||||
Accepts:
|
||||
- product: {Object} product (required)
|
||||
- animation_delay: {Int} animation timing for load
|
||||
- last_element: {Boolean} True when custom image is taking up the first slot for the collection
|
||||
and the loop is on the last element for the page.
|
||||
- index: element index in the loop
|
||||
- block_index: index of the block in Tab collections section
|
||||
- sizes: Image sizes
|
||||
|
||||
Usage:
|
||||
{% render 'product-grid-item', product: product, index: index, sizes: image_sizes %}
|
||||
{% endcomment %}
|
||||
|
||||
{%- liquid
|
||||
assign animation_delay = animation_delay | default: 0
|
||||
assign aos_delay_default = animation_delay | times: 100
|
||||
assign aos_delay = aos_delay | default: aos_delay_default
|
||||
assign aos_duration = 800
|
||||
assign layout_desktop = section.settings.layout_desktop
|
||||
assign layout_mobile = section.settings.layout_mobile
|
||||
assign min_defer_index = 8
|
||||
assign defer = false
|
||||
assign index = index | default: 1
|
||||
|
||||
if index > min_defer_index
|
||||
if layout_desktop == 'slider' or layout_mobile == 'slider'
|
||||
assign defer = true
|
||||
endif
|
||||
endif
|
||||
|
||||
|
||||
assign columns_desktop = section.settings.grid | plus: 0
|
||||
assign columns_medium = 2
|
||||
assign columns_small = 2
|
||||
assign columns_mobile = section.settings.grid_mobile | plus: 0
|
||||
|
||||
if columns_desktop == 0
|
||||
assign columns_desktop = 4
|
||||
endif
|
||||
|
||||
if columns_mobile == 0
|
||||
assign columns_mobile = 1
|
||||
endif
|
||||
|
||||
if columns_desktop == 2 or columns_desktop == 4
|
||||
assign columns_medium = 2
|
||||
endif
|
||||
|
||||
if settings.product_grid_center
|
||||
assign alignment_class = 'product-item--centered'
|
||||
else
|
||||
assign alignment_class = 'product-item--left'
|
||||
endif
|
||||
|
||||
assign overlay_text_class = 'product-item--outer-text'
|
||||
if settings.overlay_text
|
||||
assign overlay_text_class = 'product-item--overlay-text'
|
||||
endif
|
||||
|
||||
assign quickview_class = ''
|
||||
if settings.quickview_enable and product.first_available_variant
|
||||
assign quickview_class = 'product-item--has-quickbuy'
|
||||
endif
|
||||
|
||||
assign has_siblings = false
|
||||
if settings.show_siblings and product.metafields.theme.siblings.value != blank and product.metafields.theme.siblings.type == 'single_line_text_field'
|
||||
assign has_siblings = true
|
||||
endif
|
||||
|
||||
if settings.show_siblings and product.metafields.theme.sibling_products != blank and product.metafields.theme.sibling_products.type == 'list.product_reference'
|
||||
assign has_siblings = true
|
||||
endif
|
||||
|
||||
if sizes == blank
|
||||
if section.settings.width == 'wrapper'
|
||||
if settings.grid_style == 'compact'
|
||||
assign sizes = '(min-width: 1400px) calc(80vw / ' | append: columns_desktop | append: '), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: '), (min-width: 480px) calc(100vw / ' | append: columns_small | append: '), calc(100vw / ' | append: columns_mobile | append: ')'
|
||||
else
|
||||
assign sizes = '(min-width: 1400px) calc((80vw - 64px) / ' | append: columns_desktop | append: ' - 32px), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: ' - 22px), (min-width: 480px) calc(100vw / ' | append: columns_small | append: ' - 16px), calc(100vw / ' | append: columns_mobile | append: ')'
|
||||
endif
|
||||
else
|
||||
if settings.grid_style == 'compact'
|
||||
assign sizes = '(min-width: 1400px) calc(100vw / ' | append: columns_desktop | append: '), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: '), (min-width: 480px) calc(100vw / ' | append: columns_small | append: '), calc(100vw / ' | append: columns_mobile | append: ')'
|
||||
else
|
||||
assign sizes = '(min-width: 1400px) calc(100vw / ' | append: columns_desktop | append: ' - 32px), (min-width: 750px) calc(100vw / ' | append: columns_medium | append: ' - 22px), (min-width: 480px) calc(100vw / ' | append: columns_small | append: ' - 16px), calc(100vw / ' | append: columns_mobile | append: ')'
|
||||
endif
|
||||
endif
|
||||
endif
|
||||
|
||||
assign widths = '136, 160, 180, 220, 254, 284, 292, 320, 480, 528, 640, 720, 960, 1080, 1296, 1512, 1728, 1950'
|
||||
assign aspect_ratio = 1 | divided_by: settings.product_grid_aspect_ratio
|
||||
|
||||
assign loading = 'eager'
|
||||
if columns_desktop <= 3
|
||||
assign eager_images_limit = columns_desktop
|
||||
else
|
||||
assign eager_images_limit = columns_desktop | times: 2
|
||||
endif
|
||||
|
||||
if layout_desktop == 'slider' and index > 3
|
||||
assign loading = 'lazy'
|
||||
elsif index > eager_images_limit
|
||||
assign loading = 'lazy'
|
||||
endif
|
||||
|
||||
if block_index > 1
|
||||
assign loading = 'lazy'
|
||||
endif
|
||||
-%}
|
||||
|
||||
{%- if settings.color_swatches -%}
|
||||
{%- assign has_colors = false -%}
|
||||
|
||||
{%- capture swatches -%}
|
||||
{%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%}
|
||||
|
||||
{%- assign swatch_labels = swatch_translation | append: ',' | split: ',' -%}
|
||||
{%- for label in swatch_labels -%}
|
||||
{%- assign sanitized_label = label | lstrip | rstrip -%}
|
||||
{%- if product.options_by_name[sanitized_label].values.size > 0 -%}
|
||||
{%- assign has_colors = true -%}
|
||||
{%- capture swatch_values -%}
|
||||
{%- for value in product.options_by_name[sanitized_label].values -%}
|
||||
{{- value -}}: {{- value | handle -}}
|
||||
{%- unless forloop.last -%}, {%- endunless -%}
|
||||
{%- endfor -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
<form class="radio__fieldset radio__fieldset--swatches radio__fieldset--pgi" data-grid-swatch-form data-fieldset>
|
||||
<grid-swatch class="selector-wrapper__scrollbar" data-scrollbar data-swatch-handle="{{ product.handle }}" data-swatch-label="{{ label }}" data-swatch-values="{{ swatch_values | strip_html | escape }}"></grid-swatch>
|
||||
|
||||
<div class="selector-wrapper__actions">
|
||||
<button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--prev is-hidden" data-scrollbar-arrow-prev>
|
||||
{%- render 'icon-nav-arrow-left' -%}
|
||||
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--next is-hidden" data-scrollbar-arrow-next>
|
||||
{% render 'icon-nav-arrow-right' %}
|
||||
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endcapture -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- liquid
|
||||
assign double_img = false
|
||||
if product.media[1].preview_image and settings.image_hover_enable
|
||||
assign double_img = true
|
||||
endif
|
||||
|
||||
assign current_variant = product.first_available_variant
|
||||
assign product_url = product.url
|
||||
|
||||
capture item_unique
|
||||
echo 'product-item--' | append: section.id | append: '-' | append: product.id
|
||||
endcapture
|
||||
|
||||
assign aos_anchor_default = item_unique | prepend: '#'
|
||||
assign aos_anchor = aos_anchor | default: aos_anchor_default
|
||||
-%}
|
||||
|
||||
{%- if has_siblings -%}
|
||||
{%- liquid
|
||||
assign sibling_products = product.metafields.theme.sibling_products.value | default: collections[product.metafields.theme.siblings.value].products
|
||||
assign count = product.metafields.theme.sibling_products.value.count | default: collections[product.metafields.theme.siblings.value].products.size
|
||||
assign count_string_one = 'collections.general.colors_with_count.one' | t
|
||||
assign count_string_other = 'collections.general.colors_with_count.other' | t
|
||||
-%}
|
||||
|
||||
{%- if sibling_products != blank -%}
|
||||
{%- capture siblings_html -%}
|
||||
<product-siblings class="product-item__siblings product-item__swatches__holder product-item__swatches__holder--{{ settings.swatch_style }}">
|
||||
<div class="radio__fieldset radio__fieldset--swatches radio__fieldset--pgi" data-sibling-fieldset>
|
||||
<div class="selector-wrapper__scrollbar" data-sibling-inner data-scrollbar>
|
||||
{%- for sib_product in sibling_products limit: 50 -%}
|
||||
{%- liquid
|
||||
assign current_class = ''
|
||||
if sib_product.handle == product.handle
|
||||
assign current_class = ' sibling__link--current'
|
||||
endif
|
||||
|
||||
|
||||
assign sib_product_price_raw = sib_product.price
|
||||
assign sib_product_compare_at_price_raw = sib_product.compare_at_price
|
||||
|
||||
assign sib_product_price_raw = sib_product.metafields.app--168074346497.min_auto_discounted_price.value | default: sib_product.price
|
||||
|
||||
if sib_product.metafields.app--168074346497.discount_percentage.value > 0.01
|
||||
assign deducted_percentage = 1.0 | minus: sib_product.metafields.app--168074346497.discount_percentage.value
|
||||
|
||||
assign sib_product_price_raw = sib_product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
endif
|
||||
|
||||
if sib_product_price_raw < sib_product.price
|
||||
assign sib_product_compare_at_price_raw = sib_product.price
|
||||
|
||||
if sib_product.compare_at_price > sib_product_compare_at_price_raw
|
||||
assign sib_product_compare_at_price_raw = sib_product.compare_at_price
|
||||
endif
|
||||
endif
|
||||
|
||||
if settings.currency_code_enable
|
||||
assign sib_product_price = sib_product_price_raw | money_with_currency
|
||||
else
|
||||
assign sib_product_price = sib_product_price_raw | money
|
||||
endif
|
||||
|
||||
if sib_product_compare_at_price_raw > sib_product_price_raw
|
||||
if settings.currency_code_enable
|
||||
assign sib_product_compare_at_price = sib_product_compare_at_price_raw | money_with_currency
|
||||
else
|
||||
assign sib_product_compare_at_price = sib_product_compare_at_price_raw | money
|
||||
endif
|
||||
endif
|
||||
|
||||
if sib_product.price == 0 and sib_product.price_varies == false
|
||||
assign sib_product_price = 'general.money.free' | t
|
||||
endif
|
||||
|
||||
assign sib_cutline = sib_product.metafields.theme.cutline | strip_html | default: sib_product.title | strip_html
|
||||
assign sib_color = sib_product.metafields.theme.sibling_color.value | default: sib_product.metafields.theme.sibling_colour.value | default: sib_product.metafields.theme.siblings_color.value | default: sib_product.metafields.theme.siblings_colour.value | default: sib_product.metafields.theme.siblings_colors.value | default: sib_product.metafields.theme.siblings_colours.value
|
||||
assign swatch_color = sib_color | handle
|
||||
-%}
|
||||
|
||||
<div class="swatches swatch__button swatch__button--{{ settings.swatch_style }} swatch-{{ swatch_color }}"
|
||||
style="
|
||||
--animation-delay: {{ forloop.index0 | times: 50 }}ms;
|
||||
--swatch: var(--{{ swatch_color }});
|
||||
"
|
||||
data-tooltip="{{ sib_color }}"
|
||||
data-sibling-link="{{ sib_product.url }}"
|
||||
data-sibling-price="{{ sib_product_price | strip_html }}"
|
||||
data-sibling-compare-at-price="{{ sib_product_compare_at_price | strip_html }}"
|
||||
data-sibling-cutline="{{ sib_cutline }}"
|
||||
data-sibling-image="{{ sib_product.featured_media.preview_image.src | image_url }}"
|
||||
tabindex="0">
|
||||
<div class="sibling__link{{ current_class }}">
|
||||
{%- if settings.sibling_style == 'image' -%}
|
||||
{%- liquid
|
||||
case settings.swatch_size
|
||||
when 'regular'
|
||||
assign sibling_width = 1.15 | times: settings.type_body_size | divided_by: 100.0 | times: 16 | round
|
||||
when 'large'
|
||||
assign sibling_width = 2.3 | times: settings.type_body_size | divided_by: 100.0 | times: 16 | round
|
||||
endcase
|
||||
|
||||
assign sibling_sizes = sibling_width | append: 'px'
|
||||
assign sibling_width_15x = sibling_width | times: 1.5
|
||||
assign sibling_width_2x = sibling_width | times: 2
|
||||
assign sibling_widths = sibling_width | append: ', ' | append: sibling_width_15x | append: ', ' | append: sibling_width_2x
|
||||
-%}
|
||||
|
||||
<deferred-image>
|
||||
<template>
|
||||
{%- render 'image', image: sib_product.featured_media.preview_image, width: sibling_width_2x, height: sibling_width_2x, widths: sibling_widths, sizes: sibling_sizes, aspect_ratio: 1 -%}
|
||||
</template>
|
||||
</deferred-image>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
<div class="selector-wrapper__actions">
|
||||
<button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--prev is-hidden" data-scrollbar-arrow-prev>
|
||||
{%- render 'icon-nav-arrow-left' -%}
|
||||
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
|
||||
</button>
|
||||
|
||||
<button type="button" class="radio__fieldset__arrow radio__fieldset__arrow--next is-hidden" data-scrollbar-arrow-next>
|
||||
{% render 'icon-nav-arrow-right' %}
|
||||
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="product-item__swatches__count">
|
||||
<span data-sibling-count>{{ count }} {{ count | pluralize: count_string_one, count_string_other }}</span>
|
||||
</span>
|
||||
</product-siblings>
|
||||
{%- endcapture -%}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{%- capture over_image_content -%}
|
||||
{%- liquid
|
||||
assign product_tags = product.tags | join: ',' | append: ','
|
||||
assign preorder = false
|
||||
assign is_preorder_meta = false
|
||||
assign on_sale = false
|
||||
assign sold_out = false
|
||||
assign badge = ''
|
||||
|
||||
if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field'
|
||||
assign badge = product.metafields.theme.badge.value
|
||||
endif
|
||||
|
||||
if badge == '' and product_tags contains '_badge_'
|
||||
assign badge = product_tags | split: '_badge_'
|
||||
assign badge = badge[1] | split: ',' | first | replace: '_', ' '
|
||||
endif
|
||||
|
||||
if product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true
|
||||
assign is_preorder_meta = true
|
||||
endif
|
||||
|
||||
if product_tags contains '_preorder' or is_preorder_meta
|
||||
assign preorder = true
|
||||
endif
|
||||
|
||||
if product.compare_at_price > product.price and settings.sale_tags_enable
|
||||
assign on_sale = true
|
||||
endif
|
||||
|
||||
unless product.available
|
||||
assign sold_out = true
|
||||
endunless
|
||||
-%}
|
||||
|
||||
{%- if badge != '' -%}
|
||||
<span class="badge-box"
|
||||
data-aos="fade"
|
||||
data-aos-delay="{{ aos_delay }}"
|
||||
data-aos-duration="{{ aos_duration }}"
|
||||
data-aos-anchor="{{ aos_anchor }}">{{ badge }}</span>
|
||||
{%- elsif preorder and sold_out == false -%}
|
||||
<span class="preorder-box"
|
||||
data-aos="fade"
|
||||
data-aos-delay="{{ aos_delay }}"
|
||||
data-aos-duration="{{ aos_duration }}"
|
||||
data-aos-anchor="{{ aos_anchor }}">{{ 'products.product.pre_order' | t }}</span>
|
||||
{%- elsif on_sale and sold_out == false -%}
|
||||
<span class="sale-box"
|
||||
data-aos="fade"
|
||||
data-aos-delay="{{ aos_delay }}"
|
||||
data-aos-duration="{{ aos_duration }}"
|
||||
data-aos-anchor="{{ aos_anchor }}">{{ 'products.product.on_sale' | t }}</span>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if settings.quickview_enable and current_variant -%}
|
||||
{%- liquid
|
||||
assign is_preorder_meta_exist = false
|
||||
assign is_preorder_tag_exist = false
|
||||
assign sibling_property_name = 'general.siblings.label' | t | strip_html | escape
|
||||
assign sibling_property_value = ''
|
||||
|
||||
if siblings_html != blank and product.variants.size == 1
|
||||
assign title_down = product.title | downcase
|
||||
assign sibling = product.metafields.theme.sibling_color.value | default: product.metafields.theme.sibling_colour.value | default: product.metafields.theme.siblings_color.value | default: product.metafields.theme.siblings_colour.value | default: product.metafields.theme.siblings_colors.value | default: product.metafields.theme.siblings_colours.value
|
||||
assign sibling_down = sibling | downcase
|
||||
unless title_down contains sibling_down
|
||||
assign sibling_property_value = sibling | strip_html | escape
|
||||
endunless
|
||||
endif
|
||||
|
||||
if current_variant.available and product.metafields.theme.preorder.type == 'boolean' and product.metafields.theme.preorder.value == true
|
||||
assign is_preorder_meta_exist = true
|
||||
endif
|
||||
|
||||
if current_variant.available and product.tags contains '_preorder'
|
||||
assign is_preorder_tag_exist = true
|
||||
endif
|
||||
|
||||
if is_preorder_meta_exist or is_preorder_tag_exist
|
||||
assign preorder_name = 'products.product.sale_type' | t | strip_html | escape
|
||||
assign preorder_value = 'products.product.pre_order' | t | strip_html | escape
|
||||
endif
|
||||
|
||||
assign unique = section.id | append: '-' | append: product.id
|
||||
-%}
|
||||
|
||||
<quick-add-product>
|
||||
<div class="quick-add__holder" data-quick-add-holder="{{ product.id }}">
|
||||
{%- if product.variants.size == 1 -%}
|
||||
{%- assign product_form_id = 'ProductForm--' | append: unique -%}
|
||||
{%- form 'product', product, id: product_form_id -%}
|
||||
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
|
||||
|
||||
{%- if sibling_property_value != blank -%}
|
||||
<input
|
||||
type="hidden"
|
||||
name="properties[{{ sibling_property_name }}]"
|
||||
value="{{ sibling_property_value }}">
|
||||
{%- endif -%}
|
||||
|
||||
{%- if preorder_value != blank -%}
|
||||
<input
|
||||
type="hidden"
|
||||
name="properties[{{ preorder_name }}]"
|
||||
value="{{ preorder_value }}">
|
||||
{%- endif -%}
|
||||
|
||||
<button class="quick-add__button caps"
|
||||
type="submit"
|
||||
name="add"
|
||||
aria-label="{{ 'products.general.quick_add' | t }}"
|
||||
data-add-to-cart
|
||||
>
|
||||
<span class="btn__text">{{ 'products.general.quick_add' | t }}</span>
|
||||
<span class="btn__plus"></span>
|
||||
<span class="btn__added"> </span>
|
||||
<span class="btn__loader">
|
||||
<svg height="18" width="18" class="svg-loader">
|
||||
<circle r="7" cx="9" cy="9" />
|
||||
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="btn__error" data-message-error> </span>
|
||||
</button>
|
||||
{%- endform -%}
|
||||
{%- else -%}
|
||||
<button class="quick-add__button caps"
|
||||
type="button"
|
||||
aria-label="{{ 'products.general.quick_add' | t }}"
|
||||
data-quick-add-btn
|
||||
data-quick-add-modal-handle="{{ product.handle }}"
|
||||
>
|
||||
<span class="btn__text">{{ 'products.general.quick_add' | t }}</span>
|
||||
<span class="btn__plus"></span>
|
||||
<span class="btn__added"> </span>
|
||||
<span class="btn__loader">
|
||||
<svg height="18" width="18" class="svg-loader">
|
||||
<circle r="7" cx="9" cy="9" />
|
||||
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
{%- endif -%}
|
||||
|
||||
{%- unless product.has_only_default_variant -%}
|
||||
{%- render 'product-quick-add-modal-template', product_id: product.id, unique: unique -%}
|
||||
{%- endunless -%}
|
||||
</div>
|
||||
</quick-add-product>
|
||||
{%- endif -%}
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- liquid
|
||||
capture product_item_cutline
|
||||
if settings.show_cutline and product.metafields.theme.cutline != blank and product.metafields.theme.cutline.type == 'single_line_text_field'
|
||||
assign product_title_downcase = product.title | strip_html | escape | downcase
|
||||
assign cutline_downcase = product.metafields.theme.cutline.value | downcase
|
||||
|
||||
unless product_title_downcase contains cutline_downcase
|
||||
echo product.metafields.theme.cutline.value
|
||||
endunless
|
||||
endif
|
||||
endcapture
|
||||
-%}
|
||||
|
||||
{%- capture image_animations -%}
|
||||
data-aos="img-in"
|
||||
data-aos-delay="{{ aos_delay }}"
|
||||
data-aos-duration="{{ aos_duration }}"
|
||||
data-aos-anchor="{{ aos_anchor }}"
|
||||
data-aos-easing="ease-out-quart"
|
||||
{%- endcapture -%}
|
||||
|
||||
<div class="grid-item product-item {{ alignment_class }} {{ overlay_text_class }} {{ quickview_class }}"
|
||||
id="{{ item_unique }}"
|
||||
style="--swatch-size: var(--swatch-size-filters);"
|
||||
data-grid-item
|
||||
>
|
||||
<div class="product-item__image{% if double_img %} double__image{% endif %}" data-product-image>
|
||||
<a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-product-link="{{ product_url }}">
|
||||
{%- if product.media.size > 0 -%}
|
||||
<div class="product-item__bg" data-product-image-default>
|
||||
{%- liquid
|
||||
assign fetchpriority = 'auto'
|
||||
assign preload = false
|
||||
if index <= eager_images_limit
|
||||
assign fetchpriority = 'high'
|
||||
assign preload = true
|
||||
endif
|
||||
|
||||
capture featured_image
|
||||
render 'image' image: product.featured_media.preview_image, aspect_ratio: aspect_ratio, sizes: sizes, widths: widths, loading: loading, fetchpriority: fetchpriority, preload: preload, attributes: image_animations, cover: true
|
||||
endcapture
|
||||
-%}
|
||||
|
||||
{%- if defer -%}
|
||||
<deferred-image>
|
||||
<template>
|
||||
{{ featured_image }}
|
||||
</template>
|
||||
</deferred-image>
|
||||
{%- else -%}
|
||||
{{ featured_image }}
|
||||
{%- endif -%}
|
||||
|
||||
{%- if settings.color_swatches and current_variant -%}
|
||||
{%- assign image_inner_empty = true -%}
|
||||
{%- for variant in product.variants -%}
|
||||
{%- if variant.featured_image != blank -%}
|
||||
{%- assign image_inner_empty = false -%}
|
||||
{%- assign variant_title = variant.title | replace: '"', "'" -%}
|
||||
<deferred-image class="product-item__bg__inner" data-variant-title="{{ variant_title }}">
|
||||
<template>
|
||||
{%- render 'image' image: variant.featured_image, aspect_ratio: aspect_ratio, sizes: sizes, widths: widths, cover: true -%}
|
||||
</template>
|
||||
</deferred-image>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- if image_inner_empty -%}
|
||||
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- if double_img -%}
|
||||
{%- assign media = product.media[1] -%}
|
||||
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
|
||||
<deferred-media class="product-item__bg__under deferred-media">
|
||||
<template>
|
||||
{%- liquid
|
||||
case media.media_type
|
||||
when 'video'
|
||||
echo media | media_tag: image_size: '1024x1024', class: 'media-video', autoplay: true, loop: true, controls: false, preload: 'none', muted: true
|
||||
when 'external_video'
|
||||
if media.host == 'youtube'
|
||||
echo media | external_video_url: autoplay: true, playsinline: true, loop: true, playlist: media.external_id, controls: false, mute: true, showinfo: false | external_video_tag: loading: 'lazy', data-host: media.host
|
||||
else
|
||||
echo media | external_video_url: autoplay: true, playsinline: true, loop: true, controls: false, muted: true | external_video_tag: data-host: media.host
|
||||
endif
|
||||
endcase
|
||||
-%}
|
||||
</template>
|
||||
</deferred-media>
|
||||
{%- else -%}
|
||||
<deferred-image class="product-item__bg__under">
|
||||
<template>
|
||||
{%- render 'image' image: product.media[1].preview_image, aspect_ratio: aspect_ratio, sizes: sizes, widths: widths, cover: true -%}
|
||||
</template>
|
||||
</deferred-image>
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{%- comment -%} Show Empty image if product has no media {%- endcomment -%}
|
||||
<div class="product-item__bg image--empty" data-product-image-default></div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if has_siblings -%}
|
||||
<div class="product-item__bg__sibling" data-product-image-sibling></div>
|
||||
{%- endif -%}
|
||||
</a>
|
||||
|
||||
{{ over_image_content }}
|
||||
</div>
|
||||
|
||||
<div class="product-information" data-product-information>
|
||||
<div class="product-item__info">
|
||||
<a class="product-link" href="{{ product_url }}" data-product-link="{{ product_url }}">
|
||||
{%- if settings.product_grid_show_rating and product.metafields.reviews.rating.value != blank -%}
|
||||
<div class="product-item__stars">
|
||||
{% render 'product-rating', product: product %}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
<p class="product-item__title">{{ product.title | strip_html | escape }}</p>
|
||||
|
||||
<div class="product-item__price__holder{% if has_siblings %} has-siblings{% endif %}">
|
||||
{%- if has_siblings or product_item_cutline != blank -%}
|
||||
{%- assign cutline_color = settings.cutline_color -%}
|
||||
|
||||
{%- unless cutline_color == 'rgba(0,0,0,0)' or cutline_color == blank -%}
|
||||
{%- assign style = '--text-light:' | append: cutline_color -%}
|
||||
{%- endunless -%}
|
||||
|
||||
<span class="product-item__cutline"
|
||||
data-product-cutline
|
||||
{% if style != blank %}
|
||||
style="{{ style }}"
|
||||
{% endif %}
|
||||
>{{ product_item_cutline }}</span>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if has_siblings -%}
|
||||
<span class="product-item__sep">—</span>
|
||||
{%- endif -%}
|
||||
|
||||
<div class="product-item__price" data-product-price>
|
||||
{% comment %} Price on product grid item {% endcomment %}
|
||||
|
||||
{%- liquid
|
||||
|
||||
assign product_price_raw = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||||
assign product_price_min_raw = product.price_min
|
||||
assign product_compare_at_price_raw = product.compare_at_price
|
||||
|
||||
if product.metafields.app--168074346497.discount_percentage.value > 0.01
|
||||
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
||||
|
||||
assign product_price_raw = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
||||
assign product_price_min_raw = product_price_raw
|
||||
|
||||
assign product_compare_at_price_raw = product.price
|
||||
|
||||
if product.compare_at_price > product_compare_at_price_raw
|
||||
assign product_compare_at_price_raw = product.compare_at_price
|
||||
endif
|
||||
elsif product_price_raw < product.price
|
||||
assign product_price_min_raw = product_price_raw
|
||||
assign product_compare_at_price_raw = product.price
|
||||
|
||||
if product.compare_at_price > product_compare_at_price_raw
|
||||
assign product_compare_at_price_raw = product.compare_at_price
|
||||
endif
|
||||
endif
|
||||
|
||||
if settings.currency_code_enable
|
||||
assign product_price_min = product_price_min_raw | money_with_currency
|
||||
assign product_compare_at_price = product_compare_at_price_raw | money_with_currency
|
||||
else
|
||||
assign product_price_min = product_price_min_raw | money
|
||||
assign product_compare_at_price = product_compare_at_price_raw | money
|
||||
endif
|
||||
-%}
|
||||
|
||||
<span class="price{% if product_compare_at_price > product_price %} sale{% endif %}">
|
||||
{% if product.available %}
|
||||
<span class="new-price">
|
||||
{% if product.price_varies %}
|
||||
<small>{{ 'products.general.from' | t }}</small>
|
||||
{% endif %}
|
||||
{%- if product_price == 0 and product.price_varies == false -%}
|
||||
{{ 'general.money.free' | t }}
|
||||
{%- else -%}
|
||||
{{ product_price_min }}
|
||||
{%- endif -%}
|
||||
</span>
|
||||
{% if product_compare_at_price > product_price %}
|
||||
<span class="old-price">{{ product_compare_at_price }}</span>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<span class="sold-out">{{ 'products.product.sold_out' | t }}</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% if current_variant.unit_price %}
|
||||
{% capture unit_price_separator %}
|
||||
<span aria-hidden="true">/</span>
|
||||
<span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
|
||||
{% endcapture %}
|
||||
{% capture unit_price_base_unit %}
|
||||
{% if current_variant.unit_price_measurement.reference_value != 1 %}
|
||||
{{ current_variant.unit_price_measurement.reference_value }}
|
||||
{% endif %}
|
||||
{{ current_variant.unit_price_measurement.reference_unit }}
|
||||
{% endcapture %}
|
||||
<br>
|
||||
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
|
||||
<span class="unit small">{% if settings.currency_code_enable %}{{ current_variant.unit_price | money_with_currency }}{% else %}{{ current_variant.unit_price | money }}{% endif %}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
{%- if siblings_html != blank -%}
|
||||
{{ siblings_html }}
|
||||
{%- elsif has_colors -%}
|
||||
<div class="product-item__swatches__holder product-item__swatches__holder--{{ settings.swatch_style }}">
|
||||
{{ swatches }}
|
||||
|
||||
{%- if has_colors -%}
|
||||
<span class="product-item__swatches__count">
|
||||
<span data-swatch-count> </span>
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user