From 9faedaa44dcf8ded5907e4d5065a7e3cc891f2db Mon Sep 17 00:00:00 2001
From: Axel <axelshaded@gmail.com>
Date: Mon, 29 Jun 2026 13:46:09 +0800
Subject: [PATCH] original code

---
 .DS_Store                      | Bin 0 -> 6148 bytes
 README.md                      |  16 +++
 snippets/price-list.liquid     | 200 +++++++++++++++++++++++++++++++++
 snippets/product-badges.liquid |  99 ++++++++++++++++
 4 files changed, 315 insertions(+)
 create mode 100644 .DS_Store
 create mode 100644 README.md
 create mode 100644 snippets/price-list.liquid
 create mode 100644 snippets/product-badges.liquid

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..9529d9cbda2d7467109f3cd88b63c885798d452e
GIT binary patch
literal 6148
zcmeHKu};G<5WRyAkytu1A^$=a=1`?ykRL#$2#^{Qsj%mR`WZ-k4l^6?`Hrfg85j^k
z=q|F~*}gm5Pm1jm5nVj5OOd&V6evWcG9m1q96E918BlYKUT)<{wwt@MnF#b3ySVm3
zw(=+s(&O8&|E6pEg9RViv|U}VHr<N;ySK}ii}%;7saS2d{+3;TUp8OnJeWSzU?3O>
z27-ZL;KvxiolPmu45JPPf`MRQ&j8PdghH$w2g7`Hpvox#kk9BW(3wlnCplJ*gCRyB
zYOX+YRZlV0+|i%hu5ug<&0W-!5A~TplNZgiBYw)}qLpFP!9XxDX5iGCbKd_;{4$eC
z{@5j2!9XzZ&lu2I-P8+g%J0^r?eVTnDAy<y+6`17&_|B|G<c4j=Rq4!)L~aS4u*`v
S{_GBnhd?GIs$k$382A9h?J*Jn

literal 0
HcmV?d00001

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
+-%}
+
+<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>
\ 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 -%}
+          <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 -%}
\ No newline at end of file