How to display different text or icons in the AnQiCMS template based on the size of a number (such as order amount)?

In website content management, we often need to dynamically display different information based on the specific numerical value of the data, which can not only improve user experience but also make the content more expressive.For example, display different discount tips, VIP level icons, or "In stock" or "Out of stock" based on inventory quantity, according to the amount of the order.AnQiCMS provides flexible and powerful template functions, allowing easy implementation of conditional judgments and content display based on numerical values.

The template engine syntax of AnQiCMS is very similar to the popular Django template engine, it allows us to control the output of the page through concise tags and variables. The core idea is to use{% if 条件 %}Such logic judgment tags, combined with the comparison of numbers, to determine which content to display.

Preparation: Set the numeric field in the content model.

To judge based on the value size, first ensure that your content model (such as articles, products, or other custom models) contains a field that stores values.AnQiCMS allows users to customize content models and add various fields, which provides us with great flexibility.

Assuming we need to display different information based on the order amount of the product, we can add a custom field to the corresponding model (such as the 'Product Model') in the 'Content Model' management.For example, create a field named "Order Amount" and select its field type as "Number".Such, when publishing or editing a product, we can enter specific values for this field.

In the template, we can go througharchiveDetailtags orarchiveParamsTag to get the value of this custom field. If your value field is directly defined in the content model, you can use it directly{{ archive.你的字段名 }}Get it. For example, if your custom field is set in the "Call Field" in the backgroundorderAmount, then you can access it in the template like this:{{ archive.orderAmount }}.

To implement conditional judgment: display different text

Once we can get the numeric field, we can useifLogic judgment tags to display different text according to the size of the number.

For example, we want to display 'Large Order', 'Normal Order', or 'Small Order' based on the order amount:

{% set amount = archive.orderAmount|integer %} {# 获取订单金额，并确保转换为整数类型 #}

{% if amount > 1000 %}
    <span class="order-status large">大额订单</span>
{% elif amount > 500 %}
    <span class="order-status normal">普通订单</span>
{% else %}
    <span class="order-status small">小额订单</span>
{% endif %}

In the code above, we first use{% set %}Labels willarchive.orderAmountAssign a value to a variable namedamountThe variable.It should be noted that the values obtained from custom fields may sometimes be treated as string types in templates.|integerThe filter explicitly converts it to an integer. If your value may contain decimals, you can use|floatfilter.

Next, we use{% if ... %}/{% elif ... %}and{% else %}structure based onamountDifferent intervals to output different text content. This structure is very intuitive and can clearly express conditional logic.

Advanced application: Display different icons

In addition to displaying text, we can also display different icons based on the size of the number. This is usually achieved by inserting<img>tags or adding different CSS classes to elements.

For example, we can display different VIP level icons based on the order amount:

{% set amount = archive.orderAmount|integer %} {# 获取订单金额，并转换为整数类型 #}

<div class="vip-level-display">
    {% if amount >= 5000 %}
        <img src="/public/static/images/vip-diamond.png" alt="钻石VIP" title="订单金额达到5000元以上">
        <span class="vip-text">钻石VIP客户</span>
    {% elif amount >= 2000 %}
        <img src="/public/static/images/vip-gold.png" alt="黄金VIP" title="订单金额达到2000元以上">
        <span class="vip-text">黄金VIP客户</span>
    {% elif amount >= 500 %}
        <img src="/public/static/images/vip-silver.png" alt="白银VIP" title="订单金额达到500元以上">
        <span class="vip-text">白银VIP客户</span>
    {% else %}
        <img src="/public/static/images/vip-bronze.png" alt="普通会员" title="订单金额不足500元">
        <span class="vip-text">普通会员</span>
    {% endif %}
</div>

In this example, based on different amount ranges, we not only displayed different icons through<img>Label introduction, make sure that these icon files have been uploaded topublic/static/images/The directory, with corresponding text descriptions, can greatly enrich the visual effects and information delivery efficiency of the page.

Practical skills and precautions

• Type conversion is the key:As mentioned before, be sure to use|integeror|floatThe filter converts the variable to the correct numeric type. This is a critical step to avoid conditional judgment errors.
• Handle null or default values:If your numeric field may be empty, and you want to display a default value or avoid errors when it is empty, you can use|defaulta filter. For example:{% set amount = archive.orderAmount|integer|default:0 %}This will ensure that whenorderAmountis empty,amountThe value is0.
• Make good use of{% set %}Tags:Use{% set yourVariable = yourValue %}You can temporarily create variables to make the template logic clearer and more readable, avoiding repeated retrieval or processing of data.
• Static resource management:If you want to display an icon, make sure the icon file has been uploaded to the static resource directory of the website (usuallypublic/static/in a subdirectory), and refer to the correct path in the template.
• Code simplicity and maintainability:Even though the template function is powerful, it is still recommended to keep the logic concise.If the condition judgment becomes too complex, consider whether it can be simplified by adjusting the data structure or processing partially on the backend.

By using this method, AnQiCMS users can easily display different text or icons in templates based on the numerical size, thereby adding more interactivity and dynamic effects to the website content.

Frequently Asked Questions (FAQ)

1. If my value field content is text type (such as "one thousand yuan"), rather than pure numbers, can the template directly compare?Answer: AnQiCMS's template engine cannot directly recognize non-numeric text (such as "one thousand yuan") as comparable values.Ensure that the type of the custom field is "number" and the content entered is purely numeric.If indeed it is necessary to handle such text, it may be necessary to preprocess the text into numbers before it is stored in the database, or to use a custom filter function for more complex text parsing at the template level (but this usually requires secondary development).

2. I want to dynamically modify the CSS style of elements (such as background color, font size) based on the amount range, rather than simple text or icons, can AnQiCMS do that?Of course you can. You can output different CSS classes through conditional judgment, or output inline styles directly. For example:

   {% set amount = archive.orderAmount|integer|default:0 %}
   <span class="order-price {% if amount > 1000 %}highlight-red{% elif amount > 500 %}highlight-orange{% else %}highlight-green{% endif %}">
       {{ archive.orderAmount }} 元
   </span>
   

   Or output inline styles directly:

   {% set amount = archive.orderAmount|integer|default:0 %}
   <span style="color: {% if amount > 1000 %}red{% elif amount > 500 %}orange{% else %}green{% endif %}; font-weight: bold;">
       {{ archive.orderAmount }} 元
   </span>
   

3. If the numeric field may be empty (i.e., the user has not filled in), how can you avoid template errors or poor display results?Answer: You can combine using|defaultFilter. For example,{% set amount = archive.orderAmount|integer|default:0 %}. This will ensure that whenarchive.orderAmountIf empty or cannot be converted to a number,amountThe value of the variable