How to always display the product price (floating point number) with two decimal places in AnQiCMS template?

When operating a product display website, you may often encounter situations where it is necessary to display product prices accurately. A professional and user-friendly website usually requires a unified format for displaying product prices, such as always retaining two decimal places, even for integer prices..00English translation: .AnQiCMS with its flexible template system makes these details very convenient.

Understanding data and display in AnQiCMS templates

AnQiCMS's template system is based on Go language, but its syntax style is very similar to Django template engine, which allows you to get started quickly if you are familiar with web development. In AnQiCMS, products or any content with price attributes are usually througharchiveDetail(Retrieve details of a single document) orarchiveListUse labels such as (Retrieve document list) to obtain data.

For example, when you accessarchiveListtags to cycle through products, you may receive aiteman object that contains.item.Title(Product title) anditem.Price（Product Price） fields. At this point,item.Priceit might be a floating-point number, like12.345/12.3even is12. Our goal is to display it in the form of12.35/12.30or12.00regardless of the original data.

核心解决方案：使用过滤器（Filters）

In AnQiCMS templates, handling variable display formats mainly relies on the powerful "Filters" feature.The filter can perform various operations on the output variable values, including formatting, truncation, conversion, etc.For the requirement of retaining two decimal places for floating-point number prices, AnQiCMS provides several very practical filters.

方法一：floatformatFilter

floatformat过滤器专门用于格式化浮点数，允许你指定需要保留的小数位数。

Usage:

{{ item.Price|floatformat:2 }}

Here are the2indicating that two decimal places should be retained.

效果演示：

  • Ifitem.PriceYes12.345The output will be:12.35(English round off).
  • Ifitem.PriceYes12.3The output will be:12.3.
  • Ifitem.PriceYes12.00The output will be:12.
  • Ifitem.PriceYes12The output will be:12.

As you can see,floatformatPerforms well when dealing with numbers with decimals, but for decimals with trailing zeros (such as12.30) or integers, it will omit the zeros after the decimal point, making it display as12.3or12。If you want to force even integers to be displayed with two decimal places (for example12.00)，then you need to consider another method.

Method two:stringformatFilter (recommended)

stringformatThe filter provides more flexible formatting capabilities, similar to the formatting capabilities in the Go language.fmt.Sprintf()functions, allowing you to use formatting strings to precisely control the output. This is beneficial foralwaysIt is very suitable for retaining two decimal places.

Usage:

{{ item.Price|stringformat:"%.2f" }}

Here are the%.2fIt is a formatted string that tells the template engine to format the floating-point number (f) to two decimal places in total (.2)，and it will automatically fill in the zeros after the decimal point.

效果演示：

  • Ifitem.PriceYes12.345The output will be:12.35(English round off).
  • Ifitem.PriceYes12.3The output will be:12.30.
  • Ifitem.PriceYes12.00The output will be:12.00.
  • Ifitem.PriceYes12The output will be:12.00.

stringformatThe filter is especially useful in scenarios where strict two decimal places need to be maintained, as it will force the zero to be filled after the decimal point, making the price display more unified and professional.

Actual application example

Assuming you are creating a product list page template, you want each product's price to be displayed neatly with two decimal places. You can organize your template code in this way:

<div class="product-list">
    {# 获取产品列表，假设moduleId="2"代表产品模型，limit="5"限制显示5个产品 #}
    {% archiveList products with moduleId="2" limit="5" %}
        {% for item in products %}
            <div class="product-item">
                <a href="{{ item.Link }}" class="product-link">
                    {# 假设产品Logo存在 #}
                    {% if item.Logo %}
                        <img src="{{ item.Logo }}" alt="{{ item.Title }}" class="product-thumb">
                    {% endif %}
                    <h3 class="product-title">{{ item.Title }}</h3>
                    {# 使用 stringformat 过滤器确保价格始终显示两位小数 #}
                    <p class="product-price">价格: ￥ {{ item.Price|stringformat:"%.2f" }}</p>
                    {# 假设产品有简介，并希望截取显示 #}
                    <p class="product-description">{{ item.Description|truncatechars:100 }}</p>
                </a>
            </div>
        {% empty %}
            <p>暂无产品信息。</p>
        {% endfor %}
    {% endarchiveList %}
</div>

This code ensures that your product prices are displayed on the front-end page in a uniform two-decimal place format, regardless of how they are stored in the backend, thus enhancing the professionalism and user experience of the website.

Summary

PassfloatformatorstringformatThese two simple yet powerful filters allow you to easily control the display format of floating-point prices in AnQiCMS templates. In cases where it is necessary to strictly maintain two decimal places, even including padding..00English context,stringformat:"%.2f"Filter is undoubtedly the more recommended choice, as it can help your website present a more professional and consistent visual effect.

Common Questions (FAQ)

1. Why do I need to also display integer prices as10.00This format, rather than simple10?

In e-commerce or financial websites that have strict requirements for price display, a unified price format can enhance users' trust and the professionalism of the website. The10displayed as10.00can avoid potential misunderstandings (for example, users may think that)10Is the price not fully displayed), and visually maintains alignment and consistency of all product prices, especially in lists or tables,