How to display custom product parameters and specifications on the product detail page?

Add custom parameters and specifications to the product detail page in AnQiCMS, which can make your product information more detailed and professional.Whether it is the technical parameters of electronic products, or the size, color options of clothing, you can easily achieve these personalized display needs through a flexible content model.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.

Step 1: Define product custom parameters in the background

To begin 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 backend and then select the "Content Model".Here, you will see the system-built "product model".Click to edit and enter the product model settings 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 "custom field of content model".This is where you define the parameters of the product. Click Add Field to set the following content for each parameter:

• Parameter NameThis is the parameter name displayed on the front page to the user, for example 'Processor Model', 'Memory Capacity', or 'Color Options'.
• Field invocationThis is a technical name used to call this parameter in a template. It is recommended to use concise letters, such asprocessorModelorcolorOptions.
• Field type: AnQiCMS provides various field types to meet different data entry and display needs. You can choose:
  • Single-line text: Suitable for short text information, such as model names.
  • NumberApplicable to price, inventory, or size information.
  • Multi-line textApplicable to product features, brief introductions, or longer texts.
  • Single choiceProvide preset options, the user can only select one item, such as 'yes/no' or a single color.
  • Multiple selectionsProvide preset options, the user can select multiple items, such as various accessories.
  • Drop-down selectionProvide a dropdown menu for users to select, such as specific categories of product series.
• Mandatory?You can set whether this parameter is required or not as needed.
• Default valueSet an initial value for the field. Each line entered here will become an independent option for single-choice, multiple-choice, and dropdown types.

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

Step two: Fill in the custom parameter values for the product.

After defining the structure of product parameters, the next step is to fill in these parameter values for the specific product.

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 'Belonging Category' that uses 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 example, for the 'Color Options' field, you can select white from the drop-down 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 will successfully enter the database with this rich information.

Step 3: Display custom parameters and specifications on the product detail page

The last step is also the most critical one, which is to display the customized parameters you have set and filled in on the product detail page.AnQiCMS's template system provides powerful tag functions, 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 isproduct）。You need to edit this file to add code to display custom parameters.

AnQiCMS mainly provides two ways to display these custom fields:

Method 1: Loop to display all custom parameters

If you wish to list all custom parameters uniformly, for example, in a "Specification Parameters" or "Product Features" area, then usearchiveParamsThe tag is the most convenient choice. This tag will automatically retrieve all custom parameters of the current product and allow you to traverse them.

The following is an example of how to use it.archiveParamsTags:

<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 paramsAssign the custom parameters of the current product as an array.paramsthe variable. Then, we usefor item in paramsLoop through each parameter.item.NameIt will output the parameter name (such as "Processor model"),item.ValueIt will output the value you fill in the background.|safeThe filter is very important here, it ensures that if your custom field contains HTML content (such as multiline text