616 lines
25 KiB
Plaintext
616 lines
25 KiB
Plaintext
|
{%- comment -%}
|
||
|
|
Renders list of products in grid layout
|
||
|
|
|
||
|
|
Accepts:
|
||
|
|
- product: {Object} product (required)
|
||
|
|
- carousel: {Boolean} Show the product images in carousel. Default: false
|
||
|
|
- image_animation: {String} Type of the image animation
|
||
|
|
- text_animation: {String} Type of the text animation
|
||
|
|
- animation_delay: {Number} Factor based on grid items per row
|
||
|
|
- animation_anchor: {String} Hook for the AOS animation
|
||
|
|
- image_aspect_ratio_setting: {String} image aspect ratio setting from section settings
|
||
|
|
|
||
|
|
Usage:
|
||
|
|
{% render 'product-grid-item', product: product, carousel: carousel, animation: animation, animation_delay: animation_delay, image_aspect_ratio_setting: image_aspect_ratio_setting %}
|
||
|
|
{%- endcomment -%}
|
||
|
|
|
||
|
|
{%- liquid
|
||
|
|
assign columns = columns | default: settings.products_per_row_on_desktop | plus: 0
|
||
|
|
assign columns_mobile = columns_mobile | default: settings.products_per_row_on_mobile | plus: 0
|
||
|
|
|
||
|
|
assign counter_even = mobile_counter | modulo: 2
|
||
|
|
assign counter_second_tablet = tablet_counter | plus: 1 | modulo: 3
|
||
|
|
assign counter_third_tablet = tablet_counter | modulo: 3
|
||
|
|
|
||
|
|
assign grid_item_class = ''
|
||
|
|
if counter_even == 0
|
||
|
|
assign grid_item_class = grid_item_class | append: ' grid-item--even'
|
||
|
|
endif
|
||
|
|
if columns > 2
|
||
|
|
if counter_second_tablet == 0
|
||
|
|
assign grid_item_class = grid_item_class | append: ' grid-item--second-tablet'
|
||
|
|
elsif counter_third_tablet == 0
|
||
|
|
assign grid_item_class = grid_item_class | append: ' grid-item--third-tablet'
|
||
|
|
endif
|
||
|
|
endif
|
||
|
|
|
||
|
|
case columns
|
||
|
|
when 1
|
||
|
|
assign size_desktop = 'one-whole'
|
||
|
|
when 2
|
||
|
|
assign size_desktop = 'one-half'
|
||
|
|
when 3
|
||
|
|
assign size_desktop = 'one-third'
|
||
|
|
when 4
|
||
|
|
assign size_desktop = 'one-quarter'
|
||
|
|
endcase
|
||
|
|
|
||
|
|
case columns_mobile
|
||
|
|
when 1
|
||
|
|
assign size_mobile = 'mobile--one-whole'
|
||
|
|
when 2
|
||
|
|
assign size_mobile = 'mobile--one-half'
|
||
|
|
endcase
|
||
|
|
|
||
|
|
if carousel
|
||
|
|
assign size_mobile = 'mobile--one-whole'
|
||
|
|
assign tabindex_hidden = true
|
||
|
|
endif
|
||
|
|
|
||
|
|
assign on_sale = false
|
||
|
|
assign sold_out = false
|
||
|
|
assign custom_badge_metafield = false
|
||
|
|
|
||
|
|
assign single_variant = false
|
||
|
|
if product.variants.size == 1 and product.selling_plan_groups.size == 0
|
||
|
|
assign single_variant = true
|
||
|
|
endif
|
||
|
|
|
||
|
|
if product.metafields.theme.badge != blank and product.metafields.theme.badge.type == 'single_line_text_field'
|
||
|
|
assign custom_badge_metafield = true
|
||
|
|
assign custom_badge_metafield_text = product.metafields.theme.badge.value
|
||
|
|
endif
|
||
|
|
|
||
|
|
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
||
|
|
assign product_compare_at_price = product.compare_at_price
|
||
|
|
|
||
|
|
if product_price < product.price and product_compare_at_price == 0 or product_compare_at_price == blank
|
||
|
|
assign product_compare_at_price = product.price
|
||
|
|
endif
|
||
|
|
|
||
|
|
if product_compare_at_price > product_price
|
||
|
|
assign on_sale = true
|
||
|
|
endif
|
||
|
|
|
||
|
|
assign money_product_price = product_price | money
|
||
|
|
|
||
|
|
if settings.currency_code_enable
|
||
|
|
assign money_product_price = product_price | money_with_currency
|
||
|
|
endif
|
||
|
|
|
||
|
|
unless product.available
|
||
|
|
assign sold_out = true
|
||
|
|
endunless
|
||
|
|
|
||
|
|
assign quick_buy = settings.quick_buy
|
||
|
|
assign current_variant = product.selected_or_first_available_variant
|
||
|
|
assign featured_media = product.featured_media
|
||
|
|
assign product_grid_hover = settings.product_grid_hover
|
||
|
|
assign product_grid_hover_animation = settings.product_grid_hover_animation
|
||
|
|
if product.media.size <= 1 or product_grid_hover == 'none'
|
||
|
|
assign product_grid_hover = false
|
||
|
|
endif
|
||
|
|
|
||
|
|
capture item_unique
|
||
|
|
echo 'product-item--' | append: section.id | append: '-' | append: product.id
|
||
|
|
endcapture
|
||
|
|
|
||
|
|
assign animations_enabled = settings.animations_enabled
|
||
|
|
assign image_animation = image_animation | default: 'zoom-out'
|
||
|
|
assign animation_anchor_default = item_unique | prepend: '#'
|
||
|
|
assign animation_anchor = animation_anchor | default: animation_anchor_default
|
||
|
|
assign text_animation = text_animation | default: 'fade'
|
||
|
|
|
||
|
|
assign currency_code_enable = settings.currency_code_enable
|
||
|
|
|
||
|
|
assign alignment_inline = false
|
||
|
|
assign product_alignment_class = ' product-grid-item__info--' | append: settings.content_alignment
|
||
|
|
|
||
|
|
if settings.content_alignment == 'inline'
|
||
|
|
assign alignment_inline = true
|
||
|
|
endif
|
||
|
|
|
||
|
|
assign has_colors = false
|
||
|
|
|
||
|
|
if settings.enable_color_swatches_collection and product.has_only_default_variant == false
|
||
|
|
capture swatch_translation
|
||
|
|
echo 'general.swatches.color' | t
|
||
|
|
endcapture
|
||
|
|
|
||
|
|
assign swatch_labels = swatch_translation | remove: ' ' | replace: ', ', ',' | replace: ' ,', ',' | split: ','
|
||
|
|
for label in swatch_labels
|
||
|
|
assign sanitized_label = label | strip
|
||
|
|
if product.options_by_name[sanitized_label].values.size > 0
|
||
|
|
assign color_label = label
|
||
|
|
assign has_colors = true
|
||
|
|
break
|
||
|
|
endif
|
||
|
|
endfor
|
||
|
|
endif
|
||
|
|
|
||
|
|
capture cart_icon
|
||
|
|
case settings.cart_icon
|
||
|
|
when 'bag'
|
||
|
|
render 'icon-shopping-bag'
|
||
|
|
when 'shopping_cart'
|
||
|
|
render 'icon-shopping-cart'
|
||
|
|
endcase
|
||
|
|
endcapture
|
||
|
|
-%}
|
||
|
|
|
||
|
|
{%- capture product_title -%}
|
||
|
|
<a class="product-grid-item__title" href="{{ product.url | within: collection }}" aria-label="{{ product.title | strip_html | escape }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
|
||
|
|
{{- product.title | strip_html | escape -}}
|
||
|
|
</a>
|
||
|
|
<!-- Start of Judge.me code -->
|
||
|
|
<div style='{{ jm_style }}' class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false'>
|
||
|
|
{{ product.metafields.judgeme.badge }}
|
||
|
|
</div>
|
||
|
|
<!-- End of Judge.me code -->
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
{%- capture info_separator -%}
|
||
|
|
<span class="product-grid-item__info-separator"></span>
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
{%- capture product_info_price -%}
|
||
|
|
<a class="product-grid-item__price price" href="{{ product.url | within: collection }}"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
|
||
|
|
{%- liquid
|
||
|
|
# product.price is equivalent to product.price_min
|
||
|
|
assign raw_product_price = product.metafields.app--168074346497.min_auto_discounted_price | default: product.price
|
||
|
|
|
||
|
|
if product.price == 0 and product.price_varies == false
|
||
|
|
assign product_price = 'products.product.free' | t
|
||
|
|
assign product_price_min = 'products.product.free' | t
|
||
|
|
elsif currency_code_enable
|
||
|
|
assign product_price = raw_product_price | money_with_currency
|
||
|
|
assign product_price_min = raw_product_price | money_with_currency
|
||
|
|
else
|
||
|
|
assign product_price = raw_product_price | money
|
||
|
|
assign product_price_min = raw_product_price | money
|
||
|
|
endif
|
||
|
|
-%}
|
||
|
|
|
||
|
|
{%- if product.price_varies -%}
|
||
|
|
{{- 'products.general.from_text_html' | t: price: product_price_min -}}
|
||
|
|
{%- else -%}
|
||
|
|
{%- if on_sale -%}
|
||
|
|
<span class="product-grid-item__price__new">{{ money_product_price }}</span>
|
||
|
|
|
||
|
|
<s>
|
||
|
|
{%- if currency_code_enable -%}
|
||
|
|
{{- product_compare_at_price | money_with_currency -}}
|
||
|
|
{%- else -%}
|
||
|
|
{{- product_compare_at_price | money -}}
|
||
|
|
{%- endif -%}
|
||
|
|
</s>
|
||
|
|
{%- else -%}
|
||
|
|
{{- product_price -}}
|
||
|
|
{%- endif -%}
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if current_variant.unit_price_measurement -%}
|
||
|
|
{%- capture unit_price_separator -%}
|
||
|
|
<span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
<span class="product__unit-price{% if current_variant.unit_price == 0 %} hidden{% endif %}">
|
||
|
|
{{ current_variant.unit_price | money }}
|
||
|
|
{{ unit_price_separator }}
|
||
|
|
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
|
||
|
|
{{- current_variant.unit_price_measurement.reference_value -}}
|
||
|
|
{%- endif -%}
|
||
|
|
{{ current_variant.unit_price_measurement.reference_unit }}
|
||
|
|
</span>
|
||
|
|
{%- endif -%}
|
||
|
|
</a>
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
<div class="product-grid-item {% if carousel %}carousel__item{% else %}grid__item{% endif %} {{ size_desktop }} {{ size_mobile }}{% if tag %} has-tag{% endif %}{% if sold_out %} soldout{% endif %}{{ grid_item_class }}"
|
||
|
|
{% if carousel %} data-slide{% endif %}
|
||
|
|
data-product-block
|
||
|
|
id="{{ item_unique }}">
|
||
|
|
{%- comment -%} Image {%- endcomment -%}
|
||
|
|
<div class="product-grid-item__image" data-product-media-container>
|
||
|
|
{%- liquid
|
||
|
|
assign grid_image_size = settings.image_size
|
||
|
|
assign image = featured_media.preview_image
|
||
|
|
assign image_aspect_ratio = image.aspect_ratio | default: 1
|
||
|
|
assign image_container_class = 'product__media__container'
|
||
|
|
if image_aspect_ratio_setting == blank
|
||
|
|
assign image_aspect_ratio_setting = settings.image_aspect_ratio
|
||
|
|
endif
|
||
|
|
|
||
|
|
if grid_image_size == 'contain'
|
||
|
|
assign container_aspect_ratio = 1 | divided_by: image_aspect_ratio_setting
|
||
|
|
|
||
|
|
if image_aspect_ratio < container_aspect_ratio
|
||
|
|
assign image_container_class = image_container_class | append: ' product__media__container--portrait'
|
||
|
|
else
|
||
|
|
assign image_container_class = image_container_class | append: ' product__media__container--landscape'
|
||
|
|
endif
|
||
|
|
endif
|
||
|
|
-%}
|
||
|
|
<div class="{{ image_container_class }}" style="--aspect-ratio: {{ image_aspect_ratio }};">
|
||
|
|
<a class="product__media__holder"
|
||
|
|
href="{{ product.url | within: collection }}"
|
||
|
|
aria-label="{{ product.title | strip_html | escape }}"
|
||
|
|
data-grid-link
|
||
|
|
{% if animations_enabled %}
|
||
|
|
data-aos="{{ image_animation }}"
|
||
|
|
data-aos-easing="ease"
|
||
|
|
data-aos-duration="1000"
|
||
|
|
{% if animation_anchor %}
|
||
|
|
data-aos-anchor="{{ animation_anchor }}"
|
||
|
|
{% endif %}
|
||
|
|
data-aos-delay="{{ animation_delay | times: 150 }}"
|
||
|
|
{% endif %}
|
||
|
|
{% if index > 1 %} tabindex="-1"{% endif %} >
|
||
|
|
{%- if product.media.size > 0 -%}
|
||
|
|
<div class="product__media__image{% if product_grid_hover %} product__media__image--hover-{{ product_grid_hover_animation }}{% endif %} lazy-image" style="background-image: url({{ image | img_url: '1x1' }});" data-product-media-featured>
|
||
|
|
{%- capture image_attributes -%}
|
||
|
|
data-product-image
|
||
|
|
data-grid-image="{{ forloop.index0 }}"
|
||
|
|
data-grid-image-target="{{ media.id }}"
|
||
|
|
data-grid-image-target-default="{{ media.id }}"
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
{%- render 'image-fill',
|
||
|
|
is_background: true,
|
||
|
|
img_object: image,
|
||
|
|
image_attributes: image_attributes,
|
||
|
|
classes: 'product__media product__media--featured-visible' -%}
|
||
|
|
|
||
|
|
{%- if has_colors -%}
|
||
|
|
{%- render 'image-fill',
|
||
|
|
is_background: true,
|
||
|
|
img_object: image,
|
||
|
|
image_attributes: 'data-product-image-secondary',
|
||
|
|
classes: 'product__media product__media--featured-secondary' -%}
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
<span class="visually-hidden">{{ image.alt | default: product.title | strip_html | escape }}</span>
|
||
|
|
</div>
|
||
|
|
{%- else -%}
|
||
|
|
<div class="product__media__image">
|
||
|
|
{%- render 'image-fill',
|
||
|
|
is_background: true,
|
||
|
|
img_object: product.featured_image,
|
||
|
|
classes: 'product__media',
|
||
|
|
placeholder_svg: 'product-1' -%}
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if product_grid_hover == 'slideshow' and product.media.size > 1 -%}
|
||
|
|
<div class="product__media__hover product__media__hover--{{ product_grid_hover_animation }} product__media__slider" data-product-media-slideshow>
|
||
|
|
{%- for media in product.media limit: 4 -%}
|
||
|
|
{%- if media != featured_media -%}
|
||
|
|
{%- assign image = media.preview_image -%}
|
||
|
|
|
||
|
|
<div class="product__media__slide lazy-image" data-product-media-slideshow-slide style="background-image: url({{ image | img_url: '1x1' }});">
|
||
|
|
{%- render 'image-fill',
|
||
|
|
is_background: true,
|
||
|
|
img_object: image,
|
||
|
|
classes: 'product__media' -%}
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
{%- endfor -%}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{%- if product.media.size > 2 -%}
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-bar__inner" data-product-slideshow-progress></div>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
{%- elsif product_grid_hover == 'image' and product.media[1].preview_image != blank -%}
|
||
|
|
{%- assign image = product.media[1].preview_image -%}
|
||
|
|
<div class="product__media__hover product__media__hover--{{ product_grid_hover_animation }} lazy-image"
|
||
|
|
style="background-image: url({{ image | img_url: '1x1' }});"
|
||
|
|
{% if has_colors %} data-load-hovers{% endif %}>
|
||
|
|
|
||
|
|
{%- render 'image-fill',
|
||
|
|
is_background: true,
|
||
|
|
img_object: image,
|
||
|
|
image_attributes: 'data-product-image-hover',
|
||
|
|
classes: 'product__media__hover-img product__media__hover-img--visible product__media' -%}
|
||
|
|
|
||
|
|
{%- if has_colors -%}
|
||
|
|
<template>
|
||
|
|
<div class="product__media-hovers">
|
||
|
|
{%- for variant in product.variants -%}
|
||
|
|
{%- assign featured_image_index = variant.featured_image.position -%}
|
||
|
|
{%- if featured_image_index > 1 -%}
|
||
|
|
{%- assign swatch_image_hover = product.media[featured_image_index].preview_image -%}
|
||
|
|
{%- if swatch_image_hover -%}
|
||
|
|
{%- capture image_attributes -%}
|
||
|
|
data-variant-id="{{ variant.id }}"
|
||
|
|
data-product-image-hover
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
{%- render 'image-fill',
|
||
|
|
is_background: true,
|
||
|
|
img_object: swatch_image_hover,
|
||
|
|
image_attributes: image_attributes,
|
||
|
|
classes: 'product__media product__media__hover-img' -%}
|
||
|
|
{%- endif -%}
|
||
|
|
{%- endif -%}
|
||
|
|
{%- endfor -%}
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
<noscript>
|
||
|
|
<div class="product__media__hover-img product__media" style="background-image: url({{ image | img_url: '600x' }})"></div>
|
||
|
|
</noscript>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
</a>{%- liquid
|
||
|
|
assign show_sale_badge = settings.show_sale_badge
|
||
|
|
assign show_custom_badge = settings.show_custom_badge
|
||
|
|
assign show_sold_badge = settings.show_sold_badge
|
||
|
|
assign show_saving_badge = settings.show_saving_badge
|
||
|
|
assign sold_out_text = 'products.product.sold_out' | t
|
||
|
|
assign sale_text = 'products.product.sale' | t
|
||
|
|
|
||
|
|
if settings.show_saving_badge
|
||
|
|
assign price = current_variant.price
|
||
|
|
assign price_compare = current_variant.compare_at_price
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
comment
|
||
|
|
assign price_difference = price_compare | minus: price
|
||
|
|
endcomment
|
||
|
|
|
||
|
|
assign price_difference = current_variant_compare_at_price | minus: current_variant_price
|
||
|
|
|
||
|
|
assign test_variants = product.variants | where: 'compare_at_price' | where: 'available', true
|
||
|
|
|
||
|
|
if test_variants.size > 0
|
||
|
|
for variant in test_variants
|
||
|
|
assign variant_price_difference = variant.compare_at_price | minus: variant.price
|
||
|
|
|
||
|
|
if variant_price_difference > price_difference
|
||
|
|
assign price = variant.price
|
||
|
|
assign price_compare = variant.compare_at_price
|
||
|
|
assign price_difference = variant_price_difference
|
||
|
|
endif
|
||
|
|
endfor
|
||
|
|
endif
|
||
|
|
|
||
|
|
if settings.currency_code_enable
|
||
|
|
assign discount = price_difference | money_with_currency | remove: '.00' | remove: ',00'
|
||
|
|
else
|
||
|
|
assign discount = price_difference | money_without_trailing_zeros
|
||
|
|
endif
|
||
|
|
|
||
|
|
if settings.saving_badge_type == 'percentage'
|
||
|
|
assign percent_off = price_difference | times: 1.00 | divided_by: current_variant_compare_at_price | times: 100
|
||
|
|
assign discount = percent_off | floor | append: '%'
|
||
|
|
endif
|
||
|
|
|
||
|
|
if product.variants.size == 1 and price_difference > 0
|
||
|
|
assign saving_badge_text = 'products.product.save_badge_html' | t: discount: discount
|
||
|
|
endif
|
||
|
|
|
||
|
|
if product.variants.size > 1 and price_difference > 0
|
||
|
|
assign saving_badge_text = 'products.product.save_badge_up_to_html' | t: discount: discount
|
||
|
|
endif
|
||
|
|
|
||
|
|
if saving_badge_text == blank
|
||
|
|
assign show_saving_badge = false
|
||
|
|
endif
|
||
|
|
endif
|
||
|
|
-%}
|
||
|
|
|
||
|
|
{%- capture product_badges -%}
|
||
|
|
{%- if custom_badge_metafield and show_custom_badge -%}
|
||
|
|
<div class="product__badge__item product__badge__item--custom">
|
||
|
|
<span>{{ custom_badge_metafield_text }}</span>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if sold_out and show_sold_badge -%}
|
||
|
|
<div class="product__badge__item product__badge__item--sold">
|
||
|
|
<span>{{ sold_out_text }}</span>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if on_sale and show_sale_badge and sold_out == false and show_saving_badge == false -%}
|
||
|
|
<div class="product__badge__item product__badge__item--sale">
|
||
|
|
<span>{{ sale_text }}</span>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- if show_saving_badge -%}
|
||
|
|
<div class="product__badge__item product__badge__item--saving">
|
||
|
|
<span>{{ saving_badge_text }}</span>
|
||
|
|
</div>
|
||
|
|
{%- endif -%}
|
||
|
|
{%- endcapture -%}
|
||
|
|
|
||
|
|
{%- unless product_badges == blank -%}
|
||
|
|
<div class="product__badge"
|
||
|
|
data-product-badge
|
||
|
|
{% if animations_enabled %}
|
||
|
|
data-aos="fade"
|
||
|
|
{% if animation_anchor %}
|
||
|
|
data-aos-anchor="{{ animation_anchor }}"
|
||
|
|
{% endif %}
|
||
|
|
data-aos-delay="{{ animation_delay | times: 150 | plus: 200 }}"
|
||
|
|
{% endif %}>
|
||
|
|
{{- product_badges -}}
|
||
|
|
</div>
|
||
|
|
{%- endunless -%}{%- unless quick_buy == 'none' -%}
|
||
|
|
<div class="product-grid-item__quick-buy"
|
||
|
|
{% if animations_enabled %}
|
||
|
|
data-aos="{{ text_animation }}"
|
||
|
|
{% if animation_anchor %}
|
||
|
|
data-aos-anchor="{{ animation_anchor }}"
|
||
|
|
{% endif %}
|
||
|
|
data-aos-delay="{{ animation_delay | times: 150 }}"
|
||
|
|
{% endif %}>
|
||
|
|
{%- if single_variant -%}
|
||
|
|
{%- capture unique -%}{{ section.id }}-{{ product.id }}{%- endcapture -%}
|
||
|
|
|
||
|
|
{%- form 'product', product, data-product-form: '', data-quickbuy-form: '', id: unique, class: 'quick__form' -%}
|
||
|
|
<input type="hidden" name="quantity" value="1">
|
||
|
|
<input type="hidden" name="id" value="{{ current_variant.id }}">
|
||
|
|
<button type="submit" name="add" class="btn--quick {{ settings.button_style }}" data-add-to-cart data-atc-trigger{% if index > 1 %} tabindex="-1"{% endif %}>
|
||
|
|
<span class="btn__inner">
|
||
|
|
{{ cart_icon }}
|
||
|
|
<span class="btn__text">{{ 'products.product.quick_view' | t }}</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>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div class="product-grid-item__error" role="alert" data-cart-errors-container></div>
|
||
|
|
{%- endform -%}
|
||
|
|
{%- else -%}
|
||
|
|
<a class="btn--quick {{ settings.button_style }}"
|
||
|
|
href="{{ product.url | within: collection }}"
|
||
|
|
aria-label="{{ 'products.product.quick_view' | t }}"
|
||
|
|
data-handle="{{ product.handle }}"
|
||
|
|
data-button-quick-view
|
||
|
|
data-grid-link
|
||
|
|
{% if index > 1 %} tabindex="-1"{% endif %}>
|
||
|
|
<span class="btn__inner">
|
||
|
|
{{ cart_icon }}
|
||
|
|
<span class="btn__text">{{ 'products.product.quick_view' | t }}</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>
|
||
|
|
</a>
|
||
|
|
{%- endif -%}
|
||
|
|
</div>
|
||
|
|
{%- endunless -%}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{%- comment -%} Product info {%- endcomment -%}
|
||
|
|
<div class="product-grid-item__info{% unless settings.content_alignment == 'center' %}{{ product_alignment_class }}{% endunless %}"
|
||
|
|
{% if animations_enabled %}
|
||
|
|
data-aos="{{ text_animation }}"
|
||
|
|
{% if animation_anchor %}
|
||
|
|
data-aos-anchor="{{ animation_anchor }}"
|
||
|
|
{% endif %}
|
||
|
|
data-aos-delay="{{ animation_delay | times: 150 }}"
|
||
|
|
{% endif %}>
|
||
|
|
|
||
|
|
{%- if has_colors -%}
|
||
|
|
{%- assign color_option = product.options_by_name[color_label].values -%}
|
||
|
|
|
||
|
|
<product-grid-item-swatch class="product-grid-item__swatch
|
||
|
|
{%- if settings.color_swatches_product_style == 'rectangle' %} product-grid__swatch--rectangle{% endif %}"
|
||
|
|
data-swatch-handle="{{ product.handle }}"
|
||
|
|
data-swatch-label="{{ color_label }}">
|
||
|
|
{%- for option in color_option -%}
|
||
|
|
{%- liquid
|
||
|
|
for variant in product.variants
|
||
|
|
if variant.options contains option
|
||
|
|
assign swatch_variant = variant
|
||
|
|
break
|
||
|
|
endif
|
||
|
|
endfor
|
||
|
|
|
||
|
|
assign swatch_image_src = swatch_variant.featured_media.preview_image.src
|
||
|
|
if swatch_image_src
|
||
|
|
assign swatch_image_src = swatch_image_src | image_url: width: 600 | replace: '&width=600', ''
|
||
|
|
else
|
||
|
|
assign swatch_image_src = ''
|
||
|
|
endif
|
||
|
|
-%}
|
||
|
|
|
||
|
|
<div class="swatch__button{%- if forloop.index > 4 and color_option.size > 5 %} is-hidden{% endif -%}" data-swatch-button data-value="{{ option }}" data-tooltip="{{ option | escape_once | capitalize }}">
|
||
|
|
<div id="{{ product.id }}-{{ swatch_variant.id }}-{{ option | handle }}"
|
||
|
|
class="swatch__label"
|
||
|
|
data-swatch="{{ option }}"
|
||
|
|
data-swatch-variant="{{ swatch_variant.id }}"
|
||
|
|
data-swatch-image="{{ swatch_image_src }}"
|
||
|
|
data-swatch-image-id="{{ swatch_variant.featured_media.id | default: '' }}"
|
||
|
|
data-swatch-index="{{ forloop.index0 }}">
|
||
|
|
</div>
|
||
|
|
{%- assign color_variant_text = 'general.swatches.color_variant' | t -%}
|
||
|
|
{%- assign swatch_product_title = product.title | strip_html | escape -%}
|
||
|
|
<a href="{{ product.url }}?variant={{ swatch_variant.id }}" data-swatch-variant="{{ swatch_variant.id }}" class="swatch__link">{{ swatch_product_title | append: ' - ' | append: color_variant_text | append: ': ' | append: option }}</a>
|
||
|
|
</div>
|
||
|
|
{%- endfor -%}
|
||
|
|
|
||
|
|
{%- if color_option.size > 5 -%}
|
||
|
|
{%- assign more_colors = color_option.size | minus: 4 -%}
|
||
|
|
|
||
|
|
<button type="button" class="swatch__text-more" data-swatches-more>{{ 'general.swatches.more_colors' | t: number: more_colors }}</button>
|
||
|
|
{%- endif -%}
|
||
|
|
</product-grid-item-swatch>
|
||
|
|
{%- endif -%}
|
||
|
|
|
||
|
|
{%- unless alignment_inline -%}
|
||
|
|
{% comment %} Title {% endcomment %}
|
||
|
|
{{ product_title }}
|
||
|
|
{%- else -%}
|
||
|
|
{% comment %} Title - Price {% endcomment %}
|
||
|
|
<div class="product-grid-item__info-content">
|
||
|
|
{{ product_title }} {{ info_separator }} {{ product_info_price }}
|
||
|
|
</div>
|
||
|
|
{%- endunless -%}
|
||
|
|
|
||
|
|
{%- comment -%} Product tagline {%- endcomment -%}
|
||
|
|
{%- assign cutline_color = settings.cutline_color -%}{%- if product.metafields.theme.cutline != blank and product.metafields.theme.cutline.type == 'single_line_text_field' -%}
|
||
|
|
|
||
|
|
{%- liquid
|
||
|
|
capture style
|
||
|
|
case cutline_color
|
||
|
|
when 'body'
|
||
|
|
echo 'color: var(--text);'
|
||
|
|
when 'accent'
|
||
|
|
echo 'color: var(--accent);'
|
||
|
|
endcase
|
||
|
|
endcapture
|
||
|
|
-%}
|
||
|
|
|
||
|
|
<p class="product-cutline" style="{{ style }}">{{ product.metafields.theme.cutline.value }}</p>
|
||
|
|
{%- endif -%}
|
||
|
|
{%- unless alignment_inline -%}
|
||
|
|
{%- comment -%} Price {%- endcomment -%}
|
||
|
|
{{ product_info_price }}
|
||
|
|
{%- endunless -%}
|
||
|
|
|
||
|
|
{% render 'aframe_sswatch', product:product %}
|
||
|
|
|
||
|
|
{%- if settings.show_rating and product.metafields.reviews != empty -%}
|
||
|
|
<a href="{{ product.url | within: collection }}" class="product-grid-item__rating"{% if index > 1 %} tabindex="-1"{% endif %} data-grid-link>
|
||
|
|
{%- render 'rating', reviews: product.metafields.reviews, show_rating_count: settings.show_rating_count, tabindex_hidden: tabindex_hidden -%}
|
||
|
|
</a>
|
||
|
|
{%- endif -%}
|
||
|
|
</div>
|
||
|
|
</div>
|