How to use the AnQiCMS custom field feature to add additional display parameters to the product detail page?

In a content management system, the product detail page often needs to display more rich and specific product parameters than basic information to meet the personalized needs of different industries and products.AnQiCMS provides powerful custom field functionality, allowing us to easily add these additional display parameters to product detail pages without modifying the core code.

Next, we will detail the three steps on how to use the custom fields of AnQiCMS to inject more vitality into your product detail page.

Step 1: Define custom fields in the product content model

The flexibility of AnQiCMS is reflected in its customizable content model.To add additional parameters to the product details page, we first need to define these parameters in the "product model".

1. Enter content model management:Log in to the AnQiCMS backend, navigate to the 'Content Management' section on the left-hand menu bar, and then click 'Content Model'.
2. Edit the product model:In the content model list, find and click the edit button next to "Product Model". If you have other specific product models, you can also select the corresponding model to edit.
3. Add custom field:After entering the product model editing page, scroll down to see the area named "Content Model Custom Field".Here, you can click on 'Add Field' to create new product parameters.
   • Parameter name:This is the field name seen in the background management, it is recommended to use easily understandable Chinese descriptions, such as "color
   • Call field:This is the unique identifier used when referencing the parameter in the template, it must be alphabetic, lowercase is recommended, and should not contain spaces or other special characters, for example, corresponding to "color" it can be set tocolorCorresponding to "Warranty period" can be set towarranty.
   • Field type:Choose the appropriate field based on the data type you need to enter.AnQiCMS provides various field types, such as single-line text (suitable for short text like model, color), numbers (suitable for price, inventory), multi-line text (suitable for long descriptions), single selection, multiple selection, or dropdown selection (suitable for preset options such as size S/M/L, material categories, etc.)
   • Mandatory?:Check according to business requirements. If this parameter is essential information that must be provided when the product is released, please set it as mandatory.
   • Default:If it is a selection field (single selection, multiple selection, dropdown), enter each option value on a separate line here; if it is a general text field, you can preset a default content.

Repeat the above steps, you can add any number of custom parameters according to the characteristics of the product. After defining, remember to click save.

The second step: fill in the custom field content for the product

After you have defined the custom fields in the product model, these fields will automatically appear on the product release or edit page.

1. Go to the product publication or editing page:Navigate to 'Content Management' under 'Publish Document', select a product category, or edit an existing product in 'Document Management'.
2. Find the "other parameters":Below the product editing page, you will find a collapsible area named "Other Parameters." Expand this area, and you will see all the custom fields defined in the first step.
3. Enter field content:Enter the product parameters corresponding to the type of each field.For example, enter 'red' for the 'Color' field, select 'L' for the 'Size' field, fill in 'one year' for the warranty period, etc.This data will be stored with the product and prepared for display on the front-end page.

Step 3: Display custom parameters on the product detail page template

The final step is to display these rich custom parameters on your website product detail page. This usually involves modifying the template files under your current theme, usuallytemplate/您的主题文件夹/product/detail.htmlor a similar path.

AnQiCMS provides two main tags to retrieve and display custom fields:

1. Display specific custom fields one by one:If you need to place a specific custom field at a fixed position on the detail page, such as displaying the model below the product name, you can use it directlyarchiveDetailLabel, and specify the 'calling field' name you set in the first step.

   <p>产品型号：{% archiveDetail with name="model" %}</p>
   <p>保修期：{% archiveDetail with name="warranty" %}</p>
   {# 如果自定义字段的内容是HTML，请务必加上 |safe 过滤器防止被转义 #}
   <div class="product-features">
       {% archiveDetail introduction with name="introduction" %}
       {{ introduction|safe }}
   </div>
   

   Heremodel/warranty/introductionThat is the 'calling field' name you set for the custom field in the first step.

2. Loop through and display all custom fields:If you wish to display all custom fields in a list format, for example, in a "product parameters" or "specifications" module, then usearchiveParamsThe label will be more convenient. It will automatically retrieve all the custom parameters of the current product and iterate through them.

   <div class="product-specs">
       <h3>产品规格</h3>
       <ul>
           {% archiveParams params %}
           {% for item in params %}
           {# 确保只显示有值的字段 #}
           {% if item.Value %}
           <li>
               <span class="spec-name">{{ item.Name }}：</span>
               <span class="spec-value">{{ item.Value|safe }}</span>
           </li>
           {% endif %}
           {% endfor %}
           {% endarchiveParams %}
       </ul>
   </div>
   

   In this example,item.NameIt will display the parameter name you set in the background (such as “color”, “material”)，whereasitem.Valueit will show the specific value you fill in for the product (such as “red”, “cotton linen”)。|safeThe filter ensures that the display is parsed correctly even if the custom field contains HTML content.

Combine the complete example of the product detail page (only showing the part related to custom fields):

Assuming your product model defines in addition to the built-in fields of AnQiCMS,model(Model, single-line text) andfeatures(Features, multi-line text/rich text) two custom fields.

`twig

<h1 class="product-title">{% archiveDetail with name="Title" %}</h1>

<div class="product-summary">
    {# 显示产品型号自定义字段 #}
    <p class="product-model">型号：{% archiveDetail with name="model" %}</p>
    <p class="product-description">{% archiveDetail with name="Description" %}</p>
</div>

<div class="product-image">
    <img src="{% archiveDetail with name='