In the operation of the website, especially for product display websites, product details are far more than just titles and descriptions.To better meet user needs, it is particularly important to display various personalized parameters such as product prices, inventory, colors, materials, and so on.AutoCMS (AutoCMS) is equipped with a 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 for the product model in the Anqi CMS backend.One of the core strengths of Anqi CMS is its highly customizable content model, which allows you to create or modify fields according to your business needs.

  1. Log in to the Anqi CMS admin backend: Log in to your website's backend management interface.
  2. Enter content model managementIn the left navigation bar, find 'Content Management' and click 'Content Model'.
  3. Edit product modelEnglish: Usually, an enterprise CMS will have built-in 'Product Model'.Find and click "Manage Fields" to enter the field editing page of the product model.If you have created a custom model for a specific product type, select the corresponding model to edit.
  4. Add Custom Fields:
    • Click the 'Add Field' button.
    • Parameter nameThis is the name displayed in the background management interface for this field, for example, 'Product Price', 'Inventory Quantity', 'Product Color', or 'Product Material'.
    • Call fieldThis is the actual field name used to call this parameter in the template code. Please use English lowercase letters or camel case naming, for exampleprice/stock/color/materialThis field name is critical for subsequent template calls.
    • field type
    • Is required：According to business requirements, select.
    • Default value：If the field has a commonly used default value, it can be set here.
  5. Save and update cacheDefine all necessary custom parameters and remember to save the changes, and clear the system cache to ensure that the settings take effect.

After completing these steps, when you publish or edit products in the "Content Management", you can see and fill in these new-defined custom parameters.

On the product detail page, call and display custom parameters

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

Method one: Directly call specific parameters.

For commonly used parameters such as “Price” and “Stock”, which are defined as independent fields in the product model, they can be accessed directly through the current productarchiveObject to call. Similarly, if you have a custom field with a different namecolorormaterialyou can also call it directly.

in the template file of the product detail page (usuallyproduct/detail.htmlor a custom 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 fields(assuming the field name is called)material):{{archive.material}}or{% archiveDetail with name="material" %}

Here,archiveRepresents the complete product data object of 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 wish to display all additional information in a uniform format (such as a parameter list),archiveParamsLabels make it very convenient. It can iterate over all associated custom parameters of the current product.

UsearchiveParamswhen labeling, you can specifysorted=trueto get an ordered list of parameters, convenient for looping 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 get all custom parameters of the current product and assign them to a variable namedparams. sorted=trueMake sure these parameters are returned in the order defined by the backend, which is convenient for unified display.
  • {% for item in params %}Loop through:paramsEvery custom parameter in the variable.
  • {% if item.Name != "产品价格" and item.Name != "库存数量" %}This is a conditional judgment to skip those parameters you have already shown separately in front, to avoid repetition. Please take here"产品价格"and"库存数量"Replace it with the actual name filled in the 'Parameter Name' on the backend.
  • {{item.Name}}: Displays the custom parameter name (i.e., the Chinese name filled in the 'Parameter Name' on the backend).
  • {{item.Value}}：Displays the value of custom parameters.
  • {{archive.Content|safe}}：Displays the content of the product.|safeFilter is necessary because the product content is typically 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 AutoCMS 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 core parameters or display all additional information in a list, Anqi CMS provides an efficient and easy-to-use solution.Through reasonable planning of your content model fields and utilizing the above template tags, you can provide users with more detailed and personalized product detail pages.

Common Questions (FAQ)

  1. Q: I have set custom parameters in the background, but why doesn't the product detail page show?A: First, please check the calling field name you are using in the template ({{archive.your_custom_field})} ]