448 lines
16 KiB
Plaintext
448 lines
16 KiB
Plaintext
{%- liquid
|
|
comment
|
|
pass in :
|
|
|
|
* prod (product but avoiding collision with globally scoped product)
|
|
endcomment
|
|
|
|
assign prod_compare_at_price = prod.compare_at_price
|
|
assign prod_price = prod.price
|
|
|
|
assign prod_price = prod.metafields.app--168074346497.min_auto_discounted_price.value | default: prod.price
|
|
|
|
if prod.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: prod.metafields.app--168074346497.discount_percentage.value
|
|
|
|
assign prod_price = prod.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign prod_compare_at_price = prod.price
|
|
|
|
if prod.compare_at_price > prod_compare_at_price
|
|
assign prod_compare_at_price = prod.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
assign show_multiple_images = false
|
|
if settings.product_listing_show_second_image_on_hover and prod.media.size > 1
|
|
assign show_multiple_images = true
|
|
endif
|
|
|
|
assign current_variant = prod.selected_or_first_available_variant
|
|
|
|
assign mobile_column_count = 2
|
|
if product_columns_mobile == 1
|
|
assign mobile_column_count = 1
|
|
endif
|
|
|
|
case product_columns_desktop
|
|
when '5'
|
|
assign sizes = '(max-width: 720px) calc((90vw - 12px) /[[mcc]]), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 5), 270px' | replace: '[[mcc]]', mobile_column_count
|
|
when '3'
|
|
assign sizes = '(max-width: 720px) calc((90vw - 12px) /[[mcc]]), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 3), 450px' | replace: '[[mcc]]', mobile_column_count
|
|
when '2'
|
|
assign sizes = '(max-width: 720px) calc((90vw - 12px) /[[mcc]]), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 2), 690px' | replace: '[[mcc]]', mobile_column_count
|
|
else
|
|
# Using a 4 item grid as default for sizes
|
|
assign sizes = '(max-width: 720px) calc((90vw - 12px) /[[mcc]]), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 4), 304px' | replace: '[[mcc]]', mobile_column_count
|
|
endcase
|
|
|
|
assign has_hover_swatches = false
|
|
assign has_hover_chips = false
|
|
assign show_sibling_swatches = false
|
|
assign sibling_products = prod.metafields.stiletto.sibling_collection.value.products | default: prod.metafields.stiletto.siblings_collection.value.products
|
|
|
|
# Sibling swatches will override other swatches if these conditions are met
|
|
if settings.enable_product_card_sibling_swatches and settings.siblings_option_name != blank and sibling_products.size > 0
|
|
assign has_hover_swatches = true
|
|
assign show_sibling_swatches = true
|
|
assign first_swatchified_option = settings.siblings_option_name | downcase
|
|
assign displayed_swatch_count = sibling_products.size
|
|
|
|
elsif settings.enable_product_card_swatches
|
|
capture first_swatchified_option
|
|
render 'get-first-styled-option', prod: prod, styled_options: settings.swatch_options
|
|
endcapture
|
|
|
|
assign displayed_swatch_count = prod.options_by_name[first_swatchified_option].values.size
|
|
|
|
if displayed_swatch_count > 0
|
|
assign has_hover_swatches = true
|
|
endif
|
|
endif
|
|
|
|
if settings.show_product_card_chips
|
|
capture first_chipped_option
|
|
render 'get-first-styled-option', prod: prod, styled_options: settings.product_card_chip_options
|
|
endcapture
|
|
|
|
assign displayed_chip_count = prod.options_by_name[first_chipped_option].values.size
|
|
|
|
if displayed_chip_count > 0
|
|
assign has_hover_chips = true
|
|
endif
|
|
endif
|
|
|
|
if quick_view_is_beneath
|
|
assign has_hover_swatches = false
|
|
assign has_hover_chips = false
|
|
endif
|
|
|
|
if prod.has_only_default_variant
|
|
assign product_has_variants = false
|
|
else
|
|
assign product_has_variants = true
|
|
endif
|
|
|
|
# Quick add takes precedence over quick view
|
|
# Use quick view for products with variants and sold out products
|
|
if settings.enable_quick_add and prod.available
|
|
if product_has_variants
|
|
assign quick_shop_type = 'quick-view'
|
|
assign quick_shop_button_text = 'products.product.choose_options' | t
|
|
else
|
|
assign quick_shop_type = 'quick-add'
|
|
assign quick_shop_button_text = 'products.product.add_to_cart' | t
|
|
endif
|
|
|
|
capture quick_shop_button_hoverless_icon
|
|
render 'icon', icon: 'quick-add'
|
|
endcapture
|
|
|
|
elsif settings.enable_quick_view
|
|
assign quick_shop_type = 'quick-view'
|
|
assign quick_shop_button_text = 'products.product.quick_view' | t
|
|
|
|
capture quick_shop_button_hoverless_icon
|
|
render 'icon', icon: 'quick-view'
|
|
endcapture
|
|
else
|
|
assign quick_shop_type = 'none'
|
|
endif
|
|
-%}
|
|
|
|
{% if quick_shop_type != 'none' %}
|
|
{% capture quick_shop_button_attributes %}
|
|
data-quick-shop-trigger="{{ quick_shop_type }}"
|
|
|
|
{% if quick_shop_type == 'quick-add' %}
|
|
data-product-id="{{ prod.variants[0].id }}"
|
|
{% else %}
|
|
data-product-url="{{ prod.url }}"
|
|
{% endif %}
|
|
{% endcapture %}
|
|
|
|
{% capture quick_shop_button %}
|
|
<button
|
|
class="btn btn--tertiary btn--x-small"
|
|
{{ quick_shop_button_attributes }}
|
|
tabindex="0"
|
|
>
|
|
<span>{{ quick_shop_button_text }}</span>
|
|
|
|
<div class="btn__loading-wrap">
|
|
<div class="btn__loading-bar"></div>
|
|
</div>
|
|
</button>
|
|
{% endcapture %}
|
|
|
|
{% capture quick_shop_button_hoverless %}
|
|
<button
|
|
class="product-item__hoverless-quick-view-button btn btn--rounded"
|
|
{{ quick_shop_button_attributes }}
|
|
tabindex="0"
|
|
title="{{ quick_shop_button_text }}"
|
|
>
|
|
{{ quick_shop_button_hoverless_icon }}
|
|
</button>
|
|
{% endcapture %}
|
|
{% endif %}
|
|
|
|
{% liquid
|
|
# wrap add-to-cart buttons in a product form for no-js or if purchase confirmation and quick cart are disabled
|
|
if quick_shop_type == 'quick-add'
|
|
capture product_form_tags
|
|
echo '<input class="product-item__product-form-variant-input" name="id" type="hidden" value="[[vi]]">' | replace: '[[vi]]', prod.variants[0].id
|
|
endcapture
|
|
|
|
capture quick_shop_button
|
|
form 'product', prod, class: 'product-item__product-form'
|
|
echo product_form_tags
|
|
echo quick_shop_button
|
|
endform
|
|
endcapture
|
|
|
|
capture quick_shop_button_hoverless
|
|
form 'product', prod, class: 'product-item__product-form'
|
|
echo product_form_tags
|
|
echo quick_shop_button_hoverless
|
|
endform
|
|
endcapture
|
|
endif
|
|
%}
|
|
|
|
<div
|
|
class="
|
|
product-item
|
|
{% if has_hover_swatches -%} product-item--with-hover-swatches {%- endif %}
|
|
{% if has_hover_chips -%} product-item--with-hover-chips {%- endif %}
|
|
{% if settings.enable_border_on_hover -%} product-item--border-on-hover {%- endif %}
|
|
animation
|
|
animation--item
|
|
{% if has_grid_reveal -%} animation--item-initial {%- endif %}
|
|
"
|
|
style="--z-index-item: {{ forloop.index }};"
|
|
>
|
|
<div class="product-item__inner">
|
|
<div class="product-item__media {%- if show_multiple_images %} product-item__media--multiple-images {%- endif %}">
|
|
<a class="product-item__image-link" href="{{ prod.url | within: collection }}" aria-label="{{ prod.title }}">
|
|
{%- liquid
|
|
assign image_wrapper_class = 'product-item__image'
|
|
|
|
if show_multiple_images
|
|
assign image_wrapper_class = image_wrapper_class | append: ' product-item__image--one'
|
|
assign second_image = prod.media[1].preview_image
|
|
|
|
if prod.featured_media != prod.media[0]
|
|
assign second_image = prod.media[0].preview_image
|
|
endif
|
|
endif
|
|
-%}
|
|
|
|
{% render 'image',
|
|
image: prod.featured_media,
|
|
wrapper_class: image_wrapper_class,
|
|
aspect_ratio: settings.product_listing_aspect_ratio,
|
|
object_fit: settings.product_listing_media_fit,
|
|
include_placeholder: true,
|
|
sizes: sizes,
|
|
src_set_type: 'grid'
|
|
%}
|
|
|
|
{%- if show_multiple_images -%}
|
|
{% render 'image',
|
|
image: second_image,
|
|
wrapper_class: 'product-item__image product-item__image--two',
|
|
aspect_ratio: settings.product_listing_aspect_ratio,
|
|
object_fit: settings.product_listing_media_fit,
|
|
include_placeholder: true,
|
|
sizes: sizes,
|
|
no_lazy_load: true,
|
|
src_set_type: 'grid'
|
|
%}
|
|
{%- endif -%}
|
|
</a>
|
|
{% unless placeholder %}
|
|
{%- render 'product-badges',
|
|
prod: prod,
|
|
show_sale_badge: settings.product_listing_show_sale_badge,
|
|
show_custom_badges: settings.product_listing_show_custom_badges,
|
|
show_sold_out_badge: settings.product_listing_show_sold_out_badge
|
|
-%}
|
|
{% endunless %}
|
|
|
|
{% if quick_shop_type != 'none' and quick_view_is_beneath != true %}
|
|
<div class="product-item__hover-action-wrap">
|
|
{{ quick_shop_button }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if quick_shop_type != 'none' %}
|
|
{{ quick_shop_button_hoverless }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="product-item__meta">
|
|
<div class="product-item__text ta-c ">
|
|
<h4 class="ff-body product-item__product-title fs-product-card-title">
|
|
{%- if placeholder -%}
|
|
{{ 'homepage.onboarding.product_title' | t }}
|
|
{%- else -%}
|
|
<a href="{{ prod.url | within: collection }}">{{ prod.title }}</a>
|
|
{%- endif -%}
|
|
</h4>
|
|
|
|
{% if settings.product_listing_show_vendor and prod.vendor %}
|
|
<h5 class="ff-body fs-body-60 product-item__product-vendor">
|
|
{{ prod.vendor }}
|
|
</h5>
|
|
{% endif %}
|
|
|
|
{% if settings.product_listing_show_rating %}
|
|
{% render 'product-rating', prod: prod %}
|
|
{% endif %}
|
|
|
|
{% liquid
|
|
assign price_content_type = 'price'
|
|
|
|
if prod.available
|
|
if prod.price == 0 and prod.price_varies == false
|
|
if settings.zero_dollar_listing_price_display == 'replace'
|
|
assign price_content_type = 'custom'
|
|
assign custom_price_content = 'products.inventory.zero_price_custom_label' | t
|
|
elsif settings.zero_dollar_listing_price_display == 'hide'
|
|
assign price_content_type = 'hide'
|
|
assign custom_price_content = blank
|
|
endif
|
|
endif
|
|
else
|
|
if settings.sold_out_listing_price_display == 'hide'
|
|
assign price_content_type = 'hide'
|
|
assign custom_price_content = blank
|
|
elsif settings.sold_out_listing_price_display == 'replace'
|
|
assign price_content_type = 'custom'
|
|
assign custom_price_content = 'products.inventory.sold_out_price_custom_label' | t
|
|
endif
|
|
endif
|
|
%}
|
|
{% if price_content_type == 'price' %}
|
|
<p class="product-item__price">
|
|
{% if placeholder %}
|
|
{{ 9999 | money }}
|
|
|
|
{% elsif prod_compare_at_price > prod_price %}
|
|
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
|
|
|
|
{% liquid
|
|
# Extend Shopify's detection for varied compare_at_price
|
|
assign has_null_compare_at_price = false
|
|
for variant in prod.variants
|
|
|
|
assign variant_compare_at_price = variant.compare_at_price
|
|
|
|
assign variant_price = variant.metafields.app--168074346497.auto_discounted_price.value | default: variant.price
|
|
|
|
if variant.metafields.app--168074346497.discount_type.value != nil and variant.metafields.app--168074346497.discount_type.value != "fixed" and prod.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: prod.metafields.app--168074346497.discount_percentage.value
|
|
|
|
if variant.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: variant.metafields.app--168074346497.discount_percentage.value
|
|
endif
|
|
|
|
assign variant_price = variant.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign variant_compare_at_price = variant.price
|
|
|
|
if variant.compare_at_price > variant_compare_at_price
|
|
assign variant_compare_at_price = variant.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
if variant_price < variant.price and variant_compare_at_price == blank
|
|
assign variant_compare_at_price = variant.price
|
|
endif
|
|
|
|
if variant_compare_at_price == null
|
|
assign has_null_compare_at_price = true
|
|
break
|
|
endif
|
|
endfor
|
|
%}
|
|
|
|
{% unless prod.compare_at_price_varies or has_null_compare_at_price %}
|
|
<s class="t-subdued">{{ prod_compare_at_price | money }}</s>
|
|
{% endunless %}
|
|
|
|
{% if prod.price_varies or prod.compare_at_price_varies or has_null_compare_at_price %}
|
|
{%- assign sale_price = prod_price | money -%}
|
|
|
|
<span class="sale">
|
|
{{- 'products.product.on_sale_from_html' | t: price: sale_price -}}
|
|
</span>
|
|
{% else %}
|
|
<span class="sale">{{ prod_price | money }}</span>
|
|
{% endif %}
|
|
|
|
{% else %}
|
|
{% if prod.price_varies %}
|
|
{%- assign price = prod_price | money -%}
|
|
|
|
{{ 'products.product.from_lowest_price_html' | t: lowest_price: price }}
|
|
|
|
{% else %}
|
|
<span class="product-item__price">{{ prod_price | money }}</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if settings.product_listing_show_discount %}
|
|
<span class="displayed-discount fs-body-50">
|
|
{%- render 'get-display-discount', prod: prod, format: settings.product_listing_discount_format -%}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{% render 'unit-price', item: current_variant %}
|
|
</p>
|
|
{% elsif price_content_type == 'custom' %}
|
|
{% if prod.price_varies and prod_price == 0 %}
|
|
{%- assign price = prod_price | money -%}
|
|
{%- assign custom_price_content = 'products.inventory.zero_price_custom_label' | t -%}
|
|
|
|
<p class="product-item__price">
|
|
{% liquid
|
|
capture from_lowest_price_html
|
|
echo 'products.product.from_lowest_price_html' | t: lowest_price: custom_price_content
|
|
endcapture
|
|
|
|
if prod_compare_at_price > prod_price
|
|
echo '<span class="sale">[[flph]]</span>' | replace: '[[flph]]', from_lowest_price_html
|
|
else
|
|
echo from_lowest_price_html
|
|
endif
|
|
%}
|
|
</p>
|
|
{% else %}
|
|
{% if custom_price_content != blank %}
|
|
<p class="product-item__price">{{ custom_price_content }}</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if has_hover_swatches or has_hover_chips %}
|
|
{% liquid
|
|
assign option_string = blank
|
|
|
|
if has_hover_swatches
|
|
assign swatch_string = 'products.product.swatch_count' | t: count: displayed_swatch_count, swatch_name: first_swatchified_option
|
|
assign option_string = option_string | append: swatch_string
|
|
endif
|
|
|
|
if has_hover_swatches and has_hover_chips
|
|
assign delimiter_string = 'products.product.swatch_and_chip_delimiter' | t
|
|
assign option_string = option_string | append: delimiter_string
|
|
endif
|
|
|
|
if has_hover_chips
|
|
assign chip_string = 'products.product.chip_count' | t: count: displayed_chip_count, chip_name: first_chipped_option
|
|
assign option_string = option_string | append: chip_string
|
|
endif
|
|
%}
|
|
<h5 class="ff-body fs-body-50 product-item__swatch-count">
|
|
{{ option_string }}
|
|
</h5>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{%- if has_hover_swatches or has_hover_chips -%}
|
|
<div class="product-item__variant-info">
|
|
{%- if has_hover_swatches -%}
|
|
{%- render 'product-item-swatches',
|
|
prod: prod,
|
|
option_name: first_swatchified_option,
|
|
show_sibling_swatches: show_sibling_swatches,
|
|
sibling_products: sibling_products
|
|
-%}
|
|
{%- endif -%}
|
|
|
|
{%- if has_hover_chips -%}
|
|
{%- render 'product-item-chips', prod: prod, option_name: first_chipped_option -%}
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{%- if quick_shop_type != 'none' and quick_view_is_beneath -%}
|
|
{{ quick_shop_button }}
|
|
{%- endif -%}
|
|
</div>
|
|
<div class="product-item__hover-container"></div>
|
|
</div>
|
|
</div>
|