392 lines
22 KiB
Plaintext
392 lines
22 KiB
Plaintext
{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}
|
|
{%- assign color_white_label = 'general.label.white' | t | downcase -%}
|
|
{%- assign quick_buy_icon_name = 'quick-buy-' | append: settings.cart_icon | replace: '_', '-' -%}
|
|
|
|
{%- if product.url contains '?' -%}
|
|
{%- assign product_url_contains_query = true -%}
|
|
{%- else -%}
|
|
{%- assign product_url_contains_query = false -%}
|
|
{%- endif -%}
|
|
|
|
<product-item class="product-item {% unless product.available %}product-item--sold-out{% endunless %}" {% if reveal %}reveal{% endif %}>
|
|
{%- capture product_labels -%}
|
|
{%- for tag in product.tags -%}
|
|
{%- if tag contains '__label' -%}
|
|
<span class="label label--custom{% if tag contains '__label2' %}2{% endif %}">{{ tag | split: ':' | last }}</span>
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
|
|
{%- unless product.available -%}
|
|
<span class="label label--subdued">{{ 'collection.product.sold_out' | t }}</span>
|
|
{%- endunless -%}
|
|
|
|
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}
|
|
|
|
{%- if settings.show_discount and product.available and product.price < product.compare_at_price and cheapest_variant.compare_at_price != blank -%}
|
|
{%- if settings.discount_mode == 'percentage' -%}
|
|
{%- assign savings = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round | append: '%' -%}
|
|
{%- else -%}
|
|
{%- capture savings -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
|
|
{%- endif -%}
|
|
|
|
<span class="label label--highlight">{{ 'collection.product.discount_html' | t: savings: savings }}</span>
|
|
{%- endif -%}
|
|
{%- endcapture -%}
|
|
|
|
<div class="product-item__image-wrapper {% if settings.show_secondary_image and product.media.size > 1 and hide_secondary_image != true %}product-item__image-wrapper--multiple{% endif %}">
|
|
<span class="coll_save">
|
|
|
|
{%- if product_labels != blank and reduced_content != true -%}
|
|
<div class="product-item__label-list label-list">
|
|
{{- product_labels -}}
|
|
</div>
|
|
{%- endif -%}
|
|
</span>
|
|
<a href="{{ product.url }}" data-instant class="product-item__aspect-ratio aspect-ratio {% if settings.product_image_size != 'natural' %}aspect-ratio--{{ settings.product_image_size }}{% endif %}" style="padding-bottom: {{ 100.0 | divided_by: product.featured_media.preview_image.aspect_ratio }}%; --aspect-ratio: {{ product.featured_media.preview_image.aspect_ratio }}">
|
|
{% assign title = product.title | split: '- Style #' -%}
|
|
{%- for i in (1..title.size) -%}
|
|
{% if title.size > 1 and forloop.last %}
|
|
<span{% if title.size > 1 and forloop.last %} class="style-number"{% endif %}>
|
|
{%- if title.size > 1 and forloop.last -%}
|
|
<span>No.</span>
|
|
{%- endif -%}
|
|
{{ title[forloop.index0] | remove:' - Ready to Ship' }}
|
|
{% comment %}
|
|
{%- if forloop.first -%}
|
|
<span class="prod-price">
|
|
{%- render 'saw_compute_discount' with product -%}
|
|
{%- if saw_has_discount == false or saw_product_price >= saw_product_compare_at_price -%}
|
|
<!-- original prices here -->
|
|
{{ product.price | money | remove: '.00' }}
|
|
{%- if on_sale -%}
|
|
<s class="compare-at-price">{{ product.compare_at_price | money | remove: '.00' }}</s>
|
|
{%- endif -%}
|
|
{%- else -%}
|
|
{{ saw_product_price | money }}
|
|
<s class="compare-at-price">{{ saw_product_compare_at_price | money | remove: '.00'}}</s>
|
|
{%- endif -%}
|
|
</span>
|
|
{%- endif -%}
|
|
{% endcomment %}
|
|
</span>
|
|
{% endif %}
|
|
{%- endfor -%}
|
|
|
|
{%- if product.featured_media -%}
|
|
{{ product.featured_media | image_url: width: product.featured_media.width | image_tag: loading: 'lazy', sizes: sizes_attribute, widths: '200,300,400,500,600,700,800,900,1000,1100,1200', class: 'product-item__primary-image', data-media-id: product.featured_media.id }}
|
|
{%- endif -%}
|
|
|
|
{%- if settings.product_color_display == 'swatch' -%}
|
|
{%- for color_label in color_label_list -%}
|
|
{%- if product.options_by_name[color_label] != blank -%}
|
|
{%- for color_option in product.options_by_name[color_label].values -%}
|
|
{%- for variant in product.variants -%}
|
|
{%- if variant.options contains color_option and variant.featured_media != blank -%}
|
|
{%- unless variant.featured_media == product.featured_media -%}
|
|
{{ variant.featured_media | image_url: width: variant.featured_media.width | image_tag: loading: 'lazy', sizes: sizes_attribute, widths: '200,300,400,500,600,700,800,900,1000,1100,1200', class: 'product-item__primary-image', data-media-id: variant.featured_media.id, hidden: true }}
|
|
{% break %}
|
|
{%- endunless -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
|
|
{%- if settings.show_secondary_image and product.media.size > 1 and hide_secondary_image != true -%}
|
|
{%- assign next_media = product.media[product.featured_media.position] | default: product.media[1] -%}
|
|
{{- next_media | image_url: width: next_media.width | image_tag: loading: 'lazy', sizes: sizes_attribute, widths: '200,300,400,500,600,700,800,900,1000,1100,1200', class: 'product-item__secondary-image' -}}
|
|
{%- endif -%}
|
|
</a>
|
|
|
|
{%- if request.page_type != 'password' and settings.product_add_to_cart and product.available and reduced_content != true and show_cta != true -%}
|
|
{%- if product.variants.size == 1 -%}
|
|
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
|
|
{%- form 'product', product, is: 'product-form', id: form_id, class: 'product-item__quick-form' -%}
|
|
<input type="hidden" name="quantity" value="1">
|
|
<input type="hidden" name="id" value="{{ product.first_available_variant.id }}">
|
|
<button is="loader-button" type="submit" class="button button--outline button--text button--full {% if section.settings.desktop_products_per_row >= 5 %}button--small{% endif %} hidden-touch">{{ 'collection.product.add_to_cart_short' | t }}</button>
|
|
<button type="submit" class="product-item__quick-buy-button hidden-no-touch">
|
|
<span class="visually-hidden">{{ 'collection.product.add_to_cart_short' | t }}</span>
|
|
{%- render 'icon' with quick_buy_icon_name -%}
|
|
</button>
|
|
{%- endform -%}
|
|
{%- else -%}
|
|
{%- comment -%}
|
|
IMPLEMENTATION NOTE: Depending on the device we show a different icon or open a different mode (either popover or drawer)
|
|
{%- endcomment -%}
|
|
|
|
<div class="product-item__quick-form">
|
|
<button is="toggle-button" loader aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="button button--outline button--text button--full {% if section.settings.desktop_products_per_row >= 5 %}button--small{% endif %} hidden-touch hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
|
|
<button is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="product-item__quick-buy-button hidden-no-touch hidden-phone">
|
|
<span class="visually-hidden">{{ 'collection.product.quick_view' | t }}</span>
|
|
{%- render 'icon' with quick_buy_icon_name -%}
|
|
</button>
|
|
|
|
<button is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="product-item__quick-buy-button hidden-tablet-and-up">
|
|
<span class="visually-hidden">{{ 'collection.product.quick_view' | t }}</span>
|
|
{%- render 'icon' with quick_buy_icon_name -%}
|
|
</button>
|
|
</div>
|
|
|
|
<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
|
|
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
<div class="product-item__info {% if show_cta %}product-item__info--with-button{% endif %} {% if reduced_font_size %}text--small{% endif %}">
|
|
<div class="product-item-meta">
|
|
{%- if settings.show_vendor -%}
|
|
{%- assign vendor_handle = product.vendor | handle -%}
|
|
{%- assign collection_for_vendor = collections[vendor_handle] -%}
|
|
|
|
{%- unless collection_for_vendor.empty? -%}
|
|
<a class="product-item-meta__vendor heading heading--xsmall" href="{{ collection_for_vendor.url }}" data-instant>{{ product.vendor }}</a>
|
|
{%- else -%}
|
|
<a class="product-item-meta__vendor heading heading--xsmall" href="{{ product.vendor | url_for_vendor }}" data-instant>{{ product.vendor }}</a>
|
|
{%- endunless -%}
|
|
{%- endif -%}
|
|
|
|
<a href="{{ product.url }}" data-instant class="product-item-meta__title">{{ product.title }}</a>
|
|
|
|
|
|
|
|
{%- assign product_in_collects = '[' -%}
|
|
{%- for collection in product.collections -%}
|
|
{%- assign product_in_collects = product_in_collects | append: '{"collection_id":"' | append: collection.id | append: '","product_id":"' | append: product.id | append: '"' | append: ',"product_handle":"' | append: product.handle | append: '"}' -%}
|
|
{% if forloop.last == false %}
|
|
{%- assign product_in_collects = product_in_collects | append: ',' -%}
|
|
{% endif %}
|
|
{%- endfor -%}
|
|
{%- assign product_in_collects = product_in_collects | append: ']' -%}
|
|
<span class="col_clct" clct='{{product_in_collects}}'></span>
|
|
|
|
{% liquid
|
|
# start Yagi app code
|
|
assign target = product.variants | sort: 'price' | first
|
|
assign cheapest_variant_price = target.price
|
|
assign cheapest_variant_compare_at_price = target.compare_at_price
|
|
|
|
assign product_price = product.price
|
|
assign product_compare_at_price = product.compare_at_price
|
|
|
|
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
|
|
|
|
if active_discount
|
|
assign cheapest_variant_price = target.metafields.app--168074346497.auto_discounted_price.value | default: target.price
|
|
|
|
if target.metafields.app--168074346497.discount_type.value != nil and target.metafields.app--168074346497.discount_type.value != "fixed" and product.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: product.metafields.app--168074346497.discount_percentage.value
|
|
|
|
if target.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: target.metafields.app--168074346497.discount_percentage.value
|
|
endif
|
|
|
|
assign cheapest_variant_price = target.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign cheapest_variant_compare_at_price = target.price
|
|
|
|
if target.compare_at_price > cheapest_variant_compare_at_price
|
|
assign cheapest_variant_compare_at_price = target.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
if cheapest_variant_price < target.price and cheapest_variant_compare_at_price == blank
|
|
assign cheapest_variant_compare_at_price = target.price
|
|
endif
|
|
|
|
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
|
|
endif
|
|
|
|
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
|
|
# end Yagi app code
|
|
%}
|
|
|
|
<div class="product-item-meta__price-list-container" data-yagi-product-item>
|
|
<div class="price-list price-list--centered">
|
|
{%- if product.price_varies and product_compare_at_price -%}
|
|
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}
|
|
|
|
{%- capture price_min -%}
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- cheapest_variant_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- cheapest_variant_price | money -}}
|
|
{%- endif -%}
|
|
{%- endcapture -%}
|
|
|
|
{%- if cheapest_variant_price < cheapest_variant_compare_at_price -%}
|
|
<span class="price price--highlight">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
{{- 'collection.product.from_price_html' | t: price_min: price_min -}}
|
|
</span>
|
|
|
|
<span class="price price--compare">
|
|
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
|
|
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- cheapest_variant_compare_at_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- cheapest_variant_compare_at_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{%- else -%}
|
|
<span class="price">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
{{- 'collection.product.from_price_html' | t: price_min: price_min -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- elsif product_price < product_compare_at_price -%}
|
|
<span class="price price--highlight">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- product_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- product_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
|
|
<span class="price price--compare">
|
|
<span class="visually-hidden">{{ 'product.general.regular_price' | t }}</span>
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- product_compare_at_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- product_compare_at_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{%- elsif product.price_varies -%}
|
|
{%- capture price_min -%}
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{ product_price | money_with_currency }}
|
|
{%- else -%}
|
|
{{ product_price | money }}
|
|
{%- endif -%}
|
|
{%- endcapture -%}
|
|
|
|
{%- capture price_max -%}
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- product.price_max | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- product.price_max | money -}}
|
|
{%- endif -%}
|
|
{%- endcapture -%}
|
|
|
|
<span class="price">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
{{- 'collection.product.from_price_html' | t: price_min: price_min, price_max: price_max -}}
|
|
</span>
|
|
{%- else -%}
|
|
<span class="price">
|
|
<span class="visually-hidden">{{ 'product.general.sale_price' | t }}</span>
|
|
|
|
{%- if settings.currency_code_enabled -%}
|
|
{{- product_price | money_with_currency -}}
|
|
{%- else -%}
|
|
{{- product_price | money -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{%- endif -%}
|
|
|
|
{%- if product.selected_or_first_available_variant.unit_price_measurement -%}
|
|
<div class="price price--block text--xsmall text--subdued">
|
|
<div class="unit-price-measurement">
|
|
<span class="unit-price-measurement__price">{{ product.selected_or_first_available_variant.unit_price | money }}</span>
|
|
<span class="unit-price-measurement__separator">/</span>
|
|
|
|
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
|
|
<span class="unit-price-measurement__reference-value">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_value }}</span>
|
|
{%- endif -%}
|
|
|
|
<span class="unit-price-measurement__reference-unit">{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}</span>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
|
|
{%- if settings.show_product_rating and reduced_content != true -%}
|
|
<a class="product-item-meta__reviews-badge text--small" href="{{ product.url }}" data-instant>
|
|
{%- render 'product-rating', product: product -%}
|
|
</a>
|
|
{%- endif -%}
|
|
|
|
{%- if settings.product_color_display != 'hide' and reduced_content != true -%}
|
|
{%- for color_label in color_label_list -%}
|
|
{%- if product.options_by_name[color_label] != blank -%}
|
|
{%- assign product_option = product.options_by_name[color_label] -%}
|
|
|
|
{%- case settings.product_color_display -%}
|
|
{%- when 'count' -%}
|
|
<p class="product-item-meta__color-count text--small text--subdued">{{- 'collection.product.available_colors_count' | t: count: product_option.values.size -}}</p>
|
|
|
|
{%- when 'swatch' -%}
|
|
<div class="product-item-meta__swatch-list color-swatch-list color-swatch-list--mini">
|
|
{%- assign variant_option = 'option' | append: product_option.position -%}
|
|
{%- assign color_swatch_config = settings.color_swatch_config | newline_to_br | split: '<br />' -%}
|
|
|
|
{%- capture color_name -%}{{ section.id }}-{{ block.id }}-{{ product.id }}{%- endcapture -%}
|
|
|
|
{%- for value in product_option.values -%}
|
|
{%- capture color_id -%}{{ color_name }}-{{ forloop.index }}{%- endcapture -%}
|
|
{%- assign color_value_downcase = value | downcase -%}
|
|
{%- assign variant_for_value = product.variants | where: variant_option, value | first -%}
|
|
|
|
<div class="color-swatch color-swatch--white">
|
|
<input class="color-swatch__radio visually-hidden" type="radio" name="{{ color_name }}" id="{{ color_id }}" value="{{ value | escape }}" {% if product_option.selected_value == value %}checked="checked"{% endif %} data-variant-id="{{ variant_for_value.id }}" {% if variant_for_value.featured_media %}data-variant-featured-media="{{ variant_for_value.featured_media.id }}"{% endif %}>
|
|
<label class="color-swatch__item" for="{{ color_id }}" style="{% render 'color-swatch-style', swatch: value.swatch, color_swatch_config: color_swatch_config, value: value %}">
|
|
<span class="visually-hidden">{{ value }}</span>
|
|
</label>
|
|
</div>
|
|
{%- endfor -%}
|
|
</div>
|
|
{%- endcase -%}
|
|
|
|
{%- break -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- if product.available and reduced_content or show_cta -%}
|
|
<div class="product-item__cta-wrapper">
|
|
{%- if product.variants.size == 1 -%}
|
|
{%- capture form_id -%}product_form_{{ section.id }}_{{ block.id }}_{{ product.id }}_{% increment product_form_index %}{%- endcapture -%}
|
|
{%- form 'product', product, is: 'product-form', id: form_id -%}
|
|
<input type="hidden" name="quantity" value="1">
|
|
<input type="hidden" name="id" value="{{ product.first_available_variant.id }}">
|
|
<button type="submit" {% if show_cta %}is="loader-button"{% endif %} class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %}">{{ 'collection.product.add_to_cart_short' | t }}</button>
|
|
{%- endform -%}
|
|
{%- else -%}
|
|
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-phone">{{ 'collection.product.quick_view' | t }}</button>
|
|
<button type="button" {% if show_cta %}loader{% endif %} is="toggle-button" aria-controls="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" aria-expanded="false" class="{% if reduced_content %}product-item__link link text--subdued{% else %}product-item__cta button button--primary{% endif %} hidden-tablet-and-up">{{ 'collection.product.quick_view' | t }}</button>
|
|
|
|
<quick-buy-popover id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-popover" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-popover" class="popover popover--quick-buy hidden-tablet-and-up"></quick-buy-popover>
|
|
<quick-buy-drawer id="product-{{ section.id }}-{{ block.id }}-{{ product.id }}-drawer" href="{{ product.url }}{% if product_url_contains_query %}&{% else %}?{% endif %}view=quick-buy-drawer" class="drawer drawer--large drawer--quick-buy hidden-phone"></quick-buy-drawer>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- elsif reduced_content -%}
|
|
<div class="product-item__cta-wrapper">
|
|
<span class="product-item__link text--subdued">{{ 'collection.product.sold_out' | t }}</span>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</product-item> |