initial commit

2026-10-20 17:06:57 +08:00
commit e494c3b82b
@@ -0,0 +1,44 @@
+## How to show discounted price on collection page, for Boost AI Search & Filter app
+
+
+
+1. Enable the "Discount percentage text" metafield in the Boost app > Settings > Metafield (so that we can access it and display it)
+
+
+
+![Settings and Metafields](boost1.png)
+
+
+
+![Add Metafield](boost2.png)
+
+
+
+
+
+2. After adding metafield, go to "Integration" > "Shopify integration", and select "Templates "
+
+
+
+![Select Shopify integration](boost3.png)
+
+
+
+![Click Manage template](boost4.png)
+
+
+
+3. Select the active template, and click "Edit code"
+
+
+
+![Edit code](boost5.png)
+
+
+
+
+
+Then modify the **product-label/main.liquid** file and **product-price/main.liquid** file, by replacing the code content with the files in this repository.
+
+
+
@@ -0,0 +1,120 @@
+{% assign hideOtherLabelsWhenSoldOut = true -%}
+{% assign money_format = request.money_format | strip_html -%}
+{% assign removePriceDecimal = false -%}
+{% assign showCentAsSuperscript = false -%}
+{% assign decimalDelimiter = '' -%}
+{% assign withoutTrailingZeros = true -%}
+
+{% assign compareAtPriceMin = product.compare_at_price_min | default: 0 -%}
+{% assign priceMin = product.price_min | default: 0 %}
+
+{% assign yagi_discount_percentage = product | product_metafield: 'yagi.discount_percentage' | plus: 0 %}
+{% if yagi_discount_percentage > 0.01 %}
+  {% assign compareAtPriceMin = priceMin %}
+
+  {% assign deducted_percentage = 1.0 | minus: yagi_discount_percentage %}
+  {% assign priceMin = priceMin | divided_by: 100.0 | times: deducted_percentage | times: 100.0 | ceil %}
+{% endif %}
+
+{% if hideOtherLabelsWhenSoldOut != true -%}
+  {% settings if themeSettings.productItems.productImg.elements.productSaleLabel.isEnable %}
+    {% if compareAtPriceMin > priceMin -%}
+      {% assign percent = compareAtPriceMin |  minus: priceMin |  times: 100 |  divided_by: compareAtPriceMin | round -%}
+
+      {% if yagi_discount_percentage > 0.01 %}
+        {% assign percent = yagi_discount_percentage | times: 100 | ceil %}
+      {% endif %}
+      {% assign salePercent = percent | append: '%' -%}
+      {% assign saleAmount = compareAtPriceMin |  minus: priceMin | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%}
+      {% assign productItemSaleTranslated = "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount -%}
+      <div class="boost-sd__product-label boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSaleLabel.displayType }} boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSaleLabel.shape }} boost-sd__product-label--sale">
+        <span class="boost-sd__product-label-text">
+          <span>{{ productItemSaleTranslated }}</span>
+        </span>
+      </div>
+    {% endif -%}
+  {% settings endif %}
+
+  {% settings if themeSettings.productItems.productImg.elements.productSoldOutLabel.isEnable %}
+    {% if product.available == false -%}
+      <div class="boost-sd__product-label boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSoldOutLabel.displayType }} boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSoldOutLabel.shape }} boost-sd__product-label--soldout">
+        <span class="boost-sd__product-label-text">{{ "productItem.productItemSoldOut" | translate: translations, "Sold out" }}</span>
+      </div>
+    {% endif -%}
+  {% settings endif %}
+
+  {% settings if themeSettings.productItems.productImg.elements.productCustomLabelByTag.isEnable %}
+    {% assign filtered_tags = "" -%}
+    {% assign all_tags = product.tags -%}
+    {% if product.original_tags != nill %}
+      {% assign all_tags = all_tags | concat: product.original_tags -%}
+    {% endif %}
+    {% for tag in all_tags -%}
+      {% if tag contains 'pfs:label' -%}
+        {% assign tag_without_label = tag | remove: 'pfs:label-' -%}
+        {% assign filtered_tags = filtered_tags | append: tag_without_label | append: ',' -%}
+      {% endif -%}
+    {% endfor -%}
+    {% assign filtered_tags = filtered_tags | split: ',' -%}
+
+    {% for tag in filtered_tags -%}
+      {% unless tag == blank %}
+        <div class="boost-sd__product-label boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productCustomLabelByTag.shape }} boost-sd__product-label--custom-label-by-tag">
+          <span class="boost-sd__product-label-text">
+            <span>{{ tag }}</span>
+          </span>
+        </div>
+      {% endunless %}
+    {% endfor -%}
+  {% settings endif %}
+{% else -%}
+  {% if product.available == false -%}
+    {% settings if themeSettings.productItems.productImg.elements.productSoldOutLabel.isEnable %}
+      <div class="boost-sd__product-label boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSoldOutLabel.displayType }} boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSoldOutLabel.shape }} boost-sd__product-label--soldout">
+        <span class="boost-sd__product-label-text">{{ "productItem.productItemSoldOut" | translate: translations, "Sold out" }}</span>
+      </div>
+    {% settings endif %}
+  {% else -%}
+    {% settings if themeSettings.productItems.productImg.elements.productSaleLabel.isEnable %}
+      {% if compareAtPriceMin > priceMin -%}
+        {% assign percent = compareAtPriceMin |  minus: priceMin |  times: 100 |  divided_by: compareAtPriceMin| round -%}
+        {% if yagi_discount_percentage > 0.01 %}
+          {% assign percent = yagi_discount_percentage | times: 100 | ceil %}
+        {% endif %}
+        {% assign salePercent = percent | append: '%' -%}
+        {% assign saleAmount = compareAtPriceMin |  minus: priceMin | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%}
+        {% assign translatedText = "productItem.productItemSale" | translate: translations, "Sale" | replace: '{{salePercent}}', salePercent | replace: '{{saleAmount}}', saleAmount %}
+        <div class="boost-sd__product-label boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSaleLabel.displayType }} boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productSaleLabel.shape }} boost-sd__product-label--sale">
+          <span class="boost-sd__product-label-text">
+            <span>{{ translatedText }}</span>
+          </span>
+        </div>
+      {% endif -%}
+    {% settings endif %}
+
+    {% settings if themeSettings.productItems.productImg.elements.productCustomLabelByTag.isEnable %}
+      {% assign filtered_tags = "" -%}
+      {% assign all_tags = product.tags -%}
+      {% if product.original_tags != nill %}
+        {% assign all_tags = all_tags | concat: product.original_tags -%}
+      {% endif %}
+      {% for tag in all_tags -%}
+        {% if tag contains 'pfs:label' -%}
+          {% assign tag_without_label = tag | remove: 'pfs:label-' -%}
+          {% assign filtered_tags = filtered_tags | append: tag_without_label | append: ',' -%}
+        {% endif -%}
+      {% endfor -%}
+      {% assign filtered_tags = filtered_tags | split: ',' -%}
+
+      {% for tag in filtered_tags -%}
+        {% unless tag == blank %}
+          <div class="boost-sd__product-label boost-sd__product-label--{{ settings themeSettings.productItems.productImg.elements.productCustomLabelByTag.shape }} boost-sd__product-label--custom-label-by-tag">
+            <span class="boost-sd__product-label-text">
+              <span>{{ tag }}</span>
+            </span>
+          </div>
+        {% endunless %}
+      {% endfor -%}
+    {% settings endif %}
+  {% endif -%}
+{% endif -%}
@@ -0,0 +1,158 @@
+{% comment %} This Template contains a few variables built from the client js side  {% endcomment %}
+{% assign removePriceDecimal = false -%}
+{% assign decimalDelimiter = '' -%}
+{% assign withoutTrailingZeros = true -%}
+
+{% settings assign textAlign = themeSettings.productItems.productInfo.textAlign %}
+{% settings assign productPrice = productInfoElements.price %}
+
+{% settings assign compareAtPricePosition = '' %}
+{% settings if productPrice.compareAtPricePosition %}
+{% settings assign compareAtPricePosition = productPrice.compareAtPricePosition %}
+{% settings endif %}
+
+{% assign showCentAsSuperscript = false -%}
+{% settings if productPrice.showCentAsSuperscript %}
+{% assign showCentAsSuperscript = true -%}
+{% settings endif %}
+
+{% settings assign showCurrencyCodes = false %}
+{% settings if productPrice.showCurrencyCodes %}
+{% settings assign showCurrencyCodes = true %}
+{% settings endif %}
+
+{% assign money_format = request.money_format -%}
+{% settings if showCurrencyCodes %}
+{% assign money_format = request.money_format_with_currency -%}
+{% settings endif %}
+
+{% assign showSavingDisplay = false -%}
+{% settings if productPrice.showSavingDisplay %}
+{% assign showSavingDisplay = true -%}
+{% settings endif %}
+
+{% assign minPrice = product.price_min | times: 1.0 -%}
+{% assign maxPrice = 0 -%}
+{% if product.price_max -%}
+  {% assign maxPrice = product.price_max | times: 1.0 -%}
+{% endif -%}
+
+{% comment %} convert variable compareAtPriceMin to number {% endcomment %}
+{% assign compareAtPriceMin = 0 -%}
+{% if product.compare_at_price_min -%}
+  {% assign compareAtPriceMin = product.compare_at_price_min | times: 1.0 -%}
+{% endif -%}
+
+{% assign yagi_discount_percentage = product | product_metafield: 'yagi.discount_percentage' | plus: 0 %}
+{% if yagi_discount_percentage > 0.01 %}
+  {% assign compareAtPriceMin = minPrice %}
+
+  {% assign deducted_percentage = 1.0 | minus: yagi_discount_percentage %}
+  {% assign minPrice = minPrice | divided_by: 100.0 | times: deducted_percentage | times: 100.0  %}
+  {% assign maxPrice = maxPrice | divided_by: 100.0 | times: deducted_percentage | times: 100.0  %}
+{% endif %}
+
+{% assign isSale = false -%}
+{% assign salePercent = 0 -%}
+{% assign saleAmount = 0 -%}
+
+{% if compareAtPriceMin > minPrice -%}
+  {% assign isSale = true -%}
+{% endif -%}
+
+{% assign compareAtPriceWithFormat = '' -%}
+{% unless compareAtPriceMin == null or compareAtPriceMin == 0 or isSale == false -%}
+  {% comment %} calculate salePercent base on compareAtPriceMin and minPrice {% endcomment %}
+  {% assign compare = compareAtPriceMin |  minus: minPrice |  times: 100 -%}
+  {% assign salePercent = compare | divided_by: compareAtPriceMin | ceil | append: '%' -%}
+
+  {% comment %} compareAtPriceWithFormat is compare price with PriceMin and format currency {% endcomment %}
+  {% assign compareAtPriceWithFormat = compareAtPriceMin | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%}
+  {% assign saleAmount = compareAtPriceMin |  minus: minPrice -%}
+{% endunless -%}
+
+{% comment %} Format price min  {% endcomment %}
+{% assign priceMinWithFormat = minPrice | format_currency: money_format, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%}
+
+{% comment %} Format price max  {% endcomment %}
+{% assign priceMaxWithFormat = '' -%}
+{% if product.price_max and maxPrice > minPrice -%}
+  {% assign priceMaxWithFormat = maxPrice | format_currency: money_format, showCentAsSuperscript, removePriceDecimal , decimalDelimiter, withoutTrailingZeros -%}
+{% endif -%}
+
+{% comment %} priceMax used for multi variant price display where it can have min-max price with format and translation {% endcomment %}
+{% assign hasMultiVariantPrice = false -%}
+{% if translations.productItem.amount contains "minPrice" -%}
+  {% assign hasMultiVariantPrice = true -%}
+{% endif -%}
+
+{% assign isSamePrice = true -%}
+{% if minPrice != maxPrice or product.compare_at_price_min != product.compare_at_price_max -%}
+  {% assign isSamePrice = false -%}
+{% endif -%}
+
+{% assign priceValueWithFormat = priceMinWithFormat -%}
+{% if isSamePrice == false and maxPrice > minPrice and hasMultiVariantPrice -%}
+  {% assign priceValueWithFormat = "productItem.amount" | translate: translations, "" | replace: '{{minPrice}}', priceMinWithFormat | replace: '{{maxPrice}}', priceMaxWithFormat -%}
+{% endif -%}
+
+{% assign savingPriceWithFormat = '' -%}
+{% unless showSavingDisplay == false or saleAmount == 0 -%}
+  {% assign saleAmountWithFormat = saleAmount | format_currency: money_format, showCentAsSuperscript, removePriceDecimal, decimalDelimiter, withoutTrailingZeros -%}
+  {% assign savingPriceWithFormat = "productItem.savingAmount" |  translate: translations, "Save {{saleAmount}}" | replace: '{{saleAmount}}', saleAmountWithFormat | replace: '{{salePercent}}', salePercent -%}
+{% endunless -%}
+
+{% comment %} Price compare display top or bottom  {% endcomment %}
+{% settings if compareAtPricePosition == 'top' or compareAtPricePosition == 'bottom' %}
+  <div
+    class="boost-sd__product-price-content boost-sd__product-price-content--column{% settings if compareAtPricePosition == 'top' %}-reverse{% settings endif %}"
+  >
+    <div class="boost-sd__product-price-content boost-sd__product-price-content--text-align-{{ settings textAlign }}">
+      <span
+        class="{% if isSale == true %}boost-sd__product-price--sale{% else %}boost-sd__product-price--default{% endif %}">
+        <span class="boost-sd__format-currency">{{ priceValueWithFormat }}</span></span
+      >
+      {% if savingPriceWithFormat -%}
+        <span class="boost-sd__product-price--saving"><span class="boost-sd__format-currency">{{ savingPriceWithFormat }}</span></span>
+      {% endif -%}
+    </div>
+
+    {% if compareAtPriceWithFormat -%}
+      <div class="boost-sd__product-price--compare">
+        <span
+          class="boost-sd__format-currency boost-sd__format-currency--price-compare"
+        >
+          <span class="">{{ compareAtPriceWithFormat }}</span>
+        </span>
+      </div>
+    {% endif -%}
+  </div>
+
+{% settings else %}
+{% comment %} Price compare display left or right  {% endcomment %}
+  <div class="boost-sd__product-price-wrapper">
+    <span
+      class="boost-sd__product-price-content {% settings if compareAtPricePosition == 'left' %}boost-sd__product-price-content--row-reverse{% settings endif %}  boost-sd__product-price-content--text-align-{{ settings textAlign }}"
+    >
+      <span
+        class="{% if isSale == true %}boost-sd__product-price--sale{% else %}boost-sd__product-price--default{% endif %}"
+        >
+        <span class="boost-sd__format-currency">{{ priceValueWithFormat }}</span>
+      </span>
+      {% if compareAtPriceWithFormat != null and compareAtPriceWithFormat != blank and compareAtPriceWithFormat != 0 and compareAtPriceWithFormat != '' and compareAtPriceWithFormat != '0' %}
+        {% assign trimmed_compare_price = compareAtPriceWithFormat | strip %}
+        {% if trimmed_compare_price != '' %}
+          <span
+            class="boost-sd__format-currency boost-sd__format-currency--price-compare boost-sd__product-price--compare"
+          >
+            {{ compareAtPriceWithFormat }}
+          </span>
+        {% endif %}
+      {% endif %}
+    </span>
+
+    {% if savingPriceWithFormat -%}
+      <span class="boost-sd__product-price--saving"><span class="boost-sd__format-currency">{{ savingPriceWithFormat }}</span></span>
+    {% endif -%}
+  </div>
+{% settings endif %}