In website operation, adding custom parameters to product detail pages, such as color, size, etc., is an important aspect to enhance user experience and provide more detailed product information.The AnQiCMS (AnQiCMS) can easily meet this requirement with its flexible content model and powerful template system.Next, we will discuss in detail how to display these custom parameters on the product detail page.

First step: Define custom fields in the product content model on the backend

One of the core advantages of AnQi CMS is its highly flexible content model. To display custom parameters on the product detail page, we first need to add the corresponding fields to the product model.

You can access the content model management interface through the following path:内容管理-内容模型.The system is built-in with “Article Model” and “Product Model”. Usually, the custom parameters of the product detail page are added to the "product model".You can choose to edit an existing "product model", or create a new product model as needed.

Enter the editing page of the product model, and you will see a section named "Content Model Custom Fields".This is where we define the unique properties of the product.

  • Parameter name:This is the field name seen in the background management, for example, you can fill in 'Color', 'Size', 'Material', etc.
  • Field call:This is the unique identifier used when calling this parameter in the front-end template, it is usually recommended to use English lowercase letters, such as “color”, “size”, “material”.This field name is crucial, please ensure its uniqueness and ease of memory.
  • Field Type:Select an appropriate field type based on the nature of the parameter.
    • “Color” parameters, usually several predefined options, can be selected as “Single Choice” or “Drop-down Selection”, and then enter an option per line in the “Default Value”, such as: Red, Blue, Black.
    • “Size” if it is a fixed option (such as S, M, L), you can also choose “Single Selection” or “Drop-down Selection”; if it is a user-defined input (such as 100x200cm), then choose “Single Line Text”.
    • For more complex descriptive parameters, you can choose 'Multi-line text'.
  • Mandatory:Decide whether this parameter is required based on your business needs.
  • Default value:Set a default value for the field, especially when using 'Single selection', 'Multiple selection' or 'Dropdown selection', here to define all available options.

After completing the field definition, don't forget to click the 'Save' button at the bottom of the page to ensure your changes take effect.

Step 2: Fill in the custom parameter data for the specific product.

When you define custom fields in the product model, these fields will automatically appear on the publish or edit page of the corresponding content model.

Go to内容管理-文档管理Select the product you want to edit, or click "Add new document" to create a new product.In the product editing page, please ensure that the 'Category' you select is associated with the 'Product Model' you are modifying.

At the bottom of the page, you will find a collapsible area named "Other Parameters".Expand this area, and you will find all the custom parameter fields defined just now.Here, you can fill in specific information such as 'color' and 'size' for the current product.For example, if your product is a red L-size T-shirt, you can select or enter the corresponding value here.

Fill in the information and save the product information. These custom data will be associated with your product content.

Step 3: Display custom parameters in the front-end template

The final step after data preparation is to modify the product detail page template and display these custom parameters to your visitors.The AnQi CMS uses Django template engine syntax, which is very intuitive.

通常，产品详情页的模板文件会是 English/template/您的模板目录/product/detail.html。您可以通过后台的“模板设计”功能在线编辑，或者直接修改服务器上的文件。 English

Inproduct/detail.htmlIn the template, you can use two main methods to retrieve and display custom parameters:

  1. Directly call known custom fields:If you know the name of the "Call field" for custom parameters (for example, the one we set in step 1), and you only want to display specific parameters, you can do so directly in the template.colorandsize){{archive.你的调用字段名}}of the form to call. For example:

    <div>
    产品颜色：{{archive.color}}
</div>
<div>
    产品尺寸：{{archive.size}}
</div>

    Or use a more generalarchiveDetailTags:

    <div>
    产品颜色：{% archiveDetail with name="color" %}
</div>
<div>
    产品尺寸：{% archiveDetail with name="size" %}
</div>

  2. Loop through all custom parameters:This method is more flexible, especially suitable for scenarios where the number of product custom parameters is not fixed, or you want to display all parameters in a list format. You can usearchiveParamsTag to get all custom parameters, andforLoop to traverse.

    <div class="product-attributes">
    <h3>产品参数</h3>
    {% archiveParams params %}
    {% for item in params %}
    <div class="attribute-item">
        <span class="attribute-name">{{item.Name}}：</span>
        <span class="attribute-value">{{item.Value}}</span>
    </div>
    {% endfor %}
    {% endarchiveParams %}
</div>

    This code will iterate through all filled custom parameters in the product model and display them one by one in the form of "Parameter name: Parameter value."item.NameCorresponding to the "Parameter name" set in the background,item.ValueCorresponds to the specific parameter value you entered for the product.archiveParamsThe label will be returned in the form of an ordered list by default, so it can be used directly.forLoop.

Complete the template modification and save the file. At this point, when you visit your product detail page, you will see that the product color, size, and other custom parameters are clearly displayed.

By following these three simple steps, you can fully utilize the flexible content model of Anqi CMS, add rich and personalized custom parameters to your product detail page, and greatly enhance the professionalism and user experience of the website.

Common Questions (FAQ)

  1. Why did I set custom parameters, but the product detail page does not display?This may be due to several reasons: first, please check if you have correctly defined the field in the 'Content Model', especially whether the 'Calling Field' matches the name used in the template.Next, confirm that you have filled in the corresponding data for the product in the "Other Parameters" area when publishing or editing the product.Finally, if the changes are still not displayed after modification, try clearing the browser cache or the system cache of the CMS backend.

  2. How should I operate if I want different types of products to display different custom parameters?The 'Content Model' design of Anqi CMS is specifically designed to solve this problem.You can create multiple "product models", such as "clothing product model", "electronic product model", etc., each model defining a set of different custom parameters.Then, when creating a product, select the corresponding category under the content model for the product, so that products of different models will display their respective unique parameters.

  3. Can the display order of custom parameters be adjusted?When you use{% archiveParams params %}Tag and passfor