In AnQiCMS, adding custom parameters and specifications to the product detail page can make your product information more detailed and professional.Whether it is the technical parameters of electronic products, or the size and color options of clothing, with a flexible content model, you can easily achieve these personalized display needs.Next, we will step by step understand how to set, fill in, and finally display these customized parameters and specifications on your product detail page in AnQiCMS.

Step 1: Define product custom parameters in the background

To start adding custom parameters to products, we first need to define the structure of these parameters in the AnQiCMS backend. This is mainly done through the content model feature.

You can enter the "Content Management" section of the background and then select "Content Model".Here, you will see the built-in 'Product Model' of the system.Click to edit and enter the product model setting interface, or if you have special requirements, you can also choose to create a completely new custom model.

On the model settings page, a very critical part is the 'Content Model Custom Fields'.This is the place where you define the parameters of the product.

  • Parameter nameThis is the name displayed to the user on the front page for this parameter, for example, 'Processor Model', 'Memory Capacity', or 'Color Options'.
  • Call fieldThis is a technical name used to call this parameter in the template. It is recommended to use concise English letters, such asprocessorModelorcolorOptions.
  • field type：AnQiCMS provides various field types to meet the different data entry and display needs. You can choose:
    • Single Line Text：Suitable for short text information, such as model names.
    • Number：适用于价格、库存或尺寸等数字信息。
    • Multi-line text：适用于产品特色、简要介绍等较长文本。
    • Single selection：Provide preset options, users can only select one item, such as 'Yes/No' or a single color.
    • Multiple selection：Provide preset options, users can select multiple items, such as various accessories.
    • Drop-down selection：Provide a dropdown menu for users to select, such as specific categories of product series.
  • Is required：You can set whether this parameter is required to be filled out according to your needs.
  • Default value：Set an initial value for the field. For single choice, multiple choice, and dropdown selection types, each line of input here will become an independent option.

After setting all custom fields, remember to save your content model, so that the new parameter definitions take effect.

Step 2: Fill in the custom parameter values for the product

Define the structure of product parameters first, and then fill in these parameter values for specific products.

You can go to the "Content Management" under the "Publish Documents" page to create a new product, or edit an existing one.When publishing or editing a product, please make sure to select a category under "Product Category" that matches the "Product Model" you just configured.

After selecting a category, you will notice a collapsible box named "Other Parameters" at the bottom of the page.Expand this collapse box, and you will see the "More Model Custom Fields" section, which lists all the custom parameters you defined in the first step.According to the type of each field, you can enter text, numbers, or select from predefined options.For the 'Color Options' field, you can select white from the dropdown menu or check multiple colors in the checkboxes.

After carefully filling in all the custom parameters of the product, click the save or publish button on the page, your product is successfully stored with these rich information.

Third step: Display custom parameters and specifications on the product detail page

The last step and the most critical one is to display the customized parameters you have set and filled in on the product detail page.AnQiCMS's template system provides powerful tag features, making this process very intuitive.

Generally, the template files for the product detail page are located in the template package you are currently usingproduct/detail.html(If your model table name is)product）。You need to edit this file to add code that displays custom parameters.

AnQiCMS mainly provides two ways to display these custom fields:

Method 1: Loop to display all custom parameters

If you want to list all custom parameters uniformly, for example, in a 'specification parameters' or 'product features' area, then usearchiveParamsLabels are the most convenient choice. This label will automatically retrieve all custom parameters of the current product and allow you to iterate through them.

The following is an example of how to usearchiveParamsTags:

<div class="product-specs">
    <h2>产品规格参数</h2>
    {% archiveParams params %}
    {% if params %} {# 判断是否存在自定义参数 #}
    <table>
        <tbody>
        {% for item in params %}
        <tr>
            <th>{{item.Name}}：</th> {# 参数名，例如“处理器型号” #}
            <td>{{item.Value|safe}}</td> {# 参数值，例如“Intel i7-12700K”，注意|safe过滤器以防HTML内容 #}
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p>暂无详细参数信息。</p>
    {% endif %}
    {% endarchiveParams %}
</div>

In this example,archiveParams paramsWould assign the current product's custom parameters as an array.paramsThen, we loop through each parameter.for item in paramsAnd output the parameter name (such as "Processor model").item.Name)}]item.ValueThen the value you fill in behind the scenes will be output.|safeThe filter is very important here, as it ensures that if your custom field contains HTML content (such as multiline text