original code
This commit is contained in:
Axel
@@ -0,0 +1,16 @@
|
|||||||
|
# README
|
||||||
|
|
||||||
|
To show discounted price on the collection page, kindly reference the files below (you can navigate from the browser UI above)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The code below is for store specific product page widget configuration reference , you do not need to do anything with the code below.
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
.yagi-price-container{display: flex; gap: 0.5em; align-items: center;} .yagi-price-container .price__sale { display: flex; flex-direction: row-reverse !important; justify-content: flex-end; gap: 0.75rem; align-items: center;} .yagi-discounted-price { color: rgb(var(--on-sale-text)); font-size: 25px; } .yagi-original-price { color: rgb(var(--text-color) / .7) }
|
||||||
|
|
||||||
|
## Price Selector
|
||||||
|
|
||||||
|
.product-info__price
|
||||||
@@ -0,0 +1,200 @@
|
|||||||
|
{%- comment -%}
|
||||||
|
----------------------------------------------------------------------------------------------------------------------
|
||||||
|
PRODUCT PRICE
|
||||||
|
----------------------------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
This component generates price list for a given product. It handles the rendering of both price, compare at price,
|
||||||
|
sale price and unit price
|
||||||
|
|
||||||
|
********************************************
|
||||||
|
Supported variables
|
||||||
|
********************************************
|
||||||
|
|
||||||
|
* product: the product from which prices are rendered
|
||||||
|
* variant: if a variant is specified, then only the price from this variant is rendered (used in product details)
|
||||||
|
* line_item: if a line item is specified, then the price from this line item are rendered
|
||||||
|
* hide_unit_price: if set to true, unit pricing are hidden (this is useful for elements that are very size constrained)
|
||||||
|
* size: can be either "sm" or "lg". If none is passed it will use the standard size
|
||||||
|
* alignment: can be "center" to align the prices
|
||||||
|
{%- endcomment -%}
|
||||||
|
|
||||||
|
{%- liquid
|
||||||
|
case size
|
||||||
|
when 'lg'
|
||||||
|
assign regular_price_classes = 'text-lg'
|
||||||
|
assign on_sale_price_classes = 'text-lg text-on-sale'
|
||||||
|
assign compare_at_price_classes = 'text-subdued line-through'
|
||||||
|
assign unit_price_classes = 'text-subdued'
|
||||||
|
|
||||||
|
when 'sm'
|
||||||
|
assign regular_price_classes = 'text-subdued text-sm'
|
||||||
|
assign on_sale_price_classes = 'text-on-sale text-sm'
|
||||||
|
assign compare_at_price_classes = 'text-subdued text-sm line-through'
|
||||||
|
assign unit_price_classes = 'text-subdued text-sm'
|
||||||
|
|
||||||
|
else
|
||||||
|
assign regular_price_classes = 'text-subdued'
|
||||||
|
assign on_sale_price_classes = 'text-on-sale'
|
||||||
|
assign compare_at_price_classes = 'text-subdued line-through'
|
||||||
|
assign unit_price_classes = 'text-subdued text-sm'
|
||||||
|
endcase
|
||||||
|
-%}
|
||||||
|
|
||||||
|
<price-list class="price-list {% if size == 'lg' %}price-list--lg{% endif %} {% if text_alignment == 'center' %}justify-center{% endif %}">
|
||||||
|
{%- if variant != blank -%}
|
||||||
|
{%- comment -%}
|
||||||
|
--------------------------------------------------------------------------------------------------------------------
|
||||||
|
VARIANT CASE (used on product page, quick view...)
|
||||||
|
--------------------------------------------------------------------------------------------------------------------
|
||||||
|
{%- endcomment -%}
|
||||||
|
<sale-price class="{% if variant.compare_at_price > variant.price %}{{ on_sale_price_classes }}{% else %}{{ regular_price_classes }}{% endif %}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- variant.price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- variant.price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</sale-price>
|
||||||
|
|
||||||
|
{%- if variant.compare_at_price > variant.price -%}
|
||||||
|
<compare-at-price class="{{ compare_at_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- variant.compare_at_price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- variant.compare_at_price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</compare-at-price>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- elsif line_item != blank -%}
|
||||||
|
{%- comment -%}
|
||||||
|
--------------------------------------------------------------------------------------------------------------------
|
||||||
|
LINE ITEM CASE (used on cart, order page...)
|
||||||
|
--------------------------------------------------------------------------------------------------------------------
|
||||||
|
{%- endcomment -%}
|
||||||
|
<sale-price class="{% if line_item.original_line_price > line_item.final_line_price %}{{ on_sale_price_classes }}{% else %}{{ regular_price_classes }}{% endif %}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- line_item.final_line_price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- line_item.final_line_price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</sale-price>
|
||||||
|
|
||||||
|
{%- if line_item.original_line_price > line_item.final_line_price -%}
|
||||||
|
<compare-at-price class="{{ compare_at_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- line_item.original_line_price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- line_item.original_line_price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</compare-at-price>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- else -%}
|
||||||
|
{%- comment -%}
|
||||||
|
--------------------------------------------------------------------------------------------------------------------
|
||||||
|
PRODUCT CASE (used on card)
|
||||||
|
--------------------------------------------------------------------------------------------------------------------
|
||||||
|
{%- endcomment -%}
|
||||||
|
{%- if product.price_varies and product.compare_at_price -%}
|
||||||
|
{%- assign cheapest_variant = product.variants | sort: 'price' | first -%}
|
||||||
|
|
||||||
|
{%- capture price_min -%}
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- cheapest_variant.price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- cheapest_variant.price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endcapture -%}
|
||||||
|
|
||||||
|
{%- if cheapest_variant.price < cheapest_variant.compare_at_price -%}
|
||||||
|
<compare-at-price class="{{ compare_at_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- cheapest_variant.compare_at_price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- cheapest_variant.compare_at_price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</compare-at-price>
|
||||||
|
|
||||||
|
<sale-price class="{{ on_sale_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
{{- 'product.price.from_price_html' | t: price_min: price_min -}}
|
||||||
|
</sale-price>
|
||||||
|
{%- else -%}
|
||||||
|
<sale-price class="{{ regular_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
{{- 'product.price.from_price_html' | t: price_min: price_min -}}
|
||||||
|
</sale-price>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- elsif product.price < product.compare_at_price -%}
|
||||||
|
<compare-at-price class="{{ compare_at_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.regular_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- product.compare_at_price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- product.compare_at_price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</compare-at-price>
|
||||||
|
<sale-price class="{{ on_sale_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- product.price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- product.price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</sale-price>
|
||||||
|
|
||||||
|
|
||||||
|
{%- elsif product.price_varies -%}
|
||||||
|
{%- capture price_min -%}
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{ product.price_min | money_with_currency | replace: 'MYR', ''}}
|
||||||
|
{%- else -%}
|
||||||
|
{{ product.price_min | money | replace: 'MYR', '' }}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endcapture -%}
|
||||||
|
|
||||||
|
{%- capture price_max -%}
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- product.price_max | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- product.price_max | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endcapture -%}
|
||||||
|
|
||||||
|
<sale-price class="{{ regular_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
{{- 'product.price.from_price_html' | t: price_min: price_min, price_max: price_max -}}
|
||||||
|
</sale-price>
|
||||||
|
{%- else -%}
|
||||||
|
<sale-price class="{{ regular_price_classes }}">
|
||||||
|
<span class="sr-only">{{ 'product.price.sale_price' | t }}</span>
|
||||||
|
|
||||||
|
{%- if settings.currency_code_enabled -%}
|
||||||
|
{{- product.price | money_with_currency -}}
|
||||||
|
{%- else -%}
|
||||||
|
{{- product.price | money | replace: 'MYR', '' -}}
|
||||||
|
{%- endif -%}
|
||||||
|
</sale-price>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- unless hide_unit_price -%}
|
||||||
|
{%- assign unit_price_item = variant | default: line_item | default: product.selected_or_first_available_variant -%}
|
||||||
|
|
||||||
|
{%- if unit_price_item.unit_price -%}
|
||||||
|
<unit-price class="{{ unit_price_classes }}">
|
||||||
|
({{- unit_price_item.unit_price | unit_price_with_measurement: unit_price_item.unit_price_measurement -}})
|
||||||
|
</unit-price>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endunless -%}
|
||||||
|
</price-list>
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
{%- comment -%}
|
||||||
|
----------------------------------------------------------------------------------------------------------------------
|
||||||
|
PRODUCT BADGES COMPONENT
|
||||||
|
----------------------------------------------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
This component is used in product listing and product page to render the badges of a given product
|
||||||
|
|
||||||
|
********************************************
|
||||||
|
Supported variables
|
||||||
|
********************************************
|
||||||
|
|
||||||
|
* product: the product to render the badges
|
||||||
|
* variant: the specific variant to show the badge from
|
||||||
|
* types: the types of badge to output. Can be "custom", "sold_out" or "discount" (or a combination separated by comma). If nothing is set, all badges are outputted.
|
||||||
|
* context: can be "product" or "card"
|
||||||
|
* class: an extra class added on the container
|
||||||
|
{%- endcomment -%}
|
||||||
|
|
||||||
|
{%- assign badge_types = types | default: 'custom, sold_out, discount' | split: ',' -%}
|
||||||
|
{%- assign variant = variant | default: product.selected_or_first_available_variant -%}
|
||||||
|
|
||||||
|
{%- capture badges -%}
|
||||||
|
{%- for badge_type in badge_types -%}
|
||||||
|
{%- assign stripped_badge_type = badge_type | strip -%}
|
||||||
|
|
||||||
|
{%- case stripped_badge_type -%}
|
||||||
|
{%- when 'custom' -%}
|
||||||
|
{%- assign custom_badges = product.metafields.custom.badges.value | sort -%}
|
||||||
|
|
||||||
|
{%- for custom_badge in custom_badges -%}
|
||||||
|
<span class="badge badge--primary">{{ custom_badge }}</span>
|
||||||
|
{%- endfor -%}
|
||||||
|
|
||||||
|
{%- when 'sold_out' -%}
|
||||||
|
{%- if settings.show_sold_out_badge -%}
|
||||||
|
{%- if variant.available == false -%}
|
||||||
|
<sold-out-badge class="badge badge--sold-out">
|
||||||
|
{{- 'product.general.sold_out_badge' | t -}}
|
||||||
|
</sold-out-badge>
|
||||||
|
{%- elsif product.tags contains 'preorder' -%}
|
||||||
|
<span class="badge badge--sold-out badge--pre-order">
|
||||||
|
{{- 'product.general.pre_order_button' | t -}}
|
||||||
|
</span>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- when 'discount' -%}
|
||||||
|
{%- if settings.show_discount -%}
|
||||||
|
{%- liquid
|
||||||
|
assign show_on_sale_badge = false
|
||||||
|
|
||||||
|
if context == 'product'
|
||||||
|
if variant.compare_at_price > variant.price
|
||||||
|
assign show_on_sale_badge = true
|
||||||
|
endif
|
||||||
|
elsif context == 'card'
|
||||||
|
if product.compare_at_price > product.price
|
||||||
|
assign show_on_sale_badge = true
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
|
||||||
|
{%- if product.compare_at_price > product.price -%}
|
||||||
|
{%- if settings.discount_mode == 'percentage' -%}
|
||||||
|
{%- assign savings = variant.compare_at_price | minus: variant.price | times: 100.0 | divided_by: variant.compare_at_price | round | append: '%' -%}
|
||||||
|
{%- else -%}
|
||||||
|
{%- capture savings -%}{{ variant.compare_at_price | minus: variant.price | money }}{%- endcapture -%}
|
||||||
|
{%- endif -%}
|
||||||
|
|
||||||
|
{%- if show_on_sale_badge -%}
|
||||||
|
<on-sale-badge class="badge badge--on-sale">
|
||||||
|
{%- liquid
|
||||||
|
if context == 'product'
|
||||||
|
echo 'product.general.discount_badge_html' | t: savings: savings
|
||||||
|
elsif context == 'card'
|
||||||
|
if product.compare_at_price_varies or variant.compare_at_price == blank
|
||||||
|
echo 'product.general.on_sale_badge' | t
|
||||||
|
else
|
||||||
|
echo 'product.general.discount_badge_html' | t: savings: savings
|
||||||
|
endif
|
||||||
|
endif
|
||||||
|
-%}
|
||||||
|
</on-sale-badge>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endif -%}
|
||||||
|
{% if product.metafields.custom.z21_product_label != blank %}
|
||||||
|
<p class="product-label">{{ product.metafields.custom.z21_product_label }} </p>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{%- endcase -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
{%- endcapture -%}
|
||||||
|
|
||||||
|
{%- if badges != blank -%}
|
||||||
|
<div class="{{ class }}">
|
||||||
|
{{- badges -}}
|
||||||
|
</div>
|
||||||
|
{%- endif -%}
|
||||||
Reference in New Issue
Block a user