first commit
This commit is contained in:
Axel Kee
@@ -0,0 +1,449 @@
|
||||
{%- 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 -%}
|
||||
@@ -0,0 +1,25 @@
|
||||
custom original price selector
|
||||
, .product-content [data-product-price]
|
||||
|
||||
custom injected CSS
|
||||
|
||||
.yagi-price-container{display: flex !important; gap: 0.5em; align-items: center !important;} .yagi-price-container .price__sale { display: flex; flex-direction: row !important; justify-content: flex-end; gap: 0.5em; align-items: center;} .yagi-discounted-price { font-size: var(--font-size-lg); font-weight: var(--main-font-weight); } .yagi-original-price { font-size: var(--font-size-lg); font-weight: var(--main-font-weight); } .yagi-sale-badge { font-family: var(--main-font-stack); font-weight: var(--main-font-weight); font-style: var(--main-font-style); letter-spacing: 0; text-decoration: none; color: rgba(var(--color-scheme-accent-2-contrast),var(--tw-text-opacity)); font-size: var(--font-size-sm); line-height: var(--base-line-height); text-align: center; padding-bottom: .25rem; padding-top: .125rem; padding-left: .5rem; padding-right: .5rem; background-color: rgba(var(--color-scheme-accent-2),var(--tw-bg-opacity)); border-color: #000; border-style: solid; border-width: var(--input-border-width); border-radius: var(--button-border-radius); display: inline-block; position: relative; }
|
||||
|
||||
|
||||
custom injected JS
|
||||
|
||||
document.addEventListener("yagi:replacedBlock", (event) => {
|
||||
setTimeout(function() {
|
||||
const yagiBlock = document.querySelector("[data-block-handle='auto_discounted_price_product'],[id*='yagi_automatic_discount_helper_auto_discounted_price_product']");
|
||||
const cartDiscountedPrice = document.querySelectorAll('.add-to-cart-btn span')[3];
|
||||
const cartOriginalPrice = document.querySelector('.add-to-cart-btn span s');
|
||||
|
||||
if(cartDiscountedPrice) {
|
||||
cartDiscountedPrice.textContent = yagiBlock.querySelector('.yagi-discounted-price').textContent;
|
||||
}
|
||||
|
||||
if(cartOriginalPrice) {
|
||||
cartOriginalPrice.textContent = yagiBlock.querySelector('.yagi-original-price').textContent;
|
||||
}
|
||||
}, 100);
|
||||
});
|
||||
Reference in New Issue
Block a user