How to use the `add` filter to dynamically add 'Yuan' or a specific currency symbol to the product price?

When managing website content, especially when it involves product display, we often need to present numerical information such as prices in a more user-friendly manner. Simply displaying a series of numbers, like199，often not intuitive, if it can be automatically added with a currency symbol, such as199元or$199It can greatly enhance the readability and professionalism of information. AnQiCMS (AnQiCMS) makes it very simple to meet such needs with its flexible template system, and the key to this is the clever use ofaddFilter.

KnowaddFilter

The template system of AnQi CMS, like many modern content management systems, provides a rich set of built-in filters for processing and formatting output data. Among them,addFilter is a very practical tool, it can concatenate or add two values.

The strength of this filter lies in its ability not only to handle the addition of numbers but also to flexibly concatenate strings with numbers. Its basic syntax is{{ 变量 | add: 要添加的内容 }}For example,{{ 5 | add: 2 }}It will output numbers7。And if you add a string, like{{ 5 | add: "CMS" }}，it will intelligently convert numbers5to strings, then concatenate them with"CMS"to form5CMS。Even if you mix integers, floating-point numbers, and strings,addThe filter will also attempt reasonable conversions and operations. If the automatic conversion fails, it will gracefully ignore parts that cannot be added or concatenated, ensuring that the template does not report an error.

Actual application: Add the 'Yuan' symbol to the product price.

Now, let's take a look at how to dynamically add the 'Yuan' currency unit to the product price on your CMS website.

Assuming you are building a product detail page, and you have already obtainedarchiveDetailthe detailed information of the product through tags, which includes the price field of the productPriceIn the template, you might display the original price like this:

<p>商品价格：{{ archive.Price }}</p>

Ifarchive.PriceThe value of199Then, the product price on the page will display as “Product Price: 199”. To make it more intuitive,addFilter, very simply add 'Yuan' to the price:

<p>商品价格：{{ archive.Price | add: "元" }}</p>

Whenarchive.PriceThe value of199When, the page now displays as "Product Price: 199 Yuan". Isn't it clearer at once? This line of code is usually placed in your product detail template file (for exampleproduct/detail.html）in it, or on the product list page,archiveListin the loop, for each product,item.Priceright side.

add more currency symbols or prefixes,

addThe flexibility of the filter goes far beyond this.If you are targeting the international market and need to display the dollar or euro symbol, the operation is just as simple.

{# 显示美元价格，例如：$99.00 #}
<p>价格：{{ "$" | add: archive.Price }}</p>

{# 显示欧元价格，例如：99.00 € #}
<p>价格：{{ archive.Price | add: " €" }}</p>

{# 显示人民币符号，例如：¥199.00 #}
<p>价格：{{ "¥" | add: archive.Price }}</p>

{# 添加更具体的货币单位，例如：199.00 RMB #}
<p>价格：{{ archive.Price | add: " RMB" }}</p>

you can even combine multipleaddFilter, or add a fixed text in front of a variable to construct a more complex display format. For example, if you want to directly follow the text

<p>{{ "价格：" | add: "¥" | add: archive.Price }}</p>

This will output an effect similar to 'Price: ¥199'.

Advanced Usage and Precautions

Handling Null or Zero Values:In actual operation, the price of some products may be empty or zero. We do not want to display it directly0元or just a lonely currency symbol. At this time, combine with the Anqi CMS template inifLogical judgment, allowing your price display to be more intelligent:

<p>
{% if archive.Price > 0 %}
    商品价格：{{ archive.Price | add: "元" }}
{% else %}
    商品价格：面议
{% endif %}
</p>

This code will checkarchive.PriceIs greater than zero. If greater than zero, display the price plus "yuan"; otherwise, display "negotiable".

Maintain consistency:To maintain the consistency and professionalism of the website's overall style, it is recommended to use a unified filtering method for displaying prices throughout the site.Whether it is in the product list, detail page, or other modules, the same currency symbol and format should be used.

Multilingual and global currency settings:If your website needs to support multiple currencies and you want the currency symbol to change dynamically according to user selection or system settings, it may be necessary to combine the multilingual feature of AnQi CMS or customize a global variable to achieve this, rather than hardcoding it in.addFilter in. For example, you can define a global currency symbol variable{{ system.CurrencySymbol }}then combineaddFilter usage:{{ system.CurrencySymbol | add: archive.Price }}This requires you to add the corresponding custom parameters in the "Global Feature Settings" backend.

PassaddFilter, you can easily beautify the display of product prices, making your website look more professional and user-friendly.This small change can significantly improve user experience, taking your content operation to a new level.

---

Common Questions (FAQ)

1.addFilter can only be used for price?No.addThe filter is very versatile and can be used for concatenation or addition of any number or string. For example, you can use the reading volume of the article{{ archive.Views | add: " 次阅读" }}, or concatenate the product name and model{{ product.Name | add: " - " | add: product.Model }}.

2. I want to add the currency symbol in front of the price instead of the back. How should I do that?This is also very simple. You just need to adjustaddThe order of the filters. For example, if you want to add the '¥' symbol in front of the price, you can write it like this: `