How to display product prices in AnQiCMS template and control decimal places?

In website operation, the display of product prices is a crucial link, not only to ensure the accuracy of information, but also to make sure that the presentation conforms to the reading habits of users and the brand image.AnQiCMS with its flexible template system, provides powerful customization capabilities for users, allowing you to easily control the display of product prices, including decimal places.

Where do product prices come from?

In AnQiCMS templates, the price of the product is usually stored and called as a field of the document (Article or Product). The method of acquisition is slightly different depending on the scenario you want to display the price.

  • Display the price of a single product on the product detail page:When you are on the detail page of a product, you can usearchivethe object to directly access the fields of the current product. The price field is usually namedPrice.
    
{# 假设当前页面上下文是商品详情 #}
<p>商品价格：{{ archive.Price }}</p>
  • Display multiple product prices on the product list page:If you are displaying a product list, such asarchiveListThe data obtained by tags, you need to access each product item in the loop:Pricefield.
    
{# 假设通过 archiveList 标签获取商品列表 #}
{% archiveList products with moduleId="您的产品模型ID" type="list" limit="10" %}
    {% for item in products %}
    <div class="product-card">
        <h3>{{ item.Title }}</h3>
        <p>价格：{{ item.Price }}</p>
    </div>
    {% endfor %}
{% endarchiveList %}
    No matter what the situation is,{{ archive.Price }}or{{ item.Price }}the original price data entered backstage will be directly output.

Precisely control the number of decimal places:floatformatFilter

仅仅显示原始价格数字往往不够，我们还需要对其小数位数进行精确控制，例如显示两位小数，或者在整数时省略小数部分。AnQiCMS 模板引擎提供了EnglishfloatformatFilter, which perfectly meets this requirement.

floatformatFilter specifically used for floating-point number formatting, its usage is very flexible:

  1. Default formatting (one decimal place, trailing zeros are automatically removed):When you do not specify the number of decimal places,floatformatit will default to one decimal place, and if the decimal part is,.0it will be automatically removed, and only the integer will be displayed.

    {# 假设 archive.Price 的值是 123.456 #}
<p>价格：{{ archive.Price|floatformat }}</p> {# 输出 123.5 #}


{# 假设 archive.Price 的值是 100.00 #}
<p>价格：{{ archive.Price|floatformat }}</p> {# 输出 100 #}

  2. Specify the number of decimal places:You can check if the content is empty byfloatformatAdd a colon and a number to precisely specify the number of decimal places to retain. For example,floatformat:2indicating that two decimal places should be retained.

    {# 假设 archive.Price 的值是 123.456 #}
<p>价格：{{ archive.Price|floatformat:2 }}</p> {# 输出 123.46 #}


{# 假设 archive.Price 的值是 100 #}
<p>价格：{{ archive.Price|floatformat:2 }}</p> {# 输出 100.00 #}

    This method will round off and fill in the specified number of decimal places (even if it is zero).

  3. The decimal places are not retained (only integers are displayed):If you want the price to always be displayed as an integer without any decimal, you can use:floatformat:0.

    {# 假设 archive.Price 的值是 123.89 #}
<p>价格：{{ archive.Price|floatformat:0 }}</p> {# 输出 124 #}


{# 假设 archive.Price 的值是 123.49 #}
<p>价格：{{ archive.Price|floatformat:0 }}</p> {# 输出 123 #}

Combine price display with decimal control

Now, let's combine the acquisition of the price and the control of decimal places and apply it in the actual template:

Display the price on the product details page (rounded to two decimal places):

<div class="product-detail">
    <h1>{{ archive.Title }}</h1>
    <p class="product-price">售价：<span class="currency">¥</span>{{ archive.Price|floatformat:2 }}</p>
    <div class="product-description">{{ archive.Content|safe }}</div>
</div>

Show price on product list page (rounded to two decimal places):

<div class="product-list-container">
    {% archiveList products with moduleId="您的产品模型ID" type="list" limit="12" %}
        {% for item in products %}
        <div class="product-item">
            <a href="{{ item.Link }}">
                <img src="{{ item.Thumb }}" alt="{{ item.Title }}" class="product-thumbnail">
                <h3>{{ item.Title }}</h3>
                <p class="item-price"><span class="currency">¥</span>{{ item.Price|floatformat:2 }}</p>
            </a>
        </div>
        {% endfor %}
        {% empty %}
        <p>抱歉，目前没有商品可供展示。</p>
    {% endarchiveList %}
</div>

Useful Tips and Considerations

  • Add currency symbol: floatformatThe filter only processes numeric formats and does not add currency symbols. You need to add them manually in the template, for example, by adding a prefix to the price number.¥or$as shown in the above example.
  • Process empty or zero prices:If the product price may be empty or zero, you can usedefaulta filter to provide an alternative text, avoiding blank or unattractive zero values on the page.
    
<p>价格：<span class="currency">¥</span>{{ item.Price|floatformat:2|default:"暂无价格" }}</p>
    or, if you do not want to display when the price is zero, you can combineifJudgment:
    
{% if item.Price > 0 %}
    <p>价格：<span class="currency">¥</span>{{ item.Price|floatformat:2 }}</p>
{% else %}
    <p>价格：面议</p>
{% endif %}
  • Data Type:Make sure that the price field you enter in the AnQiCMS backend is of numeric type (such as a floating-point number or an integer), so thatfloatformatFilter to be processed correctly.

Through the flexible template tags and filters of AnQiCMS, you can easily display product prices on your website and precisely control the number of decimal places according to your needs, providing users with clear and professional price information, thereby enhancing the user experience of the website.

Common Questions (FAQ)

  1. 问：How to make the price always display two decimal places, even if it is an integer.00?Answer: You can usefloatformat:2Filter. For example, if the price is100,{{ item.Price|floatformat:2 }}Will be displayed100.00.
  2. Question: How can I make no content displayed when the price is zero, or display the word 'Free'?Answer: You can useifstatement to determine if the price is greater than zero.item.Price > 0If it is auto, then display the formatted price; otherwise, you can choose to display 'Free' or not display any content. For example:{% if item.Price > 0 %}<p>价格：¥{{ item.Price|floatformat:2 }}</p>{% else %}<p>免费</p>{% endif %}.
  3. 问：Can the currency symbol be added before the price, for example “USD” or “EUR”？Answer:floatformatThe filter itself only handles numeric formats. You need to manually add the currency symbol in the template code and concatenate it as text with the formatted price. For example售价：<span class="currency">USD</span>{{ archive.Price|floatformat:2 }}.