Axel
971 lines
50 KiB
Plaintext
971 lines
50 KiB
Plaintext
{% comment %}
|
|
Renders a product card
|
|
|
|
Accepts:
|
|
- card_product: {Object} Product Liquid object (optional)
|
|
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
|
|
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
|
|
- show_secondary_image: {String} Show the secondary image on hover. Values are "inherit" and "disabled". Default: inherit (optional)
|
|
- show_carousel: {String} Show the product image carousel. Values are "inherit" and "disabled". Default: inherit (optional)
|
|
- show_vendor: {Boolean} Show the product vendor. Default: false
|
|
- show_rating: {Boolean} Show the product rating. Default: false
|
|
- show_price: {Boolean} Show the product price. Default: True
|
|
- custom_badge_label: {String} Custom label for the badge
|
|
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
|
|
- skip_styles: {Boolean} Don't include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
|
|
- quick_add: {Boolean} Show the quick add button.
|
|
- section_id: {String} The ID of the section that contains this card.
|
|
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
|
|
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
|
|
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)
|
|
|
|
Usage:
|
|
{% render 'card-product', show_vendor: section.settings.show_vendor %}
|
|
{% endcomment %}
|
|
|
|
{% liquid
|
|
if hide_price == blank
|
|
assign hide_price = false
|
|
endif
|
|
|
|
if show_sold_out_badge == blank
|
|
assign show_sold_out_badge = false
|
|
endif
|
|
|
|
if show_sale_badge == blank
|
|
assign show_sale_badge = false
|
|
endif
|
|
%}
|
|
|
|
{% comment %} hide for professionals {% endcomment %}
|
|
{% assign is_pro_customer = false %}
|
|
|
|
{% if customer %}
|
|
{% if customer.tags contains 'Pro level 1'
|
|
or customer.tags contains 'Pro level 2'
|
|
or customer.tags contains 'Pro level 3' %}
|
|
{% assign is_pro_customer = true %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% assign is_professional_product = false %}
|
|
{% for c in card_product.collections %}
|
|
{% if c.handle == 'professional-use' %}
|
|
{% assign is_professional_product = true %}
|
|
{% break %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if media_aspect_ratio %}
|
|
{% if media_aspect_ratio != 'inherit' %}
|
|
{% assign image_aspect_ratio = media_aspect_ratio %}
|
|
{% if media_aspect_ratio == 'circle' %}
|
|
{% assign image_aspect_ratio = '100%' %}
|
|
{% endif %}
|
|
{% style %}
|
|
#shopify-section-{{ section.id }}{
|
|
--dbtfy-image-crop-ratio: {{ image_aspect_ratio }};
|
|
}
|
|
{% endstyle %}
|
|
{% else %}
|
|
{% assign media_aspect_ratio = settings.dbtfy_product_image_crop_ratio %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if image_crop_position and image_crop_position != 'inherit' %}
|
|
{% style %}
|
|
#shopify-section-{{ section.id }}{
|
|
--dbtfy-image-crop-position: {{ image_crop_position }};
|
|
}
|
|
{% endstyle %}
|
|
{% endif %}
|
|
|
|
{%- unless skip_styles -%}
|
|
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
|
|
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
|
|
|
|
{{ 'component-price.css' | asset_url | stylesheet_tag }}
|
|
{{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
|
|
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
|
|
{%- endunless -%}
|
|
{%- if card_product and card_product != empty -%}
|
|
{%- liquid
|
|
if show_secondary_image == 'inherit' and settings.dbtfy_show_second_image_on_hover
|
|
assign show_secondary_image = true
|
|
else
|
|
assign show_secondary_image = false
|
|
endif
|
|
|
|
if show_carousel == 'inherit' and settings.dbtfy_show_product_card_carousel
|
|
assign show_carousel = true
|
|
else
|
|
assign show_carousel = false
|
|
endif
|
|
-%}
|
|
<div class="card-wrapper product-card-wrapper underline-links-hover">
|
|
<div
|
|
class="
|
|
card card--{{ settings.card_style }}
|
|
{% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
|
|
{% if settings.card_style == 'card' %} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}
|
|
{% if image_shape and image_shape != 'default' %} card--shape{% endif %}
|
|
{% if extend_height %} card--extend-height{% endif %}
|
|
{% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
|
|
{% if horizontal_class %} card--horizontal{% endif %}
|
|
image--ratio
|
|
"
|
|
>
|
|
<div
|
|
class="card__inner ratio{% if card_product.featured_media or settings.card_style == 'standard' %} image--ratio{% endif %}"
|
|
>
|
|
<product-card-slider
|
|
data-show-secondary-image="{{ show_secondary_image }}"
|
|
data-size="{{ card_product.media | size }}"
|
|
data-selector="{{ card_product.id }}"
|
|
data-show-carousel="{{ show_carousel }}"
|
|
>
|
|
{%- if card_product.featured_media -%}
|
|
<div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}">
|
|
<div class="media media--transparent media-{{ media_aspect_ratio }}">
|
|
{% unless show_carousel and show_secondary_image %}
|
|
{% if card_product.featured_media.media_type == 'video'
|
|
or card_product.featured_media.media_type == 'external_video'
|
|
%}
|
|
{% assign media = card_product.featured_media %}
|
|
{%- liquid
|
|
capture video_media
|
|
case media.media_type
|
|
when 'external_video'
|
|
assign video_class = 'js-' | append: media.host
|
|
if media.host == 'youtube'
|
|
echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
|
|
else
|
|
echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
|
|
endif
|
|
when 'video'
|
|
echo media | media_tag: image_size: '2048x', autoplay: true, muted: true, loop: loop, controls: false, preload: 'none', class: 'motion-reduce'
|
|
when 'model'
|
|
echo media | media_tag: image_size: '2048x', toggleable: true
|
|
endcase
|
|
endcapture
|
|
-%}
|
|
{{ video_media }}
|
|
{% else %}
|
|
<img
|
|
srcset="
|
|
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
|
|
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
|
|
"
|
|
src="{{ card_product.featured_media | image_url: width: 533 }}"
|
|
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
|
|
alt="{{ card_product.featured_media.alt | escape }}"
|
|
class="motion-reduce"
|
|
width="{{ card_product.featured_media.width }}"
|
|
height="{{ card_product.featured_media.height }}"
|
|
>
|
|
{% endif %}
|
|
{% endunless %}
|
|
|
|
{% comment %} {{ card_product.media | size }} {% endcomment %}
|
|
{% if show_carousel %}
|
|
{% for media in card_product.media %}
|
|
{% comment %} {% if media.id != card_product.featured_media.id %} {% endcomment %}
|
|
{% if media.media_type == 'video' or media.media_type == 'external_video' %}
|
|
{%- liquid
|
|
capture video_media
|
|
case media.media_type
|
|
when 'external_video'
|
|
assign video_class = 'js-' | append: media.host
|
|
if media.host == 'youtube'
|
|
echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
|
|
else
|
|
echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
|
|
endif
|
|
when 'video'
|
|
echo media | media_tag: image_size: '2048x', autoplay: true, muted: true, loop: loop, controls: false, preload: 'none', data-product-id: card_product.id, data-counter: forloop.index, class: 'hidden'
|
|
when 'model'
|
|
echo media | media_tag: image_size: '2048x', toggleable: true
|
|
endcase
|
|
endcapture
|
|
-%}
|
|
{{ video_media }}
|
|
{% else %}
|
|
<img
|
|
srcset="
|
|
{%- if media.width >= 165 -%}{{ media | image_url: width: 165 }} 165w,{%- endif -%}
|
|
{%- if media.width >= 360 -%}{{ media | image_url: width: 360 }} 360w,{%- endif -%}
|
|
{%- if media.width >= 533 -%}{{ media | image_url: width: 533 }} 533w,{%- endif -%}
|
|
{%- if media.width >= 720 -%}{{ media | image_url: width: 720 }} 720w,{%- endif -%}
|
|
{%- if media.width >= 940 -%}{{ media | image_url: width: 940 }} 940w,{%- endif -%}
|
|
{%- if media.width >= 1066 -%}{{ media | image_url: width: 1066 }} 1066w,{%- endif -%}
|
|
{{ media | image_url }} {{ media.width }}w
|
|
"
|
|
data-product-id="{{ card_product.id }}"
|
|
data-counter="{{ forloop.index }}"
|
|
src="{{ media | image_url: width: 533 }}"
|
|
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
|
|
alt="{{ media.alt | escape }}"
|
|
class="motion-reduce hidden"
|
|
width="{{ media.width }}"
|
|
height="{{ media.height }}"
|
|
media-id="{{ media.id }}"
|
|
>
|
|
{% endif %}
|
|
{% comment %} {% endif %} {% endcomment %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
{%- if card_product.media[1] != null and show_secondary_image and show_carousel == false -%}
|
|
{% assign media = card_product.media[1] %}
|
|
{% if media.media_type == 'video' or media.media_type == 'external_video' %}
|
|
{%- liquid
|
|
capture video_media
|
|
case media.media_type
|
|
when 'external_video'
|
|
assign video_class = 'js-' | append: media.host
|
|
if media.host == 'youtube'
|
|
echo media | external_video_url: autoplay: false, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: 'lazy'
|
|
else
|
|
echo media | external_video_url: autoplay: false, loop: loop | external_video_tag: class: video_class, loading: 'lazy'
|
|
endif
|
|
when 'video'
|
|
echo media | media_tag: image_size: '2048x', autoplay: true, muted: true, loop: loop, controls: false, preload: 'none', class: 'motion-reduce'
|
|
when 'model'
|
|
echo media | media_tag: image_size: '2048x', toggleable: true
|
|
endcase
|
|
endcapture
|
|
-%}
|
|
{{ video_media }}
|
|
{% else %}
|
|
<img
|
|
srcset="
|
|
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
|
|
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
|
|
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
|
|
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
|
|
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
|
|
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
|
|
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
|
|
"
|
|
src="{{ card_product.media[1] | image_url: width: 533 }}"
|
|
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
|
|
alt=""
|
|
class="motion-reduce"
|
|
loading="lazy"
|
|
width="{{ card_product.media[1].width }}"
|
|
height="{{ card_product.media[1].height }}"
|
|
>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
<div class="card__content">
|
|
<div class="card__information">
|
|
<h3
|
|
class="card__heading"
|
|
{% if card_product.featured_media == null and settings.card_style == 'standard' %}
|
|
id="title-{{ section_id }}-{{ card_product.id }}"
|
|
{% endif %}
|
|
>
|
|
<a
|
|
href="{{ card_product.url }}"
|
|
id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
|
|
class="full-unstyled-link"
|
|
aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
|
|
>
|
|
{{ card_product.title | escape }}
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
<div class="card__badge {{ settings.badge_position }}">
|
|
{%- if card_product.available == false -%}
|
|
{% unless show_sold_out_badge %}
|
|
<span
|
|
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
|
|
class="badge dbtfy-sold-out-badge"
|
|
>
|
|
{%- if settings.sold_out_badge_text != blank -%}
|
|
{{- settings.sold_out_badge_text -}}
|
|
{%- else -%}
|
|
{{- 'products.product.sold_out' | t -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{% endunless %}
|
|
{%- elsif card_product.compare_at_price > card_product.price
|
|
and card_product.available
|
|
and show_sale_badge == false
|
|
-%}
|
|
{% if settings.dbtfy_discount_saved and section.settings.custom_badge_label == blank %}
|
|
{% liquid
|
|
assign card_product_compare_at_price = card_product.compare_at_price
|
|
assign card_product_price = card_product.price
|
|
|
|
comment
|
|
start Yagi app code
|
|
endcomment
|
|
assign public_or_tags_matched = true
|
|
|
|
if product.metafields.app--168074346497.segment_tags.value.size > 0
|
|
assign public_or_tags_matched = false
|
|
endif
|
|
|
|
for etag in product.metafields.app--168074346497.segment_tags.value
|
|
if customer.tags contains etag
|
|
assign public_or_tags_matched = true
|
|
break
|
|
endif
|
|
endfor
|
|
|
|
if public_or_tags_matched
|
|
assign card_product_price = card_product.metafields.app--168074346497.min_auto_discounted_price.value | default: card_product.price
|
|
|
|
if card_product.metafields.app--168074346497.discount_percentage.value > 0.01
|
|
assign deducted_percentage = 1.0 | minus: card_product.metafields.app--168074346497.discount_percentage.value
|
|
|
|
assign card_product_price = card_product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign card_product_compare_at_price = card_product.price
|
|
|
|
if card_product.compare_at_price > card_product_compare_at_price
|
|
assign card_product_compare_at_price = card_product.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
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 card_product_price = card_product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
|
|
|
|
assign card_product_compare_at_price = card_product.price
|
|
|
|
if card_product.compare_at_price > card_product_compare_at_price
|
|
assign card_product_compare_at_price = card_product.compare_at_price
|
|
endif
|
|
endif
|
|
|
|
if card_product_price < card_product.price and card_product_compare_at_price == blank
|
|
assign card_product_compare_at_price = card_product.price
|
|
endif
|
|
endif
|
|
|
|
comment
|
|
end Yagi app code
|
|
endcomment
|
|
%}
|
|
{% render 'dbtfy-discount-saved',
|
|
product_compare_price: card_product_compare_at_price,
|
|
product_price: card_product_price
|
|
%}
|
|
{% elsif section.settings.custom_badge_label == blank %}
|
|
<span
|
|
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
|
|
class="badge dbtfy-sale-badge"
|
|
>
|
|
{%- if settings.sale_badge_text != blank -%}
|
|
{{- settings.sale_badge_text -}}
|
|
{%- else -%}
|
|
{{- 'products.product.on_sale' | t -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{% endif %}
|
|
{%- endif -%}
|
|
{% if section.settings.custom_badge_label != blank %}
|
|
<span
|
|
class="badge dbtfy-sale-badge"
|
|
style="color:{{ section.settings.custom_badge_color }};background-color:{{section.settings.custom_badge_bg_color }};"
|
|
>
|
|
{% render 'material-icon', icon: custom_badge_icon %}
|
|
{{- section.settings.custom_badge_label -}}
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
<div class="card__badge flex flex-column dbtfy-badges {% if settings.badge_position == 'top right' %}top left{% else %}top right{% endif %}">
|
|
{% if settings.dbtfy_wish_list %}
|
|
{% render 'dbtfy-wishlist-badge',
|
|
product_url: card_product.url,
|
|
dbtfy_wish_list_hover: settings.dbtfy_wish_list_hover
|
|
%}
|
|
{% endif %}
|
|
{% if settings.dbtfy_quick_compare %}
|
|
{% render 'dbtfy-compare-badge',
|
|
product_url: card_product.url,
|
|
dbtfy_compare_hover: settings.dbtfy_quick_compare_hover
|
|
%}
|
|
{% endif %}
|
|
|
|
{% if settings.dbtfy_quick_view %}
|
|
{% assign quick_add_modal = true %}
|
|
<modal-opener class="quick-view-opener" data-modal="#QuickAdd-{{ card_product.id }}">
|
|
<button
|
|
class="quickview-badge badge {% if settings.dbtfy_quick_view_hover %} hidden{% endif %}"
|
|
data-product-url="{{ card_product.url }}"
|
|
>
|
|
{% render 'material-icon', icon: 'visibility' %}
|
|
{%- render 'loading-spinner' -%}
|
|
</button>
|
|
</modal-opener>
|
|
{% endif %}
|
|
</div>
|
|
{% if show_carousel %}
|
|
<div class="card__badge flex flex-column dbtfy-badges bottom left">
|
|
{% render 'dbtfy-arrow-prev', custom_selector: card_product.id, class: 'hidden' %}
|
|
</div>
|
|
<div class="card__badge flex flex-column dbtfy-badges bottom right">
|
|
{% render 'dbtfy-arrow-next', custom_selector: card_product.id, class: 'hidden' %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</product-card-slider>
|
|
</div>
|
|
<div class="card__content">
|
|
{% comment %}
|
|
{% for options in card_product.options %}
|
|
<p>
|
|
{{ options | json }}
|
|
</p>
|
|
{% endfor %}
|
|
|
|
{% for variant in card_product.variants -%}
|
|
{% for option in variant.options -%}
|
|
{{ option }}
|
|
{%- endfor %}
|
|
{%- endfor %}
|
|
{% endcomment %}
|
|
|
|
<div class="card__information">
|
|
{%- if show_vendor and list_type -%}
|
|
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
|
|
<div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
|
|
{%- endif -%}
|
|
<h3
|
|
class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} {% if list_type %}h3{% else %} h5 {% endif %} {% endif %}"
|
|
{% if card_product.featured_media or settings.card_style == 'card' %}
|
|
id="title-{{ section_id }}-{{ card_product.id }}"
|
|
{% endif %}
|
|
>
|
|
<a
|
|
href="{{ card_product.url }}"
|
|
id="CardLink-{{ section_id }}-{{ card_product.id }}"
|
|
class="full-unstyled-link"
|
|
aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
|
|
>
|
|
{{ card_product.title | escape }}
|
|
</a>
|
|
</h3>
|
|
<div class="card-information">
|
|
{%- if show_vendor and list_type == false -%}
|
|
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
|
|
<div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
|
|
{%- endif -%}
|
|
|
|
<span class="caption-large light">{{ block.settings.description | escape }}</span>
|
|
|
|
{%- if show_rating -%}
|
|
{%- render 'product-rating', product: card_product, position: 'product_grid' -%}
|
|
{%- endif -%}
|
|
{% if show_description and card_product.description != blank %}
|
|
<div class="card__description rte">
|
|
{{ card_product.description }}
|
|
</div>
|
|
{% endif %}
|
|
{% comment %} {% unless section.settings.hide_price_and_cart %}
|
|
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
|
|
{% endunless %} {% endcomment %}
|
|
|
|
|
|
{% assign show_price = false %}
|
|
|
|
{% if customer %}
|
|
{% if customer.tags contains 'Pro level 1'
|
|
or customer.tags contains 'Pro level 2'
|
|
or customer.tags contains 'Pro level 3'
|
|
%}
|
|
{% assign show_price = true %}
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% if is_professional_product == false or is_pro_customer %}
|
|
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
|
|
{% else %}
|
|
<div class="price-hidden-message">
|
|
{% comment %} <a href="/account/login">Login to see prices</a> {% endcomment %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
{%- if card_product.quantity_price_breaks_configured? -%}
|
|
{% if card_product.variants.size == 1 and quick_add == 'bulk' %}
|
|
{% liquid
|
|
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
|
|
assign has_qty_rules = false
|
|
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
|
|
assign has_qty_rules = true
|
|
endif
|
|
%}
|
|
<quantity-popover>
|
|
<button class="card__information-volume-pricing-note card__information-volume-pricing-note--button card__information-volume-pricing-note--button-{{ settings.card_text_alignment }} quantity-popover__info-button--icon-only button button button--tertiary medium-hide small-hide">
|
|
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
|
|
</button>
|
|
<button class="card__information-volume-pricing-note card__information-volume-pricing-note--button card__information-volume-pricing-note--button-{{ settings.card_text_alignment }} quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide">
|
|
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
|
|
</button>
|
|
{% else %}
|
|
<div class="card__information-volume-pricing-note">
|
|
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if card_product.variants.size == 1 and quick_add == 'bulk' %}
|
|
<div
|
|
class="global-settings-popup quantity-popover__info"
|
|
tabindex="-1"
|
|
hidden
|
|
id="quantity-popover-info-{{ card_product.selected_or_first_available_variant.id }}"
|
|
>
|
|
{%- if has_qty_rules -%}
|
|
<div class="quantity__rules caption no-js-hidden">
|
|
{%- if quantity_rule.increment > 1 -%}
|
|
<span class="divider">
|
|
{{- 'products.product.quantity.multiples_of' | t: quantity: quantity_rule.increment -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- if quantity_rule.min > 1 -%}
|
|
<span class="divider">
|
|
{{- 'products.product.quantity.min_of' | t: quantity: quantity_rule.min -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- if quantity_rule.max != null -%}
|
|
<span class="divider">
|
|
{{- 'products.product.quantity.max_of' | t: quantity: quantity_rule.max -}}
|
|
</span>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
<button
|
|
class="button-close button button--tertiary large-up-hide"
|
|
type="button"
|
|
aria-label="{{ 'accessibility.close' | t }}"
|
|
>
|
|
{{- 'icon-close.svg' | inline_asset_content -}}
|
|
</button>
|
|
{%- if card_product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
|
|
<volume-pricing class="parent-display">
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<span>{{ card_product.selected_or_first_available_variant.quantity_rule.min }}+</span>
|
|
{%- assign price = card_product.selected_or_first_available_variant.price
|
|
| money_with_currency
|
|
-%}
|
|
<span>{{ 'sections.quick_order_list.each' | t: money: price }}</span>
|
|
</li>
|
|
{%- for price_break in card_product.selected_or_first_available_variant.quantity_price_breaks -%}
|
|
<li>
|
|
<span>
|
|
{{- price_break.minimum_quantity -}}
|
|
<span aria-hidden="true">+</span></span
|
|
>
|
|
{%- assign price = price_break.price | money_with_currency -%}
|
|
<span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</volume-pricing>
|
|
{%- endif -%}
|
|
</div>
|
|
</quantity-popover>
|
|
{% endif %}
|
|
{%- endif -%}
|
|
{% if show_variant_picker %}
|
|
{% render 'product-card-variant-picker', product: card_product %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if list_type %}
|
|
<div class="collecion-list-view-quick-add">
|
|
{% unless hide_price %}
|
|
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
|
|
{% endunless %}
|
|
{% endif %}
|
|
{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
|
|
{% if quick_add == 'standard' %}
|
|
<div class="quick-add no-js-hidden">
|
|
{%- liquid
|
|
assign qty_rules = false
|
|
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
|
|
assign qty_rules = true
|
|
endif
|
|
-%}
|
|
{%- if card_product.variants.size > 1 or qty_rules -%}
|
|
<modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
|
|
<button
|
|
id="{{ product_form_id }}-submit"
|
|
type="submit"
|
|
name="add"
|
|
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
|
|
aria-haspopup="dialog"
|
|
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
|
|
data-product-url="{{ card_product.url }}"
|
|
>
|
|
{{ 'products.product.choose_options' | t }}
|
|
{%- if horizontal_quick_add -%}
|
|
<span class="icon-wrap">
|
|
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- render 'loading-spinner' -%}
|
|
</button>
|
|
</modal-opener>
|
|
{% assign quick_add_modal = true %}
|
|
{%- else -%}
|
|
|
|
|
|
{% comment %} Hide add to cart for specific collections {% endcomment %}
|
|
|
|
{% assign hidden_collections = section.settings.hide_for_collections | split: ',' %}
|
|
{% assign current_collection = collection.handle | strip %}
|
|
{% assign product_collection_handles = product.collections | map: 'handle' %}
|
|
|
|
{% assign hide_product = false %}
|
|
{% for handle in product_collection_handles %}
|
|
{% if handle == 'professional-use' %}
|
|
{% assign hide_product = true %}
|
|
{% break %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if is_professional_product and is_pro_customer == false %}
|
|
|
|
<a href="{{ card_product.url }}" class="button button--secondary button--full-width">
|
|
View Details
|
|
</a>
|
|
{%- else -%}
|
|
<product-form data-section-id="{{ section.id }}">
|
|
{%- form 'product',
|
|
card_product,
|
|
id: product_form_id,
|
|
class: 'form',
|
|
novalidate: 'novalidate',
|
|
data-type: 'add-to-cart-form'
|
|
-%}
|
|
<input
|
|
type="hidden"
|
|
name="id"
|
|
value="{{ card_product.selected_or_first_available_variant.id }}"
|
|
class="product-variant-id"
|
|
{% if card_product.selected_or_first_available_variant.available == false %}
|
|
disabled
|
|
{% endif %}
|
|
>
|
|
<button
|
|
id="{{ product_form_id }}-submit"
|
|
type="submit"
|
|
name="add"
|
|
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
|
|
aria-haspopup="dialog"
|
|
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
|
|
aria-live="polite"
|
|
data-sold-out-message="true"
|
|
{% if card_product.selected_or_first_available_variant.available == false %}
|
|
disabled
|
|
{% endif %}
|
|
>
|
|
<span>
|
|
{%- if card_product.selected_or_first_available_variant.available -%}
|
|
{{ 'products.product.add_to_cart' | t }}
|
|
{%- else -%}
|
|
{{ 'products.product.sold_out' | t }}
|
|
{%- endif -%}
|
|
</span>
|
|
<span class="sold-out-message hidden">
|
|
{{ 'products.product.sold_out' | t }}
|
|
</span>
|
|
{%- if horizontal_quick_add -%}
|
|
<span class="icon-wrap">
|
|
{{- 'icon-plus.svg' | inline_asset_content -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- render 'loading-spinner' -%}
|
|
</button>
|
|
{%- endform -%}
|
|
</product-form>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
</div>
|
|
{% elsif quick_add == 'bulk' %}
|
|
{% if card_product.variants.size == 1 %}
|
|
<quick-add-bulk
|
|
data-min="{{ card_product.selected_or_first_available_variant.quantity_rule.min }}"
|
|
id="quick-add-bulk-{{ card_product.selected_or_first_available_variant.id }}-{{ section.id }}"
|
|
class="quick-add-bulk"
|
|
data-index="{{ card_product.selected_or_first_available_variant.id }}"
|
|
>
|
|
{% if card_product.selected_or_first_available_variant.available == false %}
|
|
<button
|
|
id="{{ product_form_id }}-submit"
|
|
type="submit"
|
|
name="add"
|
|
class="quick-add__submit button button--full-width button--secondary"
|
|
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
|
|
data-sold-out-message="true"
|
|
disabled
|
|
>
|
|
<span>{{ 'products.product.sold_out' | t }}</span>
|
|
<span class="sold-out-message hidden">
|
|
{{ 'products.product.sold_out' | t }}
|
|
</span>
|
|
</button>
|
|
{% else %}
|
|
{% render 'quantity-input', variant: card_product.selected_or_first_available_variant, min: 0 %}
|
|
{% endif %}
|
|
</quick-add-bulk>
|
|
{% else %}
|
|
<div class="quick-add no-js-hidden">
|
|
{%- liquid
|
|
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
|
|
assign qty_rules = false
|
|
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
|
|
assign qty_rules = true
|
|
endif
|
|
-%}
|
|
<modal-opener
|
|
id="QuickBulk-{{ card_product.id }}-{{ section_id }}"
|
|
data-modal="#QuickAddBulk-{{ card_product.id }}-{{ section.id }}"
|
|
>
|
|
<button
|
|
id="{{ product_form_id }}-submit"
|
|
type="submit"
|
|
name="add"
|
|
class="quick-add__submit button button--full-width button--secondary"
|
|
aria-haspopup="dialog"
|
|
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
|
|
data-product-url="{{ card_product.url }}"
|
|
>
|
|
{{ 'products.product.choose_options' | t }}
|
|
{%- render 'loading-spinner' -%}
|
|
</button>
|
|
</modal-opener>
|
|
<modal-dialog
|
|
id="QuickAddBulk-{{ card_product.id }}-{{ section_id }}"
|
|
class="quick-add-modal color-{{ section.settings.custom_color_scheme }} dbtfy-color-{{ section.settings.color_scheme }}"
|
|
>
|
|
<div
|
|
role="dialog"
|
|
aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
|
|
aria-modal="true"
|
|
class="quick-add-modal__content quick-add-modal__content--bulk global-settings-popup"
|
|
tabindex="-1"
|
|
>
|
|
<button
|
|
id="ModalClose-{{ card_product.id }}"
|
|
type="button"
|
|
class="quick-add-modal__toggle"
|
|
aria-label="{{ 'accessibility.close' | t }}"
|
|
>
|
|
{{- 'icon-close.svg' | inline_asset_content -}}
|
|
</button>
|
|
<div
|
|
id="QuickAddInfo-{{ card_product.id }}"
|
|
class="quick-add-modal__content-info quick-add-modal__content-info--bulk"
|
|
>
|
|
<div class="quick-add__content-info__media">
|
|
<div class="quick-add__info">
|
|
{%- if card_product.featured_media -%}
|
|
<div
|
|
class="quick-add__product-media"
|
|
>
|
|
<div class="quick-add__product-container global-media-settings">
|
|
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
|
|
<img
|
|
srcset="
|
|
{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
|
|
{%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
|
|
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
|
|
"
|
|
src="{{ card_product.featured_media | image_url: width: 533 }}"
|
|
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
|
|
alt="{{ card_product.featured_media.alt | escape }}"
|
|
class="motion-reduce"
|
|
width="{{ card_product.featured_media.width }}"
|
|
height="{{ card_product.featured_media.height }}"
|
|
>
|
|
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
<a
|
|
{% if card_product == blank %}
|
|
role="link" aria-disabled="true"
|
|
{% else %}
|
|
href="{{ card_product.url }}"
|
|
{% endif %}
|
|
class="link product__view-details animate-arrow small-hide medium-hide button--link"
|
|
>
|
|
<span>
|
|
{{ 'products.product.view_full_details' | t -}}
|
|
</span>
|
|
{{- 'icon-arrow.svg' | inline_asset_content -}}
|
|
</a>
|
|
</div>
|
|
<div class="quick-add-modal__content-info--bulk-details large-up-hide">
|
|
<a href="{{ card_product.url }}" class="full-unstyled-link">
|
|
<h3>{{ card_product.title | escape }}</h3>
|
|
</a>
|
|
{% unless hide_price %}
|
|
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
|
|
{% endunless %}
|
|
{%- if card_product.quantity_price_breaks_configured? -%}
|
|
<div class="card__information-volume-pricing-note">
|
|
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="quick-add-modal__content-info--bulk-details small-hide medium-hide">
|
|
<a href="{{ card_product.url }}" class="full-unstyled-link">
|
|
<h3 class="h2">
|
|
{{ card_product.title | escape }}
|
|
</h3>
|
|
</a>
|
|
{% unless hide_price %}
|
|
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
|
|
{% endunless %}
|
|
{%- if card_product.quantity_price_breaks_configured? -%}
|
|
<div class="card__information-volume-pricing-note">
|
|
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
<bulk-modal
|
|
id="QuickBulkModal-{{ card_product.id }}-{{ section_id }}"
|
|
data-url="{{ card_product.url }}"
|
|
data-section-id="{{ section_id }}"
|
|
data-product-id="{{ card_product.id }}"
|
|
>
|
|
</bulk-modal>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</modal-dialog>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% if list_type %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="card__badge {{ settings.badge_position }}">
|
|
{%- if card_product.available == false -%}
|
|
{% unless show_sold_out_badge %}
|
|
<span
|
|
id="Badge-{{ section_id }}-{{ card_product.id }}"
|
|
class="badge dbtfy-sold-out-badge"
|
|
>
|
|
{%- if settings.sold_out_badge_text != blank -%}
|
|
{{- settings.sold_out_badge_text -}}
|
|
{%- else -%}
|
|
{{- 'products.product.sold_out' | t -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{% endunless %}
|
|
{%- elsif card_product.compare_at_price > card_product.price
|
|
and card_product.available
|
|
and show_sale_badge == false
|
|
-%}
|
|
<span
|
|
id="Badge-{{ section_id }}-{{ card_product.id }}"
|
|
class="badge dbtfy-sale-badge"
|
|
>
|
|
{%- if settings.sale_badge_text != blank -%}
|
|
{{- settings.sale_badge_text -}}
|
|
{%- else -%}
|
|
{{- 'products.product.on_sale' | t -}}
|
|
{%- endif -%}
|
|
</span>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
|
|
{% if quick_add_modal == true %}
|
|
<quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
|
|
<div
|
|
role="dialog"
|
|
aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
|
|
aria-modal="true"
|
|
class="quick-add-modal__content global-settings-popup"
|
|
tabindex="-1"
|
|
>
|
|
<button
|
|
id="ModalClose-{{ card_product.id }}"
|
|
type="button"
|
|
class="quick-add-modal__toggle"
|
|
aria-label="{{ 'accessibility.close' | t }}"
|
|
>
|
|
{{- 'icon-close.svg' | inline_asset_content -}}
|
|
</button>
|
|
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
|
|
</div>
|
|
</quick-add-modal>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{%- else -%}
|
|
<div class="card-wrapper product-card-wrapper underline-links-hover">
|
|
<div
|
|
class="
|
|
card card--{{ settings.card_style }}
|
|
{% if extend_height %} card--extend-height{% endif %}
|
|
{% if image_shape and image_shape != 'default' %} card--shape{% endif %}
|
|
{% if settings.card_style == 'card' %} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}
|
|
image--ratio
|
|
"
|
|
>
|
|
<div
|
|
class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %} ratio image--ratio"
|
|
>
|
|
<div
|
|
class="card__media {% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_custom_color_scheme }} dbtfy-color-{{ settings.card_color_scheme }} gradient{% endif %}"
|
|
>
|
|
<div
|
|
class="media media--transparent media-{{ media_aspect_ratio }}"
|
|
>
|
|
{%- if placeholder_image -%}
|
|
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
|
|
{%- else -%}
|
|
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card__content">
|
|
<div class="card__information">
|
|
<h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
|
|
<a role="link" aria-disabled="true" class="full-unstyled-link">
|
|
{{ 'onboarding.product_title' | t }}
|
|
</a>
|
|
</h3>
|
|
<div class="card-information">
|
|
{%- if show_vendor -%}
|
|
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
|
|
<div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
|
|
{%- endif -%}
|
|
{% unless hide_price %}
|
|
{% render 'price', placeholder: placeholder, show_compare_at_price: true %}
|
|
{% endunless %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|