original code

2026-06-29 13:46:09 +08:00
commit 9faedaa44d
4 changed files with 315 additions and 0 deletions
@@ -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 -%}