boost-app-integration/product-price/main.liquid

{% 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 %}