288 lines
11 KiB
Plaintext
288 lines
11 KiB
Plaintext
{% comment %}
|
|
It's best to load images as JPG instead of PNG for faster
|
|
loading, so that is our default. If you upload
|
|
PNG files and want to keep them that way, set the line
|
|
below to false.
|
|
{% endcomment %}
|
|
{%- liquid
|
|
|
|
unless grid_item_width
|
|
assign grid_item_width = 'medium-up--one-quarter small--one-half'
|
|
endunless
|
|
-%}
|
|
|
|
{% liquid
|
|
# start Yagi app code
|
|
assign active_discount = true
|
|
|
|
assign empty_array = "" | split: ""
|
|
assign dormant_discounts = shop.metafields.app--168074346497.dormant_discounts.value | default: empty_array
|
|
assign target_discount_id = product.metafields.app--168074346497.applied_discount_id.value
|
|
for dormant_discount in dormant_discounts
|
|
if dormant_discount == target_discount_id
|
|
assign active_discount = false
|
|
endif
|
|
endfor
|
|
|
|
assign product_price = product.price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
|
|
if active_discount
|
|
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.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 = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign product_compare_at_price = product.price
|
|
|
|
if product.compare_at_price > product_compare_at_price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
if product_price < product.price and product_compare_at_price == blank
|
|
assign product_compare_at_price = product.price
|
|
endif
|
|
endif
|
|
|
|
# end Yagi app code
|
|
%}
|
|
|
|
{% comment %}
|
|
Do not output the quick shop modal if we're loading related products
|
|
through another quick shop modal. Determined by checking the product.ajax template suffix.
|
|
These are loaded for product.sections templates but quickly removed
|
|
in JS before appending the related section.
|
|
{% endcomment %}
|
|
{%- liquid
|
|
assign enable_quick_shop = settings.quick_shop_enable
|
|
if no_modal
|
|
assign enable_quick_shop = false
|
|
endif
|
|
if template == 'product.ajax'
|
|
assign enable_quick_shop = false
|
|
endif
|
|
|
|
assign on_sale = false
|
|
if product_compare_at_price > product_price
|
|
assign on_sale = true
|
|
endif
|
|
|
|
assign sold_out = true
|
|
if product.available
|
|
assign sold_out = false
|
|
endif
|
|
|
|
assign product_tags = product.tags | join: ','
|
|
assign has_custom_label = false
|
|
if product.metafields.theme.label and product.metafields.theme.label != blank
|
|
assign has_custom_label = true
|
|
assign custom_label = product.metafields.theme.label.value
|
|
elsif product_tags contains '_label_'
|
|
for tag in product.tags
|
|
if tag contains '_label_'
|
|
assign tag_starts_with = tag | slice: 0
|
|
if tag_starts_with == '_'
|
|
assign has_custom_label = true
|
|
assign custom_label = tag | replace: '_label_', ''
|
|
endif
|
|
endif
|
|
endfor
|
|
endif
|
|
-%}
|
|
|
|
<div
|
|
class="grid__item grid-product {{ grid_item_width }}{% if settings.product_hover_details %} grid-product__hover-details{% endif %}"
|
|
data-aos
|
|
data-product-grid
|
|
data-id="{{ product.id }}">
|
|
<div class="grid-product__content">
|
|
{%- if has_custom_label -%}
|
|
<div class="grid-product__tag grid-product__tag--custom">
|
|
{{ custom_label }}
|
|
</div>
|
|
{%- else -%}
|
|
{%- if sold_out -%}
|
|
<div class="grid-product__tag grid-product__tag--sold-out">
|
|
{{ 'products.product.sold_out' | t }}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- if on_sale and sold_out == false -%}
|
|
<div class="grid-product__tag grid-product__tag--sale">
|
|
{%- if settings.product_save_amount -%}
|
|
{%- if settings.product_save_type == 'dollar' -%}
|
|
{%- capture saved_amount -%}{{ product_compare_at_price | minus: product_price | money }}{%- endcapture -%}
|
|
{%- else -%}
|
|
{%- capture saved_amount -%}{{ product_compare_at_price | minus: product_price | times: 100.0 | divided_by: product_compare_at_price | round }}%{%- endcapture -%}
|
|
{%- endif -%}
|
|
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
|
|
{%- else -%}
|
|
{{ 'products.general.sale' | t }}
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
|
|
{%- liquid
|
|
assign fixed_aspect_ratio = false
|
|
unless settings.product_grid_image_size == 'natural'
|
|
assign fixed_aspect_ratio = true
|
|
endunless
|
|
|
|
assign preview_image = product.featured_media.preview_image
|
|
|
|
assign image_limit = 1
|
|
assign image_count = 0
|
|
if settings.product_hover_image
|
|
assign image_limit = 10
|
|
endif
|
|
|
|
assign slider_image_padding = '100%'
|
|
|
|
if image_style == 'circle'
|
|
assign fixed_aspect_ratio = true
|
|
assign imageRatio = 'square'
|
|
endif
|
|
-%}
|
|
|
|
<a
|
|
href="{{ product.url | within: collection }}"
|
|
class="grid-product__link{% if sold_out %} grid-product__link--disabled{% endif %}{% if enable_quick_shop %} quick-product__btn js-screen-open-product-{{ product.id }} js-no-transition{% endif %}"
|
|
data-product-id="{{ product.id }}"
|
|
data-url="{{ product.url | within: collection }}">
|
|
<div id="ProductGridSlider-{{ product.id }}"
|
|
class="slideshow-wrapper product-slider"
|
|
data-image-count="{{ product.media.size }}"
|
|
data-id="{{ product.id }}">
|
|
{%- for media in product.media limit: image_limit -%}
|
|
{%- assign image_count = image_count | plus: 1 -%}
|
|
<div class="product-slide">
|
|
<div class="image-wrap {% if image_style == 'circle' %}image-wrap--circular-image{% endif %}">
|
|
{% capture img_class %}{%- if fixed_aspect_ratio -%}grid-product__image{% endif %} image-style--{{ image_style }}{% endcapture %}
|
|
{%- if forloop.first -%}
|
|
{%- if fixed_aspect_ratio -%}
|
|
<div
|
|
class="grid__image-ratio grid__image-ratio--{% if image_style == 'circle' %}square{% else %}{{ settings.product_grid_image_size }}{% endif %}"
|
|
>
|
|
{%- render 'image-element',
|
|
img: preview_image,
|
|
classes: img_class,
|
|
sizes: sizes,
|
|
sizeVariable: sizeVariable,
|
|
fallback: fallback,
|
|
-%}
|
|
</div>
|
|
{%- else -%}
|
|
{%- assign slider_image_padding = 100 | divided_by: preview_image.aspect_ratio | append: '%' -%}
|
|
<div class="image-wrap"
|
|
style="height: 0; padding-bottom: {{ slider_image_padding }};"
|
|
>
|
|
{%- render 'image-element',
|
|
img: preview_image,
|
|
classes: img_class,
|
|
sizes: sizes,
|
|
sizeVariable: sizeVariable,
|
|
fallback: fallback,
|
|
widths: '750, 900, 1080',
|
|
format: format,
|
|
-%}
|
|
</div>
|
|
{%- endif -%}
|
|
{%- else -%}
|
|
<div
|
|
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"
|
|
{% if settings.product_grid_image_size == 'natural' %}
|
|
style="padding-bottom: {{ slider_image_padding }}"
|
|
{% endif %}
|
|
>
|
|
{%- render 'image-element',
|
|
img: media.preview_image,
|
|
classes: img_class,
|
|
sizes: sizes,
|
|
sizeVariable: sizeVariable,
|
|
fallback: fallback,
|
|
-%}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
{%- endfor -%}
|
|
{%- if product.media == blank -%}
|
|
<div
|
|
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}"
|
|
{% if settings.product_grid_image_size == 'natural' %}
|
|
style="padding-bottom: {{ slider_image_padding }}"
|
|
{% endif %}
|
|
>
|
|
{%- capture placeholder -%}product-{% cycle 1, 2, 3, 4, 5, 6 %}{%- endcapture -%}
|
|
<div class="product-image--placeholder">{{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}</div>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- if image_count > 1 -%}
|
|
{%- assign loader_duration = 1350 | times: image_count -%}
|
|
<style>
|
|
.product-slider.flickity-enabled[data-id="{{ product.id }}"]:after {
|
|
animation-duration: {{ loader_duration }}ms;
|
|
}
|
|
</style>
|
|
{%- endif -%}
|
|
|
|
<div class="grid-product__meta">
|
|
<div class="grid-product__title">{{ product.title }}</div>
|
|
{%- if settings.vendor_enable -%}
|
|
<div class="grid-product__vendor">{{ product.vendor }}</div>
|
|
{%- endif -%}
|
|
<div class="grid-product__price">
|
|
{%- if on_sale -%}
|
|
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
|
|
<del class="grid-product__price--original">{{ product_compare_at_price | money }}</del>
|
|
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
|
|
{%- endif -%}
|
|
{%- if product.price_varies -%}
|
|
{%- assign price = product_price | money -%}
|
|
<span{% if on_sale %} class="sale-price"{% endif %}>
|
|
{{ 'products.general.from_text_html' | t: price: price }}
|
|
</span>
|
|
{%- else -%}
|
|
<span{% if on_sale %} class="sale-price"{% endif %}>
|
|
{{ product_price | money }}
|
|
</span>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- assign product_variant = product.selected_or_first_available_variant -%}
|
|
{%- if product_variant.unit_price_measurement -%}
|
|
<div class="product__unit-price">
|
|
{%- capture unit_price_base_unit -%}
|
|
{%- if product_variant.unit_price_measurement -%}
|
|
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
|
|
{{ product_variant.unit_price_measurement.reference_value }}
|
|
{%- endif -%}
|
|
{{ product_variant.unit_price_measurement.reference_unit }}
|
|
{%- endif -%}
|
|
{%- endcapture -%}
|
|
|
|
{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{%- if settings.enable_swatches and type == 'horizontal' -%}
|
|
{%- render 'product-grid-item-swatches', product: product -%}
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- if settings.enable_swatches and type == blank -%}
|
|
{%- render 'product-grid-item-swatches', product: product -%}
|
|
{%- endif -%}
|
|
</a>
|
|
</div>
|
|
|
|
{%- if enable_quick_shop and type == blank -%}
|
|
{%- render 'quick-shop-modal', product: product -%}
|
|
{%- endif -%}
|
|
</div>
|