Updated version code
This commit is contained in:
+143
-108
@@ -1,10 +1,18 @@
|
||||
{%- doc -%}
|
||||
Renders a product item.
|
||||
|
||||
@param {object} prod - The product object. We use 'prod' to avoid collision with the global 'product' object.
|
||||
@param {string} product_columns_desktop - The number of columns in the product grid on desktop.
|
||||
@param {string} product_columns_mobile - The number of columns in the product grid on mobile.
|
||||
@param {string} aspect_ratio - The image aspect ratio.
|
||||
@param {boolean} [has_grid_reveal] - Whether the item should animate.
|
||||
@param {string} custom_color_key_map - A list of custom color names for swatches.
|
||||
@param {string} custom_color_value_map - A list of custom color values for swatches.
|
||||
@param {boolean} [quick_view_is_beneath] - Whether the quick view displays below the product info (instead of overlayed on the image).
|
||||
@param {boolean} [placeholder] - Whether the item is being rendered as a placeholder.
|
||||
{%- enddoc -%}
|
||||
|
||||
{%- 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
|
||||
|
||||
@@ -22,17 +30,17 @@
|
||||
endif
|
||||
endif
|
||||
|
||||
assign show_multiple_images = false
|
||||
assign has_grid_reveal = has_grid_reveal | default: false, allow_false: true
|
||||
assign quick_view_is_beneath = quick_view_is_beneath | default: false, allow_false: true
|
||||
assign placeholder = placeholder | default: false, allow_false: true
|
||||
|
||||
if settings.product_listing_show_second_image_on_hover and prod.media.size > 1
|
||||
assign show_multiple_images = true
|
||||
else
|
||||
assign show_multiple_images = false
|
||||
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
|
||||
assign mobile_column_count = product_columns_mobile | plus: 0
|
||||
|
||||
case product_columns_desktop
|
||||
when '5'
|
||||
@@ -57,7 +65,6 @@
|
||||
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
|
||||
@@ -107,7 +114,6 @@
|
||||
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
|
||||
@@ -120,20 +126,22 @@
|
||||
endif
|
||||
-%}
|
||||
|
||||
{% if quick_shop_type != 'none' %}
|
||||
{% capture quick_shop_button_attributes %}
|
||||
data-quick-shop-trigger="{{ quick_shop_type }}"
|
||||
{%- if quick_shop_type != 'none' -%}
|
||||
{%- liquid
|
||||
capture quick_shop_button_attributes
|
||||
echo 'data-quick-shop-trigger="[[qst]]"' | replace: '[[qst]]', quick_shop_type
|
||||
|
||||
{% if quick_shop_type == 'quick-add' %}
|
||||
data-product-id="{{ prod.variants[0].id }}"
|
||||
{% else %}
|
||||
data-product-url="{{ prod.url }}"
|
||||
{% endif %}
|
||||
{% endcapture %}
|
||||
if quick_shop_type == 'quick-add'
|
||||
echo 'data-product-id="[[pid]]"' | replace: '[[pid]]', prod.variants[0].id
|
||||
else
|
||||
echo 'data-product-url="[[pu]]"' | replace: '[[pu]]', prod.url
|
||||
endif
|
||||
endcapture
|
||||
-%}
|
||||
|
||||
{% capture quick_shop_button %}
|
||||
{%- capture quick_shop_button -%}
|
||||
<button
|
||||
class="btn btn--tertiary btn--x-small"
|
||||
class="product-item__quick-view btn btn--tertiary btn--x-small"
|
||||
{{ quick_shop_button_attributes }}
|
||||
tabindex="0"
|
||||
>
|
||||
@@ -143,22 +151,22 @@
|
||||
<div class="btn__loading-bar"></div>
|
||||
</div>
|
||||
</button>
|
||||
{% endcapture %}
|
||||
{%- endcapture -%}
|
||||
|
||||
{% capture quick_shop_button_hoverless %}
|
||||
{%- capture quick_shop_button_hoverless -%}
|
||||
<button
|
||||
class="product-item__hoverless-quick-view-button btn btn--rounded"
|
||||
class="product-item__quick-view--hoverless btn btn--rounded"
|
||||
{{ quick_shop_button_attributes }}
|
||||
tabindex="0"
|
||||
title="{{ quick_shop_button_text }}"
|
||||
>
|
||||
{{ quick_shop_button_hoverless_icon }}
|
||||
</button>
|
||||
{% endcapture %}
|
||||
{% endif %}
|
||||
{%- endcapture -%}
|
||||
{%- endif -%}
|
||||
|
||||
{% liquid
|
||||
# wrap add-to-cart buttons in a product form for no-js or if purchase confirmation and quick cart are disabled
|
||||
{%- 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
|
||||
@@ -178,100 +186,121 @@
|
||||
endform
|
||||
endcapture
|
||||
endif
|
||||
%}
|
||||
|
||||
capture product_item_class
|
||||
echo 'product-item'
|
||||
|
||||
if has_hover_swatches
|
||||
echo ' product-item--with-hover-swatches'
|
||||
endif
|
||||
|
||||
if has_hover_chips
|
||||
echo ' product-item--with-hover-chips'
|
||||
endif
|
||||
|
||||
if settings.enable_border_on_hover
|
||||
echo ' product-item--border-on-hover'
|
||||
endif
|
||||
|
||||
echo ' animation animation--item'
|
||||
|
||||
if has_grid_reveal
|
||||
echo ' animation--item-initial'
|
||||
endif
|
||||
endcapture
|
||||
-%}
|
||||
|
||||
<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 %}
|
||||
"
|
||||
class="{{ product_item_class }}"
|
||||
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 }}">
|
||||
<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
|
||||
assign second_image = prod.media[1]
|
||||
|
||||
if prod.featured_media != prod.media[0]
|
||||
assign second_image = prod.media[0].preview_image
|
||||
assign second_image = prod.media[0]
|
||||
endif
|
||||
endif
|
||||
-%}
|
||||
|
||||
{% render 'image',
|
||||
{%- render 'image',
|
||||
image: prod.featured_media,
|
||||
wrapper_class: image_wrapper_class,
|
||||
aspect_ratio: settings.product_listing_aspect_ratio,
|
||||
focal_point: 'image_presentation',
|
||||
object_fit: settings.product_listing_media_fit,
|
||||
include_placeholder: true,
|
||||
sizes: sizes,
|
||||
src_set_type: 'grid'
|
||||
%}
|
||||
-%}
|
||||
|
||||
{%- if show_multiple_images -%}
|
||||
{% render 'image',
|
||||
{%- render 'image',
|
||||
image: second_image,
|
||||
wrapper_class: 'product-item__image product-item__image--two',
|
||||
aspect_ratio: settings.product_listing_aspect_ratio,
|
||||
focal_point: 'image_presentation',
|
||||
object_fit: settings.product_listing_media_fit,
|
||||
include_placeholder: true,
|
||||
sizes: sizes,
|
||||
no_lazy_load: true,
|
||||
src_set_type: 'grid'
|
||||
%}
|
||||
-%}
|
||||
{%- endif -%}
|
||||
</a>
|
||||
{% unless placeholder %}
|
||||
|
||||
{%- 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 %}
|
||||
{%- endunless -%}
|
||||
|
||||
{% if quick_shop_type != 'none' and quick_view_is_beneath != true %}
|
||||
{%- if quick_shop_type != 'none' and quick_view_is_beneath != true -%}
|
||||
<div class="product-item__hover-action-wrap">
|
||||
{{ quick_shop_button }}
|
||||
{{- quick_shop_button -}}
|
||||
</div>
|
||||
{% endif %}
|
||||
{%- endif -%}
|
||||
|
||||
{% if quick_shop_type != 'none' %}
|
||||
{{ quick_shop_button_hoverless }}
|
||||
{% 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">
|
||||
<h4 class="ff-body product-item__product-title ff-product-listing-title">
|
||||
{%- if placeholder -%}
|
||||
{{ 'homepage.onboarding.product_title' | t }}
|
||||
{{- '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 %}
|
||||
{%- if settings.product_listing_show_vendor and prod.vendor -%}
|
||||
<h5 class="ff-body fs-body-60 product-item__product-vendor">
|
||||
{{ prod.vendor }}
|
||||
{{- prod.vendor -}}
|
||||
</h5>
|
||||
{% endif %}
|
||||
{%- endif -%}
|
||||
|
||||
{% if settings.product_listing_show_rating %}
|
||||
{% render 'product-rating', prod: prod %}
|
||||
{% endif %}
|
||||
{%- liquid
|
||||
if settings.product_listing_show_rating
|
||||
render 'product-rating', prod: prod
|
||||
endif
|
||||
|
||||
{% liquid
|
||||
assign price_content_type = 'price'
|
||||
|
||||
if prod.available
|
||||
@@ -293,18 +322,19 @@
|
||||
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 %}
|
||||
{%- 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
|
||||
{%- 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
|
||||
@@ -335,49 +365,48 @@
|
||||
assign has_null_compare_at_price = true
|
||||
break
|
||||
endif
|
||||
|
||||
endfor
|
||||
%}
|
||||
-%}
|
||||
|
||||
{% unless prod.compare_at_price_varies or has_null_compare_at_price %}
|
||||
{%- unless prod.compare_at_price_varies or has_null_compare_at_price -%}
|
||||
<s class="t-subdued">{{ prod_compare_at_price | money }}</s>
|
||||
{% endunless %}
|
||||
{%- endunless -%}
|
||||
|
||||
{% if prod.price_varies or prod.compare_at_price_varies or has_null_compare_at_price %}
|
||||
{%- 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 %}
|
||||
{%- else -%}
|
||||
<span class="sale">{{ prod_price | money }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% else %}
|
||||
{% if prod.price_varies %}
|
||||
{%- endif -%}
|
||||
{%- else -%}
|
||||
{%- if prod.price_varies -%}
|
||||
{%- assign price = prod_price | money -%}
|
||||
|
||||
{{ 'products.product.from_lowest_price_html' | t: lowest_price: price }}
|
||||
|
||||
{% else %}
|
||||
{{- 'products.product.from_lowest_price_html' | t: lowest_price: price -}}
|
||||
{%- else -%}
|
||||
<span class="product-item__price">{{ prod_price | money }}</span>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{% if settings.product_listing_show_discount %}
|
||||
{%- 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 %}
|
||||
{%- endif -%}
|
||||
|
||||
{% render 'unit-price', item: current_variant %}
|
||||
{%- render 'unit-price', item: prod.selected_or_first_available_variant -%}
|
||||
</p>
|
||||
{% elsif price_content_type == 'custom' %}
|
||||
{% if prod.price_varies and prod_price == 0 %}
|
||||
{%- 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
|
||||
{%- liquid
|
||||
capture from_lowest_price_html
|
||||
echo 'products.product.from_lowest_price_html' | t: lowest_price: custom_price_content
|
||||
endcapture
|
||||
@@ -387,17 +416,17 @@
|
||||
else
|
||||
echo from_lowest_price_html
|
||||
endif
|
||||
%}
|
||||
-%}
|
||||
</p>
|
||||
{% else %}
|
||||
{% if custom_price_content != blank %}
|
||||
{%- else -%}
|
||||
{%- if custom_price_content != blank -%}
|
||||
<p class="product-item__price">{{ custom_price_content }}</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
{%- endif -%}
|
||||
|
||||
{% if has_hover_swatches or has_hover_chips %}
|
||||
{% liquid
|
||||
{%- if has_hover_swatches or has_hover_chips -%}
|
||||
{%- liquid
|
||||
assign option_string = blank
|
||||
|
||||
if has_hover_swatches
|
||||
@@ -415,10 +444,11 @@
|
||||
assign option_string = option_string | append: chip_string
|
||||
endif
|
||||
%}
|
||||
|
||||
<h5 class="ff-body fs-body-50 product-item__swatch-count">
|
||||
{{ option_string }}
|
||||
{{- option_string -}}
|
||||
</h5>
|
||||
{% endif %}
|
||||
{%- endif -%}
|
||||
</div>
|
||||
|
||||
{%- if has_hover_swatches or has_hover_chips -%}
|
||||
@@ -428,7 +458,9 @@
|
||||
prod: prod,
|
||||
option_name: first_swatchified_option,
|
||||
show_sibling_swatches: show_sibling_swatches,
|
||||
sibling_products: sibling_products
|
||||
sibling_products: sibling_products,
|
||||
custom_color_key_map: custom_color_key_map,
|
||||
custom_color_value_map: custom_color_value_map
|
||||
-%}
|
||||
{%- endif -%}
|
||||
|
||||
@@ -438,10 +470,13 @@
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
{%- if quick_shop_type != 'none' and quick_view_is_beneath -%}
|
||||
{{ quick_shop_button }}
|
||||
{%- endif -%}
|
||||
{%- liquid
|
||||
if quick_shop_type != 'none' and quick_view_is_beneath
|
||||
echo quick_shop_button
|
||||
endif
|
||||
-%}
|
||||
</div>
|
||||
|
||||
<div class="product-item__hover-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user