soulchild/Debutify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Axel
2026-04-30 01:49:11 +08:00
commit de8999073c
2 changed files with 1216 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
snippets/card-product.liquid
+970
View File
@@ -0,0 +1,970 @@
{% 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 -%}
snippets/price.liquid
+246
View File
@@ -0,0 +1,246 @@
{% comment %}
Renders a list of product's price (regular, sale)
Accepts:
- product: {Object} Product Liquid object (optional)
- placeholder: {Boolean} Renders a placeholder price (optional)
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
- price_class: {String} Adds a price class to the price element (optional)
- show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)
Usage:
{% render 'price', product: product %}
{% endcomment %}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
elsif placeholder
assign target = null
else
assign target = product
endif
assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign price_min = product.price_min
assign price_max = product.price_max
assign available = target.available | default: false
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
if use_variant
assign 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 price = target.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign price_min = price
assign price_max = product.price_max | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign compare_at_price = target.price
if target.compare_at_price > compare_at_price
assign compare_at_price = target.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 price = target.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign price_min = price
assign price_max = product.price_max | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign compare_at_price = target.price
if target.compare_at_price > compare_at_price
assign compare_at_price = target.compare_at_price
endif
endif
if price < target.price and compare_at_price == blank
assign compare_at_price = target.price
endif
else
assign 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 price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign price_min = price
assign price_max = product.price_max | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign compare_at_price = product.price
if product.compare_at_price > compare_at_price
assign compare_at_price = 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 price = product.price | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign price_min = price
assign price_max = product.price_max | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil
assign compare_at_price = product.price
if product.compare_at_price > compare_at_price
assign compare_at_price = product.compare_at_price
endif
endif
if price < product.price and compare_at_price == blank
assign compare_at_price = product.price
endif
endif
endif
comment
end Yagi app code
endcomment
assign money_price = price | money
assign money_price_min = price_min | money
assign money_price_max = price_max | money
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_price_min = price_min | money_with_currency
assign money_price_max = price_max | money_with_currency
endif
if target == product and product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
-%}
{%- unless target == null and placeholder == null -%}
<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out{% endif -%}
{%- if compare_at_price > price and product.quantity_price_breaks_configured? != true %} price--on-sale{% endif -%}
{%- if compare_at_price > price and product.quantity_price_breaks_configured? %} volume-pricing--sale-badge{% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
{%- endcomment -%}
<div class="price__regular">
{%- if product.quantity_price_breaks_configured? -%}
{%- if show_compare_at_price and compare_at_price -%}
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">
{{- 'products.product.price.regular_price' | t -}}
</span>
<span>
<s class="price-item price-item--regular variant-item__old-price">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
{%- endif -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular">
{{-
'products.product.volume_pricing.price_range'
| t: minimum: money_price_min, maximum: money_price_max
-}}
</span>
{%- else -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular">
{{ money_price }}
</span>
{%- endif -%}
</div>
<div class="price__sale">
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money }}
{% endif %}
</s>
</span>
{%- endunless -%}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
</div>
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span class="price-item price-item--last">
<span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
<span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</span>
</small>
</div>
{%- if show_badges -%}
{% if settings.dbtfy_discount_saved %}
{% render 'dbtfy-discount-saved', product_compare_price: compare_at_price, product_price: price %}
{% else %}
<span class="badge price__badge-sale dbtfy-sale-badge">
{%- if settings.sale_badge_text != blank -%}
{{- settings.sale_badge_text -}}
{%- else -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
</span>
{% endif %}
<span class="badge price__badge-sold-out dbtfy-sold-out-badge">
{%- if settings.sold_out_badge_text != blank -%}
{{- settings.sold_out_badge_text -}}
{%- else -%}
{{- 'products.product.sold_out' | t -}}
{%- endif -%}
</span>
{%- endif -%}
</div>
{% endunless %}