How to use the `archiveParams` tag to dynamically display the product specification parameter list on the product detail page?

In today's content is king era, an efficient and flexible content management system is crucial for a company's online operation.AnQiCMS (AnQiCMS) is a modern enterprise-level content management system developed based on the Go language, with its powerful content model and template tag system, providing endless possibilities for us to carry out refined content operations.Today, let's delve into a very practical scenario: how to cleverly utilize AnQiCMS'sarchiveParamsThe tag dynamically displays a rich and diverse list of product specifications on the product detail page, thereby enhancing user experience and content maintenance efficiency.

Why does the product detail page need a dynamic parameter list?

In the daily operation of the website, I believe you also have a deep understanding that product information, especially its specifications and parameters, is the key for users to understand the product and make purchasing decisions.However, products are often not immutable, model updates, parameter adjustments, and new product launches are the norm.If each parameter modification requires manual adjustment of the page code, it is not only inefficient but also prone to errors.

The advantage of the dynamic parameter list is that it can extract product specifications from fixed page content and manage them independently.When the product parameters change, we just need to simply modify the corresponding field value in the background, and the front-end page can be updated in real time without touching a single line of code.This has greatly improved operational efficiency, reduced maintenance costs, and can ensure that users always receive the latest and most accurate product information, thereby significantly optimizing the user experience.AnQiCMS's powerful flexible content model was born to meet such dynamic needs.

archiveParamsThe magic of tags: unlock the dynamic display of product parameters

One of the core functions of AnQiCMS is the "flexible content model", which allows us to customize the content structure according to business needs, for example, creating a "product" model and adding various custom fields. AndarchiveParamsThe label is the bridge of communication between our front-end template and these custom fields.

In short,archiveParamsTags are used to obtainSpecify the documentParameters set in the background, including those customized specifications for the product model that we have set.It can extract these structured data to be traversed and displayed by the front-end template.This means that regardless of how many specification parameters you define for a product, they can all be presented through this tag in the form of a list on the product detail page, achieving true dynamism.

This tag was added when the template tag was redesigned in AnQiCMS v2.1.1 version, it replaced the previous specific tag, providing a more unified and powerful content model data acquisition ability.

Backend configuration: Build your product parameter structure.

While usingarchiveParamsBefore the label, we first need to configure the required specifications for the "Product" content model in the AnQiCMS backend.

1. Enter content model management:Log in to the AnQiCMS backend, navigate to the 'Content Management' menu, and select 'Content Model'.
2. Select or create a product model:The system usually built-in "product model", you can click edit to add fields for it, or create a new content model as needed (such as "electronic products", "clothing" etc.), and set the "model table name" to an easily recognizable English lowercase string, such asproduct.
3. Add custom field:This is the most critical step. Under the product model you choose, click the 'Add field' button in the 'Content model custom field' area.Here, you can define a field for each product specification:
   • Parameter name:This is displayed on the back end and called on the front enditem.NameChinese names such as 'color', 'size', 'material', 'weight', and others will be used.
   • Call field:This is a unique identifier composed of English lowercase letters, for examplecolor/size/material/weightThis field is used on the front endsorted=falseIt is very useful when calling the pattern directly, but for our dynamic list display, it serves asitem.FieldNameHidden inside the loop.
   • Field type:Choose the appropriate type based on the actual parameters. For example, "color" can be "single-line text" or "dropdown selection", "size" can be "single-line text", "material" can be "single-line text", "weight" can be "numeric".When selecting 'Dropdown Selection', you can preset multiple options in the 'Default Value' for the convenience of operation staff.
   • Mandatory?:Tick according to business requirements.
   • Default:If there is a common value, it can be set in advance.

After completing these configurations, when you publish a new product in the "Content Management", select the corresponding product category, and under the "Other Parameters" collapse box, you will see these customized specification parameter fields. The operations personnel only need to fill in or select the specific product parameter values here.

Front-end template实战：Dynamically display product specifications list

After all the background configurations are ready, now we can go to the product details page (usually the template file{模型table}/detail.html), througharchiveParamsLabel to dynamically display these parameters.

Assuming the name of your product model table isproductThen the template path of the product detail page may be/template/您的模板名称/product/detail.html.

The following is a clear template code example that iterates through all custom parameters of the product and displays them in a list format.

{# 首先，确保这是产品详情页，并且已经有一个名为archive的变量包含了当前产品的数据 #}

<div class="product-specs">
    <h2>产品规格参数</h2>
    <ul class="specs-list">
        {# 使用archiveParams标签获取当前产品的后台自定义参数。
           默认情况下，sorted=true，它会返回一个按后台定义顺序排列的数组对象，
           非常适合我们遍历展示。
        #}
        {% archiveParams params %}
            {# 遍历params数组，每一个item都代表一个自定义参数 #}
            {% for item in params %}
                {# 我们可以添加一个条件判断，只有当参数有值时才显示，避免显示空行 #}
                {% if item.Value %}
                <li>
                    <span class="spec-name">{{ item.Name }}：</span> {# item.Name是我们在后台设置的“参数名” #}
                    <span class="spec-value">{{ item.Value }}</span> {# item.Value是运营人员在后台填写的具体参数值 #}
                </li>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
    </ul>
</div>

{# 结合使用archiveDetail标签获取产品标题、内容等固定信息 #}
<div class="product-description">
    <h1>{{ archive.Title }}</h1>
    <div class="main-content">
        {{ archive.Content|safe }} {# archive.Content通常包含富文本内容，需要|safe过滤器避免转义 #}
    </div>
</div>

In this code block:

• First, we defined a containerdiv.product-specsInclude all product specifications.
• {% archiveParams params %}The tag is responsible for extracting all custom parameters from the current product (archiveobject) and storing them in a variable namedparams. Due tosortedThe parameter is set to default.true,paramsIt will be an ordered array, the order of whose elements is consistent with the order of the custom fields you define in the background.
• {% for item in params %}Loop through thisparamsarray. In each loop,itemthe variable represents an independent custom parameter.
• item.NameIt will output the parameter name you set in the background (for example, "color"), whereasitem.Valueit will output the specific value of the parameter (for example, "blue").
• {% if item.Value %}This condition judgment is very practical, it can ensure that the parameter value is displayed on the page only when it is not empty, avoiding the embarrassing situation that there is no content after "Color: ", making the page more tidy.

Optimize user experience and content presentation

It's not enough to just dynamically display, we also need to consider how to better serve these information to users:

• Style beautification:With.product-specs/