Axel Kee
450 lines
16 KiB
Plaintext
450 lines
16 KiB
Plaintext
{%- liquid
|
|
assign crop = crop | default: settings.product_tiles_aspect_ratio
|
|
assign shape = shape | default: settings.product_tile_media_shape
|
|
assign hover_image = blank
|
|
if settings.product_tiles_second_image_on_hover and product.media.size > 1
|
|
assign hover_image = product.media[1]
|
|
endif
|
|
if enable_quick_buy
|
|
assign product_form_id = 'product-form-' | append: section.id | append: '-' | append: product.id
|
|
assign current_variant = product.selected_or_first_available_variant
|
|
assign featured_media = current_variant.featured_media | default: product.featured_media
|
|
endif
|
|
if use_variant
|
|
assign target = product.selected_or_first_available_variant
|
|
else
|
|
assign target = product
|
|
endif
|
|
|
|
assign compare_at_price = target.compare_at_price
|
|
assign price = target.price | default: 1999
|
|
|
|
|
|
assign current_variant_price = current_variant.price
|
|
assign current_variant_compare_at_price = current_variant_compare_at_price
|
|
|
|
assign product_price = product.price
|
|
assign product_compare_at_price_max = product.compare_at_price_max
|
|
|
|
comment
|
|
start Yagi app code
|
|
endcomment
|
|
assign product_price = product.metafields.app--168074346497.min_auto_discounted_price.value | default: product.price
|
|
if product_price < product.price and product_compare_at_price_max == 0 or product_compare_at_price_max == blank
|
|
assign product_compare_at_price_max = product.price_max
|
|
endif
|
|
|
|
|
|
assign current_variant_price = current_variant.metafields.app--168074346497.auto_discounted_price.value | default: current_variant.price
|
|
|
|
if current_variant_price < current_variant.price and current_variant_compare_at_price == empty
|
|
assign current_variant_compare_at_price = current_variant.price
|
|
endif
|
|
|
|
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 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 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
|
|
|
|
comment
|
|
end Yagi app code
|
|
endcomment
|
|
|
|
if compare_at_price > price
|
|
assign on_sale = true
|
|
else
|
|
assign on_sale = false
|
|
endif
|
|
assign available = target.available | default: false
|
|
assign money_price = price | money
|
|
if settings.currency_code_enabled
|
|
assign money_price = price | money_with_currency
|
|
endif
|
|
|
|
if target == product and product.price_varies
|
|
assign money_price = money_price | append: '+'
|
|
endif
|
|
|
|
if odd_even == 'odd'
|
|
assign rotate = 5
|
|
else
|
|
assign rotate = -5
|
|
endif
|
|
|
|
unless loading
|
|
assign loading = 'lazy'
|
|
endunless
|
|
|
|
unless preload
|
|
assign preload = false
|
|
endunless
|
|
|
|
unless sizes
|
|
assign sizes = '100vw'
|
|
endunless
|
|
-%}
|
|
{%- if product and product != empty -%}
|
|
<div
|
|
class="product-tile relative {{ class }} {% if display_on_card %}text-scheme-text card{% endif %}"
|
|
>
|
|
{% if enable_quick_buy %}
|
|
{% assign yagi_discount_percentage = '"discount_percentage": 0,"id"' %}
|
|
{% if product.metafields.app--168074346497.discount_percentage.value > 0.01 %}
|
|
{% capture yagi_discount_percentage %}"discount_percentage": {{ product.metafields.app--168074346497.discount_percentage.value }},"id"{% endcapture %}
|
|
{% endif %}
|
|
|
|
|
|
<!-- yagi data island -->
|
|
<data-island
|
|
class="contents"
|
|
x-data="
|
|
QuickBuy({
|
|
product: {{ product | json | replace: '"id"', yagi_discount_percentage | escape }},
|
|
variant: {{ current_variant | json | escape }},
|
|
featuredMediaID: {{ featured_media.id | json }}
|
|
})
|
|
"
|
|
src="{{ 'island-quick-buy.bundle.js' | asset_url }}"
|
|
data-product-root="{{ section.id }}-{{ product.id }}"
|
|
>
|
|
{% endif %}
|
|
<div
|
|
class="product-tile__container {% if display_on_card %}bg-scheme-card card__surface {% if products_per_row_mobile == '2' %}p-2.5 lg:p-5{% else %}p-5{% endif %} h-full{% endif %}"
|
|
>
|
|
{%- if product.featured_media -%}
|
|
<a
|
|
href="{{ product.url | within: collection }}"
|
|
class="product-tile__featured-media group block"
|
|
>
|
|
<div class="product-media-object relative {% unless display_on_card %}{% if settings.media_shadow_direction contains 'top' %}pt-media-shadow{% else %}pb-media-shadow{% endif %}{% endunless %}">
|
|
{%- render 'product-tile-media-image',
|
|
media: product.featured_media,
|
|
shape_id: shape_id,
|
|
shape: shape,
|
|
is_card: display_on_card,
|
|
crop: crop,
|
|
hover_image: hover_image,
|
|
container_id: section.id,
|
|
quick_buy: enable_quick_buy,
|
|
product: product,
|
|
index: index,
|
|
preload: preload,
|
|
loading: loading,
|
|
sizes: sizes,
|
|
will_transform: will_transform
|
|
-%}
|
|
</div>
|
|
</a>
|
|
{%- endif -%}
|
|
<div class="product-tile mt-5 break-words {{ settings.product_tile_text_align }}">
|
|
<a
|
|
href="{{ product.url | within: collection }}"
|
|
class="block h-full w-full"
|
|
>
|
|
<h3 class="font-body text-base">{{ product.title | escape }}</h3>
|
|
{%- if settings.product_tiles_show_vendor -%}
|
|
<p class="mt-1">{{ product.vendor }}</p>
|
|
{%- endif -%}
|
|
|
|
{%- liquid
|
|
assign metafield_namespace = settings.product_tiles_metafield_content | split: '.' | first
|
|
assign metafield_key = settings.product_tiles_metafield_content | split: '.' | last
|
|
assign metafield = product.metafields[metafield_namespace][metafield_key]
|
|
-%}
|
|
{% if metafield != blank %}
|
|
<p class="mt-2.5 text-scheme-text">
|
|
{{ metafield.value }}
|
|
</p>
|
|
{% endif %}
|
|
|
|
{%- if enable_quick_buy -%}
|
|
<span
|
|
class="mt-2.5 inline-block"
|
|
x-html="formatMoney(currentPrice * (1.0 - product.discount_percentage))"
|
|
:class="
|
|
{
|
|
'invisible': !currentVariant
|
|
}
|
|
"
|
|
data-product-price
|
|
>
|
|
{{ current_variant_price | money }}
|
|
</span>
|
|
{% if product_compare_at_price_max > product_price %}
|
|
<span x-show="product.discount_percentage > 0.1 || (currentVariant && product.compare_at_price_max && currentVariant.compare_at_price > currentVariant.price)">
|
|
<span class="{{ price_text_size }}">
|
|
<span class="sr-only">
|
|
{{- 'products.general.sale_price' | t -}}
|
|
</span>
|
|
<s
|
|
data-compare-price
|
|
class="text-scheme-text"
|
|
x-html="formatMoney(currentVariant.compare_at_price)"
|
|
>
|
|
{% if current_variant_compare_at_price
|
|
> current_variant_price
|
|
%}
|
|
{{ current_variant_compare_at_price | money }}
|
|
{% endif %}
|
|
</s>
|
|
</span>
|
|
</span>
|
|
{% endif %}
|
|
{%- else -%}
|
|
{%- render 'price',
|
|
product: product,
|
|
price_class: 'mt-2.5',
|
|
compare_at_price: compare_at_price,
|
|
price: price,
|
|
money_price: money_price,
|
|
on_sale: on_sale
|
|
-%}
|
|
{%- endif -%}
|
|
</a>
|
|
</div>
|
|
{%- if enable_quick_buy -%}
|
|
<div class="product-tile__quick-buy">
|
|
{%- render 'product-tile-quick-buy',
|
|
section: section,
|
|
product: product,
|
|
product_form_id: product_form_id,
|
|
current_variant: current_variant,
|
|
current_variant_only: product.has_only_default_variant,
|
|
is_card: display_on_card
|
|
-%}
|
|
</div>
|
|
{%- endif -%}
|
|
|
|
{% comment %}
|
|
start Yagi app code
|
|
{% endcomment %}
|
|
{% if true or settings.show_save_percentage_badge %}
|
|
{%- if compare_at_price > price or product.metafields.app--168074346497.min_auto_discounted_price.value > 1 -%}
|
|
{% assign sale_text = "Save [percentage]%" %}
|
|
|
|
{% if product.metafields.app--168074346497.discount_percentage.value > 0.005 %}
|
|
{% assign percentage = product.metafields.app--168074346497.discount_percentage.value | times: 100 | floor %}
|
|
|
|
<!-- discount percentage raw value is {{ percentage }} , {{ sale_text }} -->
|
|
{% assign text = sale_text | replace: "[percentage]", percentage | replace: ".0", "" %}
|
|
{% elsif compare_at_price > price %}
|
|
{% assign tmp_percentage = price | times: 1.0 | divided_by: compare_at_price | times: 100 | floor %}
|
|
{% assign percentage = 100.0 | minus: tmp_percentage | floor %}
|
|
{% assign text = sale_text | replace: "[percentage]", percentage | replace: ".0", "" %}
|
|
{% endif %}
|
|
|
|
{%- liquid
|
|
|
|
assign id = 'yagi-sticker-' | append: product.id
|
|
assign shape = settings.on_sale_badge_shape
|
|
assign vertical_position = 15
|
|
assign horizontal_position = 90
|
|
if rotate > 0
|
|
assign rotate = -5
|
|
else
|
|
assign rotate = 5
|
|
endif
|
|
if display_on_card
|
|
assign vertical_position = 5
|
|
endif
|
|
if scatter_position
|
|
assign vertical_position = vertical_position | plus: 15
|
|
endif
|
|
-%}
|
|
{% if text != 'Save [percentage]%' %}
|
|
{%- render 'static-sticker',
|
|
static_id: 'automatic-discounted',
|
|
shape: shape,
|
|
id: id,
|
|
text: text,
|
|
vertical_position: vertical_position,
|
|
horizontal_position: horizontal_position,
|
|
rotate: rotate,
|
|
width: 100,
|
|
font_size: settings.badge_font_size,
|
|
color: 'bg-scheme-accent-2 text-scheme-accent-2-contrast',
|
|
will_transform: will_transform
|
|
%}
|
|
{% endif %}
|
|
{%- endif -%}
|
|
{% endif %}
|
|
{% comment %}
|
|
end Yagi app code
|
|
{% endcomment %}
|
|
{%- if settings.show_on_sale_badge and on_sale -%}
|
|
{%- liquid
|
|
assign text = 'products.product.on_sale' | t
|
|
assign id = 'on-sale-sticker-' | append: product.id
|
|
assign shape = settings.on_sale_badge_shape
|
|
assign vertical_position = 15
|
|
assign horizontal_position = 90
|
|
if rotate > 0
|
|
assign rotate = -5
|
|
else
|
|
assign rotate = 5
|
|
endif
|
|
if display_on_card
|
|
assign vertical_position = 5
|
|
endif
|
|
if scatter_position
|
|
assign vertical_position = vertical_position | plus: 15
|
|
endif
|
|
-%}
|
|
{%- render 'static-sticker',
|
|
static_id: 'on-sale',
|
|
shape: shape,
|
|
id: id,
|
|
text: text,
|
|
vertical_position: vertical_position,
|
|
horizontal_position: horizontal_position,
|
|
rotate: rotate,
|
|
width: 100,
|
|
font_size: settings.badge_font_size,
|
|
color: 'bg-scheme-accent-1 text-scheme-accent-1-contrast',
|
|
will_transform: will_transform
|
|
%}
|
|
{%- endif -%}
|
|
{%- if settings.show_sold_out_badge and available == false -%}
|
|
{%- liquid
|
|
assign text = 'products.product.sold_out' | t
|
|
assign id = 'sold-out-sticker-' | append: product.id
|
|
assign vertical_position = 15
|
|
assign horizontal_position = 10
|
|
if rotate > 0
|
|
assign rotate = -5
|
|
else
|
|
assign rotate = 5
|
|
endif
|
|
if display_on_card
|
|
assign vertical_position = 5
|
|
endif
|
|
if scatter_position
|
|
assign vertical_position = vertical_position | plus: 15
|
|
endif
|
|
-%}
|
|
{%- render 'static-sticker',
|
|
static_id: 'sold-out',
|
|
id: id,
|
|
text: text,
|
|
vertical_position: vertical_position,
|
|
horizontal_position: horizontal_position,
|
|
rotate: rotate,
|
|
width: 100,
|
|
font_size: settings.badge_font_size,
|
|
color: 'bg-scheme-text text-scheme-text-contrast',
|
|
will_transform: will_transform
|
|
%}
|
|
{%- endif -%}
|
|
{%- liquid
|
|
assign metafield_namespace = settings.product_tile_metafield_badge | split: '.' | first
|
|
assign metafield_key = settings.product_tile_metafield_badge | split: '.' | last
|
|
assign metafield_badge = product.metafields[metafield_namespace][metafield_key]
|
|
-%}
|
|
{% if metafield_badge != blank %}
|
|
{%- liquid
|
|
assign text = metafield_badge.value
|
|
assign id = 'metafield-sticker-' | append: product.id
|
|
assign shape = settings.metafield_badge_shape
|
|
assign vertical_position = 15
|
|
if display_on_card
|
|
assign vertical_position = 5
|
|
endif
|
|
if on_sale and available
|
|
assign horizontal_position = 10
|
|
else
|
|
assign horizontal_position = 90
|
|
endif
|
|
if on_sale and sold_out
|
|
if display_on_card
|
|
assign vertical_position = 30
|
|
else
|
|
assign vertical_position = 40
|
|
endif
|
|
endif
|
|
if rotate > 0
|
|
assign rotate = -5
|
|
else
|
|
assign rotate = 5
|
|
endif
|
|
if scatter_position
|
|
assign vertical_position = vertical_position | plus: 15
|
|
endif
|
|
-%}
|
|
{%- render 'static-sticker',
|
|
static_id: 'metafield-badge',
|
|
id: id,
|
|
text: text,
|
|
vertical_position: vertical_position,
|
|
horizontal_position: horizontal_position,
|
|
rotate: rotate,
|
|
width: 100,
|
|
font_size: settings.badge_font_size,
|
|
color: 'bg-scheme-accent-1 text-scheme-accent-1-contrast',
|
|
will_transform: will_transform
|
|
%}
|
|
{% endif %}
|
|
</div>
|
|
{% if enable_quick_buy %}
|
|
</data-island>
|
|
{% endif %}
|
|
</div>
|
|
{%- else -%}
|
|
<div class="product-tile {{ class }} {% if display_on_card %}text-scheme-text card{% endif %}">
|
|
<div class="{% if display_on_card %}bg-scheme-card card__surface p-5 h-full{% endif %}">
|
|
<div class="relative {% unless display_on_card %}{% if settings.media_shadow_direction contains 'top' %}pt-media-shadow{% else %}pb-media-shadow{% endif %}{% endunless %}">
|
|
{%- render 'media-image-placeholder',
|
|
shape_id: shape_id,
|
|
container_id: section.id,
|
|
index: index,
|
|
shape: shape,
|
|
crop: crop,
|
|
is_card: section.settings.display_on_card
|
|
-%}
|
|
</div>
|
|
<div class="product-tile mt-5 text-center">
|
|
<h3 class="font-body text-base">
|
|
{{ 'sections.onboarding.product_title' | t }}
|
|
</h3>
|
|
{% render 'price', price_class: 'mt-2' %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|