commit 9faedaa44dcf8ded5907e4d5065a7e3cc891f2db Author: Axel Date: Mon Jun 29 13:46:09 2026 +0800 original code diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..9529d9c Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..8d0ffc3 --- /dev/null +++ b/README.md @@ -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 \ No newline at end of file diff --git a/snippets/price-list.liquid b/snippets/price-list.liquid new file mode 100644 index 0000000..b87a807 --- /dev/null +++ b/snippets/price-list.liquid @@ -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 +-%} + + + {%- if variant != blank -%} + {%- comment -%} + -------------------------------------------------------------------------------------------------------------------- + VARIANT CASE (used on product page, quick view...) + -------------------------------------------------------------------------------------------------------------------- + {%- endcomment -%} + + {{ 'product.price.sale_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- variant.price | money_with_currency -}} + {%- else -%} + {{- variant.price | money | replace: 'MYR', '' -}} + {%- endif -%} + + + {%- if variant.compare_at_price > variant.price -%} + + {{ 'product.price.regular_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- variant.compare_at_price | money_with_currency -}} + {%- else -%} + {{- variant.compare_at_price | money | replace: 'MYR', '' -}} + {%- endif -%} + + {%- endif -%} + {%- elsif line_item != blank -%} + {%- comment -%} + -------------------------------------------------------------------------------------------------------------------- + LINE ITEM CASE (used on cart, order page...) + -------------------------------------------------------------------------------------------------------------------- + {%- endcomment -%} + + {{ 'product.price.sale_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- line_item.final_line_price | money_with_currency -}} + {%- else -%} + {{- line_item.final_line_price | money | replace: 'MYR', '' -}} + {%- endif -%} + + + {%- if line_item.original_line_price > line_item.final_line_price -%} + + {{ 'product.price.regular_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- line_item.original_line_price | money_with_currency -}} + {%- else -%} + {{- line_item.original_line_price | money | replace: 'MYR', '' -}} + {%- endif -%} + + {%- 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 -%} + + {{ 'product.price.regular_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- cheapest_variant.compare_at_price | money_with_currency -}} + {%- else -%} + {{- cheapest_variant.compare_at_price | money | replace: 'MYR', '' -}} + {%- endif -%} + + + + {{ 'product.price.sale_price' | t }} + {{- 'product.price.from_price_html' | t: price_min: price_min -}} + + {%- else -%} + + {{ 'product.price.sale_price' | t }} + {{- 'product.price.from_price_html' | t: price_min: price_min -}} + + {%- endif -%} + {%- elsif product.price < product.compare_at_price -%} + + {{ 'product.price.regular_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- product.compare_at_price | money_with_currency -}} + {%- else -%} + {{- product.compare_at_price | money | replace: 'MYR', '' -}} + {%- endif -%} + + + {{ 'product.price.sale_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- product.price | money_with_currency -}} + {%- else -%} + {{- product.price | money | replace: 'MYR', '' -}} + {%- endif -%} + + + + {%- 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 -%} + + + {{ 'product.price.sale_price' | t }} + {{- 'product.price.from_price_html' | t: price_min: price_min, price_max: price_max -}} + + {%- else -%} + + {{ 'product.price.sale_price' | t }} + + {%- if settings.currency_code_enabled -%} + {{- product.price | money_with_currency -}} + {%- else -%} + {{- product.price | money | replace: 'MYR', '' -}} + {%- endif -%} + + {%- 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_item.unit_price | unit_price_with_measurement: unit_price_item.unit_price_measurement -}}) + + {%- endif -%} + {%- endunless -%} + \ No newline at end of file diff --git a/snippets/product-badges.liquid b/snippets/product-badges.liquid new file mode 100644 index 0000000..0e63281 --- /dev/null +++ b/snippets/product-badges.liquid @@ -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 -%} + {{ custom_badge }} + {%- endfor -%} + + {%- when 'sold_out' -%} + {%- if settings.show_sold_out_badge -%} + {%- if variant.available == false -%} + + {{- 'product.general.sold_out_badge' | t -}} + + {%- elsif product.tags contains 'preorder' -%} + + {{- 'product.general.pre_order_button' | t -}} + + {%- 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 -%} + + {%- 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 + -%} + + {%- endif -%} + {%- endif -%} + {%- endif -%} + {% if product.metafields.custom.z21_product_label != blank %} +

{{ product.metafields.custom.z21_product_label }}

+ {% endif %} + + {%- endcase -%} + {%- endfor -%} +{%- endcapture -%} + +{%- if badges != blank -%} +
+ {{- badges -}} +
+{%- endif -%} \ No newline at end of file