How to display the custom parameters of the product on the product detail page (for example: color, size)?

In website operation, adding customized parameters to the product detail page, such as color, size, etc., is an important aspect to improve user experience and provide more detailed product information.AnQiCMS (AnQiCMS) takes advantage of its flexible content model and powerful template system to easily meet this requirement.Next, we will delve into how to display these custom parameters on the product detail page.

The first step: define custom fields in the product content model on the backend

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

You can access the content model management interface through the following path:内容管理-u003e内容模型. The system has built-in 'Article Model' and 'Product Model'.Generally, 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 one as needed.

After entering the product model editing page, you will see a section named "Content model custom fields".This is where we define the unique properties of the product. Click the "Add Field" button to add new entries for your product parameters:

• Parameter name:These are the field names you will see in the backend management, such as 'Color', 'Size', 'Material', etc.
• Call field:This is the unique identifier used when calling this parameter in the front-end template, it is usually recommended to use lowercase English letters, such as "color", "size", "material".This field name is crucial, please ensure its uniqueness and ease of memory.
• Field type:Choose the appropriate field type based on the nature of the parameter.
  • “Color” parameters are usually pre-set options that can be selected as either “Single selection” or “Dropdown selection”, and then enter each option in the “Default value” field, such as: Red, Blue, Black.
  • The "size" option can be selected as a fixed option (such as S, M, L) and can also be selected as a single choice or drop-down selection; if it is a user-defined input (such as 100x200cm), then select a single-line text.
  • For more complex descriptive parameters, you can choose 'Multi-line text'.
• Mandatory?:Determine whether the parameter is required based on your business requirements.
• Default:Set a default value for the field, especially when using "single selection", "multiple selection" or "drop-down selection", here to define all available options.

After defining the field, 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.

After 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内容管理-u003e文档管理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-sized T-shirt, you can select or enter the corresponding value here.

After completing, save the product information. This custom data will be associated with your product content.

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

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

usually, the template file of the product detail page will be/template/您的模板目录/product/detail.html. You can edit it online through the 'template design' feature in the background, or directly modify the file on the server.

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

1. Directly call the known custom fields:If you know the name of the 'call field' for the custom parameter (for example, the one we set in the first step), and you only want to display specific parameters, you can directly use them in the templatecolorandsize){{archive.你的调用字段名}}Call it in the form of.

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

   Or use a more general one.archiveDetailTags:

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

2. Loop through all custom parameters.This approach offers more flexibility, especially suitable for products with a variable number of custom parameters, or when you want to display all parameters in a list format. You can usearchiveParamsLabel to get all custom parameters and throughforloop through it.

   <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 the filled custom parameters in the product model and display them one by one in the form of 'Parameter name: Parameter value'.item.NameThe parameter name set on the back-end,item.ValueThe specific parameter value you entered for the product.archiveParamsThe label will return the parameters in the form of an ordered list, so it can be used directly.forLoop.

After modifying the template, save the file. At this point, when you visit your product detail page, you will see that the product colors, sizes, 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 content.

Frequently Asked Questions (FAQ)

1. Why did I set custom parameters but the product details page did not display?This could 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.Secondly, 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 it does not display after modification, try clearing the browser cache or the system cache on 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 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 category under the corresponding content model for the product, so products of different models will display their unique parameters.

3. Can the display order of custom parameters be adjusted?When you use{% archiveParams params %}Label and pass throughforWhen iterating over the display, the order of the parameters is usually determined by the order in which you add these custom fields in the content model.If you need to adjust the display position of a parameter, you can delete the field on the content model editing page, then re-add it in a new order, or if the CMS provides the feature of field drag-and-drop sorting, you can adjust it directly by dragging.