How to display product prices in AnQiCMS templates 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 ensure that the presentation method conforms to the reading habits of users and the brand image.AnQiCMS with its flexible template system provides users with powerful customization capabilities, allowing you to easily control the display of product prices, including decimal places.

Where do you get the product price from?

In the AnQiCMS template, the price of the product is usually stored and called as a field of the document (Article or Product). The way to get it varies 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 usearchiveobject 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, for example througharchiveListlabel data, 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 %}
    In any case,{{ archive.Price }}or{{ item.Price }}the original price data entered by the background will be output directly.

Precisely control the number of decimal places:floatformatFilter

It is often not enough to just display the original price number, we also need to control the decimal places accurately, such as displaying two decimal places, or omitting the decimal part when it is an integer. The AnQiCMS template engine providesfloatformatFilter, perfectly meets this requirement.

floatformatFilter is specifically used for formatting floating-point numbers, 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 retaining one decimal place, and if the decimal part is.0, it will be automatically removed, only showing the integer.

    {# 假设 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 specify only the top-level categories by using thefloatformatAdd a colon and a number to specify the number of decimal places to retain. For example,floatformat:2means retaining two decimal places.

    {# 假设 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 decimal places to the specified number of digits (even if it is zero).

  3. Do not retain decimal places (only show integers):If you want the price to always be displayed as an integer without any decimals, 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 prices and the control of decimal places and apply them 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>

Display 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>

Practical skills and precautions

  • Add currency symbol: floatformatThe filter only handles numeric formats and does not add currency symbols. You need to add them manually in the template, for example, by adding a symbol to the front of the price number.¥or$as shown in the example above.
  • Handle empty or zero prices:If the product price may be empty or zero, you can usedefaulta filter to provide a fallback text to avoid blank or unattractive zero values on the page.
    
<p>价格：<span class="currency">¥</span>{{ item.Price|floatformat:2|default:"暂无价格" }}</p>
    Or, if you don't 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 the price field you enter in the AnQiCMS background is a numeric type (such as a floating-point number or an integer), so thatfloatformatThe filter can process it correctly.

By using 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 as needed, providing users with clear and professional price information to enhance the user experience of the website.

Frequently Asked Questions (FAQ)

  1. How do I 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. How can I display nothing or 'Free' when the price is zero?Answer: You can useifstatement to determine if the price is greater than zero. Ifitem.Price > 0If the price is displayed, then show 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. Ask: Can you add a currency symbol in front of the price, such as "USD" or "EUR"?Answer:floatformatThe filter itself only handles numeric formats. You need to manually add the currency symbol in the template code, concatenating it as text with the formatted price. For example售价：<span class="currency">USD</span>{{ archive.Price|floatformat:2 }}.