Guides
Start typing to search…

[即將推出] 在前台商品列表價格旁顯示「折扣比例」

為了支援 SHOPLINE 新開發的功能：在前台商品列表價格旁顯示「折扣比例」。對於開啟 Layout Engine 的店家，需要調整代碼以支援新功能。

在前台商品列表價格旁顯示「折扣比例」

Step 1 加入折扣標籤相關程式碼

在後台目錄中點選 網店設計 -> 編輯 HTML/CSS，在資源檔 Tab 下新增 price.liquid，並貼上以下程式碼

{% assign price_class = price_class |  default: 'price' %}
{% assign price_sale_class = price_sale_class |  default: 'price-sale' %}
{% assign price_cross_class = price_cross_class |  default: 'price-crossed' %}
{% assign text_align_class = text_align_class |  default: '' %}

{% assign regular_price = nil %}
{% assign sale_price = nil %}
{% assign show_price_cross = false %}

{% unless product.hide_price %}
  {% if customer != blank and product.has_member_price %}
    {% assign show_member_price = true %}
  {% endif %}

  {% if product.price_varies %}
    {% if shop.variant_saleprice_enabled %}
      {% if show_member_price %}
        {% if product.has_different_member_prices and product.member_checkout_price_range != blank %}
          {% assign sale_price = product.member_checkout_price_range %}
        {% endif %}
        {% if product.has_member_price_max_crossed %}
          {% assign regular_price = product.member_price_max.label %}
          {% assign show_price_cross = product.has_different_member_prices %}
        {% endif %}
      {% else %}
        {% if product.has_different_prices and product.checkout_price_range != blank %}
          {% assign sale_price = product.checkout_price_range %}
        {% endif %}
        {% if product.has_price_max_crossed %}
          {% assign regular_price = product.price_max.label %}
          {% assign show_price_cross = product.has_different_prices %}
        {% endif %}
      {% endif %}
    {% else %}
      {% if show_member_price and product.member_price_min != blank %}
        {% assign regular_price = product.member_price_min %}
      {% elsif product.price_min != blank %}
        {% assign regular_price = product.price_min %}
      {% endif %}
    {% endif %}
  {% else %}
    {% assign regular_price = product.price %}

    {% if show_member_price %}
      {% assign sale_price = product.lower_product_price %}
    {% elsif product.on_sale %}
      {% assign sale_price = product.sale_price %}
    {% endif %}

    {% if product.on_sale or show_member_price %}
      {% assign show_price_cross = true %}
    {% endif %}
  {% endif %}
{% endunless %}

{% if sale_price %}
  <div class="price__sale sl-price primary-color-price {{ price_class }} {{ price_sale_class }} {{ text_align_class }}">
    {{- sale_price -}}
  </div>
{% endif %}

{% if regular_price %}
  <div class="price__regular">
    <span class="
      global-primary dark-primary sl-price {{ price_class }}
      {% if show_price_cross %}{{ price_cross_class }}{% endif %}
      {% if text_align_class %}{{ text_align_class }}{% endif %}
    ">
      {{- regular_price -}}
    </span>

    {% if product.max_discount_rate > 0 and product.max_discount_rate < 0.99 %}
      {% capture discount_label %}
        {% if shop.max_discount_rate_display_type == 'percent' %}
          -{{- 1 |  minus: product.max_discount_rate | round: 2 | times: 100 | remove: ".0" -}}%
        {% elsif shop.max_discount_rate_display_type == 'percent_off' %}
          {{- 1 |  minus: product.max_discount_rate | round: 2 | times: 100 | remove: ".0" -}}% off
        {% else %}
          {{- product.max_discount_rate | round: 2 | times: 10 | remove: ".0" -}}折
        {% endif %}
      {% endcapture %}

      <span class="price__badge --{{- shop.max_discount_rate_display_type -}}">{{ discount_label }}</span>
    {% endif %}
  </div>
{% endif %}

Step 2 加入對應 CSS

搜尋general.css.liquid 或者 theme.css.liquid，並在檔案底部貼上以下程式碼

.product-item .price__regular,
.Product-item .price__regular {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px
}

.product-item .price__regular>.price,
.product-item .price__regular>.Label-price,
.Product-item .price__regular>.price,
.Product-item .price__regular>.Label-price {
  max-width: 100%
}

.product-item .price__regular>.price,
.product-item .price__regular>.Label-price,
.product-item .price__regular>.price-crossed,
.Product-item .price__regular>.price,
.Product-item .price__regular>.Label-price,
.Product-item .price__regular>.price-crossed {
  margin-bottom: 0
}

.product-item .price__badge,
.Product-item .price__badge {
  display: inline-block;
  padding: 2px 6px;
  font-weight: 600
}

.product-item .price__badge.--percent_off,
.Product-item .price__badge.--percent_off {
  text-transform: uppercase
}

Step 3 使用折扣標籤程式碼

修改 product.liquid

在 product.liquid 內 ctrl+f (mac command+f) 尋找字段 {% if product.hide_price == false %}，我們需要使用下方 code 包裹住搜尋到的 if tag 所有內容

{% if shop.features contains 'price_discount_label_plp' %}
  {% assign price_class = 'Label-price' %}
  {% assign price_sale_class = 'is-sale' %}
	{% assign price_cross_class = 'Label-price-original' %}
	{% comment %} avoid product being overwritten by product from outter scope {% endcomment %}
	{% assign product = product %}
	{% include 'price.liquid' %}
{% else %}
  {% comment %}這裡貼入搜尋到的if block所有內容{% endcomment %}
{% endif %}

⚠️ 這邊需要注意不要包裹價格以外的內容，diff code 如下方

--- a/./old_proudct.liquid
+++ b/./new_product.liquid
@@ -41,20 +41,28 @@
         <div class="sold-out-item">{{'shopline_translations.product.sold_out' | translate}}</div>
       </div>
     {% elsif product.available_time_type %}
       <div class="available-time-content">
         <div class="available-time-item">{{ product.available_time_type | prepend: 'shopline_translations.product.' | translate }}</div>
       </div>
     {% endif %}
   </div>
   <div class="Product-info {% if theme.settings.product_name_align %} --plp-product-name-align-{{ theme.settings.product_name_align }} {% endif %}{% if theme.settings.variation_image_style %} --plp-variant-image-{{ theme.settings.variation_image_style }} {% endif %}{% if theme.settings.variation_image_size %} --plp-variant-image-{{ theme.settings.variation_image_size }} {% endif %}">
     <div class="Product-title Label mix-primary-text" style="{% if text_alignment %} text-align: {{ text_alignment }} {% endif %}">{{ product.title }}</div>
+    {% if shop.features contains 'price_discount_label_plp' %}
+      {% assign price_class = 'Label-price' %}
+      {% assign price_sale_class = 'is-sale' %}
+      {% assign price_cross_class = 'Label-price-original' %}
+      {% comment %} avoid product being overwritten by product from outter scope {% endcomment %}
+      {% assign product = product %}
+      {% include 'price.liquid' %}
+    {% else %}
       {% if product.hide_price == false %}
         {% if product.price_varies %}
           {% if shop.variant_saleprice_enabled %}
             {% if customer != blank and product.has_member_price %}
               {% if product.has_different_member_prices and product.member_checkout_price_range != blank %}
                 <div class="Label-price sl-price is-sale primary-color-price">
                   {{ product.member_checkout_price_range }}
                 </div>
               {% endif %}
               {% if product.has_member_price_max_crossed %}
@@ -98,20 +106,22 @@
             {% endif %}
           {% else %}
             {% if product.on_sale %}
               <div class="Label-price sl-price is-sale primary-color-price">
                 {{ product.sale_price }}
               </div>
             {% endif %}
           {% endif %}
           <div class="Label-price sl-price {% if product.on_sale or (customer != blank and product.has_member_price) %}Label-price-original{% endif %}">{{ product.price }}</div>
         {% endif %}
+      {% endif %}
+    {% endif %}
+
     {% if sku_expand_enabled != true and shop.features contains 'plp_variation_selector' and theme.settings.plp_variation_selector.enabled %}
       {% products_variant_selector product_url: product.url %}{% end_products_variant_selector %}
     {% endif %}
-    {% endif %}
 
     {% if show_summary %}
       <div class="summary">{{ product.summary }}</div>
     {% endif %}
   </div>
 </a>

修改 quick_cart_product.liquid

在 quick_cart_product.liquid 內 ctrl+f (mac command+f) 尋找字段 {% if product.hide_price == false %}，我們需要使用下方 code 包裹住搜尋到的 if tag 所有內容

{% if shop.features contains 'price_discount_label_plp' %}
	{% comment %} avoid product being overwritten by product from outter scope {% endcomment %}
  {% assign product = product %}
  {% include 'price.liquid' %}
{% else %}
  {% comment %}這裡貼入搜尋到的 if block 內容{% endcomment %}
{% endif %}

diff code 如下所示

--- a/./old_proudct.liquid
+++ b/./new_product.liquid
@@ -75,20 +75,25 @@
     {% if shop.features contains 'plp_wishlist' and theme.settings.plp_wishlist %}
       {% unless product.available_time_type or product.sold_out and shop.sold_out_enabled %}
         {% plp_wishlist_button class="hover-button" %}{% end_plp_wishlist_button %}
       {% endunless %}
     {% endif %}
   </div>
   <div class="info-box {% if theme.settings.product_name_align %} --plp-product-name-align-{{ theme.settings.product_name_align }} {% endif %}{% if theme.settings.variation_image_style %} --plp-variant-image-{{ theme.settings.variation_image_style }} {% endif %}{% if theme.settings.variation_image_size %} --plp-variant-image-{{ theme.settings.variation_image_size }} {% endif %}">
     <div class="info-box-inner-wrapper">
       <div class="title text-primary-color {% if text_align_class %} {{ text_align_class }} {% endif %}">{{ product.title }}</div>
       <div class="quick-cart-price {% if text_align_class %} {{ text_align_class }} {% endif %}">
+        {% if shop.features contains 'price_discount_label_plp' %}
+          {% comment %} avoid product being overwritten by product from outter scope {% endcomment %}
+          {% assign product = product %}
+          {% include 'price.liquid' %}
+        {% else %}
           {% if product.hide_price == false %}
             {% if product.price_varies %}
               {% if shop.variant_saleprice_enabled %}
                 {% if customer != blank and product.has_member_price %}
                   {% if product.has_different_member_prices and product.member_checkout_price_range != blank %}
                     <div class="price-sale price sl-price primary-color-price {% if text_align_class %} {{ text_align_class }} {% endif %}">
                       {{ product.member_checkout_price_range }}
                     </div>
                   {% endif %}
                   {% if product.has_member_price_max_crossed %}
@@ -147,20 +152,22 @@
               {% endif %}
               <div class="
                 global-primary dark-primary price sl-price
                 {% if product.on_sale or (customer != blank and product.has_member_price) %}price-crossed{% endif %}
                 {% if text_align_class %} {{ text_align_class }} {% endif %}
               ">
                 {{ product.price }}
               </div>
             {% endif %}
           {% endif %}
+        {% endif %}
+        
         {% if sku_expand_enabled != true and shop.features contains 'plp_variation_selector' and theme.settings.plp_variation_selector.enabled %}
           {% products_variant_selector product_url: product.url %}{% end_products_variant_selector %}
         {% endif %}
       </div>
 
       {% if show_summary %}
         <div class="summary">{{ product.summary }}</div>
       {% endif %}
 
       {% if shop.features contains 'plp_wishlist' and theme.settings.plp_wishlist %}

Updated 2 days ago