How to integrate a category list in the navigation menu and display product documents under each category?

In AnQi CMS, integrating product categories into the navigation menu and displaying the product documents under them is a key step to improve website user experience and content organization efficiency.This can not only help visitors find the information they need quickly, but also helps search engines better understand the structure of the website.

To achieve this goal, we need to make some basic settings in the Anqi CMS backend and integrate the corresponding code in the template files according to these settings.

Step 1: Back-end preparation - Build content and navigation structure

Ensure that the back-end content structure is clearly established before integrating at the template level.

1. Establish product content model and classificationThe AnQi CMS supports a flexible content model.If your website is mainly for displaying products, you should have already set up a "product model" (which is usually built-in to the system, or you can customize it).In the 'Content Management' module, go to 'Content Model' to confirm the existence of the 'Product Model'. Next, create a detailed classification system for your product in the "Document Classification" section.For example, you can create "electronics", "home goods", and other first-level categories, and create "phones", "computers", or "kitchen appliances", "bedroom furniture" and other second-level categories under them.Ensure these categories are based on the "product model".

2. Publish and associate product documentationPost your product documentation under the corresponding category.When adding product documentation, be sure to associate it with the correct category, and fill in the product title, description, images, and any custom parameters, as this information will be displayed on the front end.

3. Configure website navigationNow, we need to configure the navigation menu in the background “Navigation Settings” so that these product categories can be displayed on the website front end.

   • There will usually be a primary navigation, you can create a first-level navigation named "Product Center" or "All Products".
   • Next, add sub-navigation to this main navigation.Select the link type as "Category Page Link" and then select the specific product category you previously created from the drop-down list (for example, "Electronics", "Home Goods").This, each category item in the navigation menu is linked to the product category in the background.

Step two: Template integration - integrate categories and documents into the navigation.

After completing the background settings, we need to modify the website template files so that this data is displayed correctly on the front end. Usually, the website navigation menu code is locatedtemplateUnder the directorybash.html/header.htmlor a specialpartial/nav.htmlin these files.

The template tag function of Anqi CMS is powerful and easy to use, which can help us easily integrate navigation menus with categorized documents. The core idea is to usenavListLabel retrieves navigation menu data and then traverses each navigation item. If the navigation item is a product category (usually a second-level navigation), we can use this category's ID toarchiveListLabel to retrieve and display the product documents under this category.

Here is a commonly used code example that can be directly applied to your navigation menu template file.

<ul>
    {% navList navList with typeId=1 %} {# typeId=1通常代表默认主导航 #}
    {%- for item in navList %}
    <li>
        <a href="{{ item.Link }}">{{item.Title}}</a>
        {# 判断当前导航项是否有子导航（通常是产品分类） #}
        {%- if item.NavList %}
        <ul class="nav-menu-child"> {# 这是二级导航菜单的容器 #}
            {%- for inner in item.NavList %}
            <li>
                <a href="{{ inner.Link }}">{{inner.Title}}</a>
                {# 确保当前子导航项确实是一个分类页面，并且有对应的分类ID #}
                {% if inner.PageId > 0 %}
                    {# 使用archiveList标签获取当前分类下的产品文档 #}
                    {% archiveList products with type="list" categoryId=inner.PageId limit="8" %} {# 限制显示8个产品 #}
                    {% if products %} {# 如果有产品文档，则显示 #}
                    <ul class="nav-menu-child-child"> {# 这是产品文档列表的容器 #}
                        {% for product in products %}
                        <li><a href="{{product.Link}}">{{product.Title}}</a></li>
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% endarchiveList %}
                {% endif %}
            </li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
    {% endnavList %}
</ul>

Step 3: Code Analysis and Notes

Let's analyze the template code in detail:

• {% navList navList with typeId=1 %} This is to get the main navigation list tag.typeId=1This usually refers to the default main navigation category in the background "Navigation Settings". If you have created other navigation categories, please adjust according to the actual situation.typeId. VariablenavListStore all the main navigation items data.

• {%- for item in navList %}: Iterate over each item in the main navigation.itemRepresents a main navigation item.

• {%- if item.NavList %}:item.NavListIs the current main navigation item containing a sub-navigation list (i.e., a secondary menu)? In our scenario, these sub-navigations are product categories.

• {%- for inner in item.NavList %}： Traverse each item in the secondary navigation (product category).innerRepresents a sub-navigation item, that is, a product category.

• {% if inner.PageId > 0 %}： This line is very critical.inner.PageIdStored the category ID associated with the sub-navigation item (product category). We judge throughPageIdwhether it is greater than 0 to ensure that it is indeed a valid category link.

• {% archiveList products with type="list" categoryId=inner.PageId limit="8" %}This is the core tag for retrieving product documents.

  • productsIs a custom variable name used to store the list of retrieved product documents.
  • type="list"It indicates that we are getting a static list, not a paged list.
  • categoryId=inner.PageId:This is the key!We will pass the ID of the product category we are currently looping to (inner.PageId) toarchiveListThis allows it to accurately retrieve the product documents under the category.
  • limit="8": Limit the maximum number of product documents displayed under each category to 8, and you can adjust this number according to your design requirements.

• {% if products %}and{% for product in products %}After obtaining the product document list, first judgeproductswhether the variable has content (i.e., whether there are products under the category), if it does, then continue traversing and displaying the link and title of each product.

With such a structure, your navigation menu can not only display product categories but also list relevant product documents directly under each category, greatly enhancing the practicality and user experience of the website.Remember to clear the system cache after completing the code modification, so that the front-end page can update in time.

Frequently Asked Questions (FAQ)

1. Why can't I see the product documentation in the navigation menu?First, please check that your child navigation (product category) is correctly associated with the actual product category in the background "navigation settings".Next, confirm if there are any published product documents under the product category you are associated with.categoryIdIs the parameter correctly referencing the sub-navigation item?PageId, as well asarchiveListlabel'smoduleIdDoes it match your product model ID (default is product model). Don't forget to clear the cache to make the changes take effect.

2. I want to display only a fixed number of product documents under a specific category in the navigation menu, but not all, what should I do?You can inarchiveListUsed in tagslimitParameters to limit the number of displayed items, for examplelimit="5"Indicates that only 5 product documents are displayed. If you want to adjust the order of display, you can useorderFor example, parameters,order="views desc"Sorted by view count in descending order, ororder="id desc"Sorted in descending order by the most recent release.

3. How to ensure that only the product documents of the lowest-level categories are displayed in my navigation menu?The code example will default to traversing all levels of sub-navigation. If you only want to display product documents under specific category levels, you may need to add some logical judgments in the template code, such as判断innerAn object's property (if there is a hierarchical tag in the background category), or only at the deepest levelforUsing a looparchiveListlabel, not in all sub-loops