Display the purchase price and discount price of the user group on the AnQiCMS front-end

The strength of AnQiCMS lies in its flexible user group management function for small and medium-sized enterprises and content operators, making it easy to implement paid content and membership services.When we set exclusive purchase prices and discount prices for different user groups, how can we display this information intuitively on the website front end, making it easy for users to understand and thus better guide their purchase decisions?userGroupDetailThe tag is the key tool to solve this problem

UnderstandinguserGroupDetailTag

userGroupDetailThe tag is used to obtain detailed data of a specific user group on the AnQiCMS front-end.Through it, we can call the name, introduction, level of the user group, and most importantly - the purchase price and discount price.

The usage of this tag is very direct:{% userGroupDetail 变量名称 with 参数="值" %}Where you can specify a variable name (such asvipGroup) to receive all the data of the user group, or directly output the value of a specific field.

To obtain information about a specific user group, you need to provide its unique identifier. This can be achieved through two parameters:

  • idThe unique ID of the user group. If you know the numeric ID of the user group (such as, displayed as 1, 2, 3 in the background), you can use this parameter.
  • level: User group level. AnQiCMS may set different levels for user groups (such as Level 1, Level 2, Level 3 VIP), and you can obtain information about the corresponding user group through the level.

In this topic, we focus on two core fields:

  • PriceUsed to obtain the original purchase price of the user group.
  • FavorablePriceUsed to display the discounted price of the user group.

These fields are directly related to the commercial value of the user group, which is the focus we pay the most attention to when displaying on the front end.

Actual application: display the price of the user group

Now, let's look at a specific code example to see how we can flexibly display the original price and discounted price of user groups in a template.

Suppose we have an ID of1The user group named "Basic VIP" has been set with the original price and discount price.

Firstly, we can get the details of the user group through the user group ID:

{# 通过用户组ID获取名为 "vipGroup" 的用户组数据 #}
{% userGroupDetail vipGroup with id="1" %}
    <div class="user-group-info">
        <h3>{{ vipGroup.Title }}</h3> {# 显示用户组名称 #}
        <p>{{ vipGroup.Description }}</p> {# 显示用户组介绍 #}
        <p>用户组等级：{{ vipGroup.Level }}</p> {# 显示用户组等级 #}
        <p>原始购买价格：¥{{ vipGroup.Price }}</p>
        <p>优惠价格：¥{{ vipGroup.FavorablePrice }}</p>
    </div>
{% enduserGroupDetail %}

If you want to retrieve data through user group levels, just need toidparameter withleveland it is done:

{# 通过用户组等级 "2" 获取名为 "level2Group" 的用户组数据 #}
{% userGroupDetail level2Group with level="2" %}
    <div class="user-group-info">
        <h3>{{ level2Group.Title }}</h3>
        <p>原始购买价格：¥{{ level2Group.Price }}</p>
        <p>优惠价格：¥{{ level2Group.FavorablePrice }}</p>
    </div>
{% enduserGroupDetail %}

Skillfully display the discounted price and original price

In practical scenarios, we usually hope to highlight the discounted price prominently when there are discounts, and use a strikethrough to cross out the original price to emphasize the discount力度.At the same time, if a user group does not have a discount price or the discount price is not reasonable (for example, higher than the original price), we should only show the normal price.This can be doneifRealize with conditional judgment tags:

{# 假设我们要展示ID为3的“高级会员”用户组 #}
{% set targetGroupId = 3 %}
{% userGroupDetail premiumGroup with id=targetGroupId %}
    <div class="user-group-card">
        <h2>{{ premiumGroup.Title }}</h2>
        <p class="description">{{ premiumGroup.Description }}</p>
        <div class="price-info">
            {% if premiumGroup.FavorablePrice > 0 and premiumGroup.FavorablePrice < premiumGroup.Price %}
                {# 如果存在有效优惠价，则显示原价（删除线）和优惠价 #}
                <span class="original-price">原价：<del>¥{{ premiumGroup.Price }}</del></span>
                <span class="discount-price">优惠价：<strong>¥{{ premiumGroup.FavorablePrice }}</strong></span>
                {# 还可以计算节省金额，这里利用 `add` 过滤器实现减法，注意负数用法 #}
                <p class="saving-tip">立省 ¥{{ premiumGroup.Price|add:-premiumGroup.FavorablePrice }}！</p>
            {% else %}
                {# 没有优惠价或优惠价无效，只显示正常购买价格 #}
                <span class="normal-price">购买价格：<strong>¥{{ premiumGroup.Price }}</strong></span>
            {% endif %}
        </div>
        <button class="buy-button">立即购买</button>
    </div>
{% enduserGroupDetail %}

In this code block:

  • We first pass throughidObtained user grouppremiumGroupDetails.
  • Next, use{% if ... %}Tag judgmentFavorablePriceIs greater than 0 (ensure there is a discount) and less thanPrice(ensure it is a real discount).
  • If the conditions are met, the original price will be displayed at the same time (using<del>tag to add a strikethrough) and a prominent discount price.
  • If the condition is not met, only the original purchase price will be displayed.
  • By{{ premiumGroup.Price|add:-premiumGroup.FavorablePrice }}This method, utilizesaddThe filter to perform subtraction operations, calculates the amount saved by the user.

By flexible applicationuserGroupDetailLabel, you can clearly and accurately display the purchase price and discount price of the user group on the AnQiCMS front-end, effectively guide users to make purchase decisions, and better achieve the goals of content monetization and member service operation.

Frequently Asked Questions (FAQ)

1. How to ensureuserGroupDetailThe label can correctly obtain user group data?

The most critical thing to ensure that the label can correctly obtain data is to provide the correctidorlevelParameters. On the AnQiCMS backend user group management interface, you can view the ID and level of each user group.Make sure to use actual IDs or Levels in the template.If the data is not displayed correctly, first check whether these parameters are consistent with the background configuration.

2. What will be displayed on the front end if the user group has not set a discount price?

If the back end has not set a discount price for the user group, FavorablePriceThe field usually returns 0 or an empty value. In the above example, we used the `