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.archiveParamsLabels, dynamically display a rich and diverse list of product specifications and parameters on the product detail page, thereby enhancing user experience and content maintenance efficiency.

Why do product detail pages need dynamic parameter lists?

In the daily operation of the website, you also have a deep understanding. Product information, especially its specifications and parameters, is the key for users to understand products and make purchase decisions.However, products are often not constant, model updates, parameter adjustments, and new product launches are the norm.If you need to manually adjust the page code every time you modify the parameters, it is not only inefficient but also prone to errors.

The advantage of the dynamic parameter list is that it can extract product specification parameters from fixed page content and manage them as independent fields.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 not only significantly improves operational efficiency and reduces maintenance costs, but also ensures that users always obtain the latest and most accurate product information, thereby significantly optimizing the user experience.AnQiCMS powerful flexible content model is exactly designed to meet this dynamic demand.

archiveParamsThe magic of tags: unlock dynamic product parameter display

One of the core features of AnQiCMS is the "flexible content modelarchiveParamsLabels, which act as the bridge of communication between our front-end template and these custom fields.

In short,archiveParamsLabels are used to retrieveSpecify a documentParameters set in the background, including those customized specification parameters for the product model.It can extract these structured data for the front-end template to iterate and display.This means that no matter how many specification parameters you define for the product, they can all be displayed on your product detail page in the form of a list through this tag, achieving true dynamism.

This tag was added when the template tags were rewritten in version 2.1.1 of AnQiCMS, replacing the previous specific tags and providing a more unified and powerful content model data acquisition capability.

Backend configuration: Build your product parameter structure

When usingarchiveParamsBefore the label, we first need to configure the required specification parameters for the "product" content model in the AnQiCMS backend.

  1. Enter the content model management:Login to the AnQiCMS backend, navigate to the 'Content Management' menu, and select 'Content Model'.
  2. Select or create a product model:The system usually comes with built-in "product modelsproduct.
  3. Add custom fields:This is the most critical step.Under the product model you have selected, click the 'Add Field' button in the 'Content Model Custom Fields' area.
    • Parameter name:This is the display on the back and the front callitem.NameChinese names used at that time, such as 'color', 'size', 'material', 'weight', and so on.
    • Field call:This is an identifier composed of English lowercase letters, for examplecolor/size/material/weightThis field is used on the front endsorted=falsemode is very useful when called directly, but for our dynamic list display, it acts 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 “drop-down selection”, “size” can be “single-line text”, “material” can be “single-line text”, “weight” can be “numeric”.Select "Dropdown Selection" and multiple options can be preset in "Default Value" for convenience of operation personnel.
    • Mandatory:Select according to business requirements.
    • Default value:If there are common values, they can be set in advance.

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

Front-end Template Practice: Dynamic Display of Product Specification List

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

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

The following is a clear template code example that traverses all custom parameters of the product and displays them elegantly in a list:

{# 首先，确保这是产品详情页，并且已经有一个名为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:

  • We first defined a container packagediv.product-specs 包含所有的产品规格。
  • {% archiveParams params %}标签负责从当前产品（archive对象）中提取所有自定义参数，并将它们存储在一个名为params的变量中。由于sortedThe parameter defaults totrue,paramsIt will be an ordered array, with the order of elements consistent with the order of custom fields defined in the background.
  • {% for item in params %}Loop through thisparamsin each iteration.itemvariable represents an independent custom parameter.
  • item.Nameauto output the parameter name set in the background (for example, "颜色"), anditem.Valuethen output the specific value of the parameter (for example, "蓝色").
  • {% if item.Value %}This condition judgment is very practical, it ensures that the page will only display when the parameter value is not empty, avoiding the embarrassing situation of 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:

  • [en] Style beautification:response for.product-specs/