In website operation, especially for product display websites, product details are far more than just titles and descriptions.In order to better meet the needs of users, it is particularly important to display various personalized parameters such as product prices, inventory, colors, materials, and so on.AnQiCMS (AnQiCMS) relies on its flexible content model and powerful template tag functions, allowing you to easily call and display these custom parameters on product detail pages.

Preparation: Define product custom parameters

To display custom parameters on the product detail page, you first need to define these parameters in the Anqi CMS backend.One of the core strengths of Anqi CMS is its highly customizable content model, allowing you to create or modify fields based on business needs.

  1. Log in to the Anqi CMS backend：Log in to your website admin panel.
  2. Enter content model management：Find 'Content Management' in the left navigation bar and click 'Content Model'.
  3. Edit product modelIn most cases, Anqi CMS will be built-in with 'Product Model'.Find and click on 'Manage Fields' to enter the field editing page of the product model.If you have created a custom model for a specific product type, then select the corresponding model to edit.
  4. Add custom field:
    • Click the 'Add Field' button.
    • Parameter NameThis is the display name of the field in the background management interface, for example, 'Product Price', 'Stock Quantity', 'Product Color' or 'Product Material'.
    • Field invocationThis is the actual field name used to call this parameter in the template code. Please use English lowercase letters or camel case, such asprice/stock/color/material. This field name is crucial for subsequent template calls.
    • Field type: Choose the appropriate field type based on the nature of the parameter. For example, 'Product price' can be selected as 'Number' or 'Single-line text', 'Inventory quantity' can be selected as 'Number', and if the options for 'Product color' are fixed, 'Single choice' or 'Multiple choice' can be selected and a default value can be set.
    • Mandatory?Select based on business requirements.
    • Default valueIf the field has a common default value, it can be set here.
  5. Save and update cacheAfter defining all the necessary custom parameters, remember to save the changes and clear the system cache to ensure the settings take effect.

After completing these steps, when you publish or edit products in the 'Content Management', you will be able to see and fill in these newly defined custom parameters.

Call and display custom parameters on the product detail page

The AnQi CMS template system is based on the Django template engine syntax, providing various tags for flexible data calling. On the product detail page, you can usearchiveDetailTags andarchiveParamsLabel to display custom parameters.

Method one: Directly call specific parameters.

Parameters such as 'Price' and 'Stock' which are commonly used or clearly defined as independent fields in the product model can be accessed directly through the current productarchiveCall the object. Similarly, if you have customized the field namecolorormaterialyou can also call it directly.

in the template file of the product detail page (usuallyproduct/detail.htmlOr customize the product template) you can call it like this:

  • Price:{{archive.Price}}or{% archiveDetail with name="Price" %}
  • Inventory:{{archive.Stock}}or{% archiveDetail with name="Stock" %}
  • Other custom fieldAssuming the field name calledmaterial):{{archive.material}}or{% archiveDetail with name="material" %}

here,archiveRepresents the complete product data object for the current product detail page. The direct calling method is concise and clear, suitable for those who know the specific field names and want to display individual parameters separately.

Method two: Traverse all custom parameters

When you have multiple custom parameters, or want to display all additional information in a unified format (such as a parameter list),archiveParamsTags make it very convenient. It can traverse all the custom parameters associated with the current product.

UsearchiveParamsWhen tagging, you can specifysorted=trueto get an ordered parameter list, convenient for loop display.

{# 假设这是您的产品详情页模板 product/detail.html #}

<div class="product-info">
    <h1>{{archive.Title}}</h1>

    {# 直接调用价格和库存 #}
    <p><strong>产品价格：</strong><span class="price">{{archive.Price}} 元</span></p>
    <p><strong>库存：</strong><span class="stock">{{archive.Stock}} 件</span></p>

    {# 遍历所有其他自定义参数 #}
    <h3>产品详细参数：</h3>
    <ul class="product-params">
        {% archiveParams params with sorted=true %}
            {% for item in params %}
                {# 排除掉价格和库存，因为它们已经在上面单独显示了 #}
                {% if item.Name != "产品价格" and item.Name != "库存数量" %}
                    <li>
                        <span>{{item.Name}}：</span>
                        <span>{{item.Value}}</span>
                    </li>
                {% endif %}
            {% endfor %}
        {% endarchiveParams %}
    </ul>

    <h3>产品描述：</h3>
    <div class="product-description">
        {{archive.Content|safe}} {# archive.Content 可能包含HTML，需要safe过滤器 #}
    </div>
</div>

Code analysis:

  • {{archive.Title}}Directly display the product title.
  • {{archive.Price}}and{{archive.Stock}}Directly call the values of the 'price' and 'stock' fields defined in the product model.
  • {% archiveParams params with sorted=true %}This tag is used to retrieve all custom parameters of the current product and assign them to a namedparams.sorted=trueEnsure that these parameters are returned in the order defined by the backend, for unified display.
  • {% for item in params %}: Loop through.paramsEach custom parameter in the variable.
  • {% if item.Name != "产品价格" and item.Name != "库存数量" %}: This is a conditional judgment, used to skip those parameters that you have already displayed separately in advance, to avoid repetition. Please take this"产品价格"and"库存数量"Replace with the actual name filled in the "Parameter Name" on the backend.
  • {{item.Name}}: Display the custom parameter name (i.e., the Chinese name filled in the "Parameter Name" on the backend).
  • {{item.Value}}: Display the value of the custom parameter.
  • {{archive.Content|safe}}: Display the content of the product.|safeThe filter is necessary because the product content is usually in rich text format, which may contain HTML tags and needs to be escaped.

By combining these two calling methods, you can flexibly display all important custom parameters on the product detail page, enhancing the information volume and user experience of the website.

Summary

The Anqi CMS greatly simplifies the process of calling and displaying product custom parameters through its highly flexible content model and intuitive template tags.No matter whether you need to highlight key parameters or display all additional information in a list, Anqi CMS provides an efficient and easy-to-operate solution.By reasonably planning your content model fields and utilizing the above template tags, you can provide users with more detailed and personalized product detail pages.

Frequently Asked Questions (FAQ)

  1. Q: I have set custom parameters in the background, but why is the product details page not displaying?A: First, check the call field names you are using in the template (`{{archive.your_custom_field