How to use AnQiCMS's flexible content model to achieve personalized field display on product detail pages?

Using the flexible content model of AnQiCMS, create a unique product detail page

When operating a website, we all hope that the product detail page can attract visitors and provide clear, personalized product information.However, when facing different types of products, using a fixed template alone often fails to fully showcase their unique features, and may even make visitors feel that the information is insufficient or confusing.For example, the display parameters required for a mobile phone and a T-shirt are completely different, and rigidly fitting a template will only be twice as inefficient.

At this time, the flexible content model feature of AnQiCMS is particularly important.It gives us the ability to customize product fields according to different business needs, thus creating dedicated detail pages for each product, which not only greatly enhances the user experience but also brings significant benefits to search engine optimization (SEO) and conversion rates.

Why is a personalized product detail page so critical?

  • Improve user experience:When visitors enter the product details page, they hope to see the most relevant core information about the product immediately.Personalized fields can directly meet this need, allowing them to quickly understand the features of the product and reduce the cost of finding information.
  • Optimize SEO effect:Rich and structured product data is easier for search engines to understand and crawl.By using custom fields, we can provide more specific and rich keyword information for each product, thereby improving the ranking in search results.
  • Promote sales conversion:Detailed, accurate and easy-to-understand product information can enhance the visitor's purchase confidence.When the product features are fully displayed and highly matched with the visitor's needs, the conversion rate naturally rises.

Next, let's take a look at how to use AnQiCMS's flexible content model to step by step implement the personalized field display on the product detail page.

First step: Create and configure your product content model

Firstly, we need to define the basic structure of the product in the AnQiCMS backend. This is like making an information table for your product, determining which items are needed to describe it.

  1. Enter content model management:Log in to the AnQiCMS backend, navigate to the "Content Management" menu, and select "Content Model". You will see the system-built "Article Model" and "Product Model".
  2. Add or Modify Model:
    • If your existing product model meets your needs, you can directly click "Modify" to add custom fields.
    • If your product types are very diverse, such as both electronic products and clothing, it is recommended to click 'Add' to create a brand new content model, such as naming it 'Mobile Product Model' or 'Clothing Product Model'.When creating a model, you need to specify a "model table name" and a "URL alias", and these names should all be in lowercase English letters.
  3. Custom Model Fields:This is the core step. In the content model editing interface, you can find the "Content Model Custom Fields" area. Here, you can add various fields based on product characteristics:
    • Single-line text:Applicable to brief information such as "brand", "model", "color name", etc.
    • Number:Applicable to numeric data such as "price", "inventory", "memory size (GB)", etc.
    • Multi-line text:Applicable to fields that require a lot of text descriptions such as 'Product Features and Highlights', 'Detailed Configuration Description', etc.
    • Single choice, multiple choice, dropdown choice:These fields are very suitable for situations that require preset options.For example, set 'Red, Blue, Black' as options for the 'Color' field, and set 'S, M, L, XL' and so on for the 'Size' field.When setting these fields, just enter an option on each line in the 'default value' column.

When adding a field, you can define a "parameter name" (for display in the background, such as "phone brand"), and a "call field" (for use in templates, such asbrand), and select its "field type" and whether it is "required". Reasonably planning these fields is the basis for building a powerful product detail page.

Step two: fill in personalized product data

After the content model is defined, when we publish new products or edit existing products, we can fill in specific data for these custom fields.

  1. Add or edit product documentation:Navigate to "Content Management" under "Add Document" or "Document Management" and select "Edit" an existing product.
  2. Select the category and model associated with:In the editing interface, the first thing to ensure is that your product has selected a correct "category", and this category is associated with the product content model you configured in the first step.
  3. Enter custom field:After selecting the correct category, you will see all the custom fields you just created in the 'Other Parameters' collapse box in the document editing interface.Please enter the corresponding product data for each field according to the prompt.If a field is set to default, you can leave it blank, and the system will automatically display the default value when called on the front-end.

These personalized data filled in the background will become the core content of your product detail page.

Step 3: Display personalized fields in the template

After the data entry is completed, the final step is to modify the template file so that these personalized fields can be displayed on the front page.The AnQiCMS template system is based on the Django template engine syntax, which is very flexible.

  1. Find the product detail page template:AnQiCMS template files are usually stored in/templateUnder the directory, with.htmlsuffix. According to your website configuration, the product detail page may be located in{模型table}/detail.htmlor a similar path.
  2. Use built-in tags to call data:
    • Call basic product information:Fields such as product title, description, thumbnail, etc., can be used directly:archiveDetailTag to obtain, for example:
      
<h1>{% archiveDetail with name="Title" %}</h1>
<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}"/>
<div>{% archiveDetail with name="Description" %}</div>
      Please note if:DescriptionFields may contain HTML content, remember to add|safea filter such as{{ archiveDetail with name="Content" | safe }}to ensure that the HTML code is parsed correctly.
    • Call a custom field:For the personalized fields you add to the content model, we need to usearchiveParamsTag to retrieve and display. This tag will return a list containing all custom fields, which we can iterate through to display one by one:
      
<div class="product-specs">
    <h3>产品参数</h3>
    {% archiveParams params %}
    {% for item in params %}
    <p>
        <span>{{item.Name}}：</span> <!-- 显示字段名，例如“品牌”、“内存” -->
        <span>{{item.Value}}</span> <!-- 显示字段值，例如“小米”、“8GB” -->
    </p>
    {% endfor %}
    {% endarchiveParams %}
</div>
      This code will traverse all custom fields and display them in the form of "field name: field value". If you want to display a custom field (such as one you define,cpu_modelThe field is displayed separately, and it can be directly obtained by its "field name".
      
<p>处理器型号：{% archiveDetail with name="cpu_model" %}</p>
      Similarly, if the value of a custom field is multiline text or contains HTML content, don't forget to use|safefilter.
  3. Save and view the effect:After modifying, save your template file. Refresh the product details page, and you should be able to see that the personalized product fields have been successfully displayed.

Advanced Application and Thinking

  • Create independent models for different product types:If your product differs greatly (for example, a phone requires a 'processor', a 'camera', while a laptop requires a 'graphics card', 'screen size'), you can create multiple content models such as 'phone model', 'laptop model', each with its unique field set.This way, different product detail pages can have completely different information structures.
  • Use personalized fields for filtering and searching:AnQiCMS'archiveFiltersTags allow you to create filter conditions based on custom fields.This means that visitors can filter products on the product list page according to conditions such as "color", "size", "brand", etc., which greatly improves the shopping experience.
  • Aesthetics and user experience:It is not enough to just display fields, we also need to combine CSS styles to make these personalized fields beautiful and easy to read.For example, place important parameters in a prominent position, and display them in a list or table format so that visitors can see them at a glance.
  • SEO advantages:Ensure that your custom field content is rich and contains relevant keywords.When search engines crawl these structured details, your product page will have a higher exposure in relevant searches.

AnQiCMS's flexible content model is a powerful tool for website content operation, it allows your product detail page to say goodbye to the same old, truly achieving 'teaching according to the student's ability'.By reasonable planning and application, your website will be able to provide a more professional and attractive product display, thereby winning the favor of more customers.

Frequently Asked Questions (FAQ)

**1. I can directly see and edit in the background management interface