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

When managing website content, especially when it involves product display, we often need to present price and other numerical information in a more user-friendly way. Simply displaying a string of numbers, such as199It is often not intuitive, if it could automatically add a currency symbol, such as199元or$199，can greatly enhance the readability and professionalism of information. AnQiCMS (AnQiCMS) with its flexible template system makes it very simple to meet such requirements, and the key to this is the clever use ofaddfilter.

Get to knowaddFilter

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

The strength of this filter lies in its ability to not only handle the addition of numbers but also flexibly concatenate strings with numbers. Its basic syntax is{{ 变量 | add: 要添加的内容 }}For example,{{ 5 | add: 2 }}It will output numbers7And if you add a string, like{{ 5 | add: "CMS" }}it will intelligently convert numbers5to strings and then concatenate"CMS"to5CMS. Even if you mix integers, floats, and strings, addThe filter also tries to perform 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.

Practical Application: Add the "Yuan" symbol to product prices

Now, let's see how to dynamically add the "Yuan" currency unit to product prices on your Anqi CMS website.

Assuming you are building a product detail page and have already passedarchiveDetailtags to get the product details, which include the product price fieldPriceIn the template, you might display the original price like this:

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

Ifarchive.Pricehas a value of199Then the page will display 'Product price: 199'. To make it more intuitive, we can introduceaddFilter, simply add 'Yuan' after the price:

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

Whenarchive.Pricehas a value of199When, the page now displays as "Product price: 199 yuan". Isn't it clearer all of a sudden? This line of code is usually placed in your product detail template file (for exampleproduct/detail.htmlIn it, or on the product list page'sarchiveListLoop, processing each productitem.Price.

Add more currency symbols or prefixes

addThe flexibility of the filter goes beyond this. If you are targeting international markets and need to display the dollar or euro symbol, the operation is just as simple.You just need to replace the 'Yuan' with the corresponding symbol or abbreviation:

{# 显示美元价格，例如：$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 before the variable to build a more complex display format. For example, if you want to follow the text "Price:" directly with the currency symbol and price, you can write it like this:

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

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

Advanced usage and注意事项

Handling null or zero values:In actual operation, the price of some products may be null or zero. We do not want to display it directly0元Or it might just be a lone currency symbol. At this point, combined with the Anqi CMS templateifLogical judgment can make your price display more intelligent:

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

This code will checkarchive.PriceIs it greater than zero? If it is greater than zero, display the price plus ' Yuan'; otherwise, display 'Discussable'.

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 in the product list, detail page, or other modules, the same currency symbol and format should be used.

Multi-language and global currency settings: If your website needs to support multiple currencies and you want the currency symbol to be dynamically switched based on user selection or system settings, then you may need to combine the multi-language function of Anqi CMS or customize a global variable to achieve this, rather than simply hardcoding it inaddIn the filter. For example, you can define a global currency symbol variable{{ system.CurrencySymbol }}, then combineaddThe filter is used:{{ system.CurrencySymbol | add: archive.Price }}This requires you to add the corresponding custom parameters in the background "Global Function Settings".

ByaddFilter, 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, bringing your content operation to a new level.

Frequently Asked Questions (FAQ)

1.addDoes the filter only apply to prices?No, it's not.addThe filter is very versatile and can be used for concatenating or adding any numbers or strings. For example, you can add the reading count of the article.{{ archive.Views | add: " 次阅读" }}Or concatenate the product name and model{{ product.Name | add: " - " | add: product.Model }}.

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