An enterprise CMS, as a powerful content management system, provides users with the ability to flexibly build and display multi-level product classification navigation.This not only helps website visitors find the products they need more easily, but also effectively improves the website's SEO performance and optimizes the user experience.Next, let's explore how to achieve this goal in the A safe CMS.

Core Basics: Understanding the classification system of AnQi CMS

In the AnQi CMS, the construction of multi-level product classification navigation is inseparable from its core functions of 'content model' and 'document classification.'

Firstly,Content ModelIs the foundation for defining the structure of website content.If your website mainly showcases products, there will usually be a special 'product model'.This model can customize fields, such as product prices, inventory, brands, etc., to ensure that each product has its specific attributes.All categories are attached to a specific content model.

Secondly,Document CategoryIs the skeleton of organizing content.In the Anqi CMS, each category can have a parent category, thus forming a clear hierarchy.For example, you can create 'Electronics' as a primary category, and then create secondary categories such as 'Phones', 'Computers', and even further create tertiary categories such as 'Smartphones', 'Feature phones' under 'Phones'.Each category not only has a name, link, description, and other basic information, but can also set a thumbnail, banner image, and even independent category content, all of which greatly enrich the possibilities of category display.

Constructing multi-level product classification navigation: backend operations

The first step in building a multi-level product classification navigation is to make detailed configurations in the Anqi CMS backend.

  1. Ensure that the product model has been created or defined thoroughly

  2. Create and organize product classificationsFind 'Document Category' under 'Content Management'.

    • Add a top-level category:Click "Add new categoryAt this time, the 'parent category' is kept empty, indicating that this is a top-level category.You can add a description, SEO title, keywords, and even upload a representative Banner image or thumbnail for this category.
    • Create a subcategory:Continue clicking on “Add New Category”, select “Product Model”, and choose the primary category you just created under “Parent Category” (for example, “Electronics”).Enter the name of the subcategory (e.g., "phone").As an example, you can create multi-level subcategories based on the depth of the product line.
    • Complete the category information:Be sure to pay attention to the 'Other Parameters' section when creating or editing a category.
      • Customize URL:Set a concise and meaningful custom URL for the category, which is very important for SEO.
      • Category Template:If some categories require unique layouts or styles, you can specify a custom template file here (for example,product/list-12.html，where 12 is the ID of this category), rather than using the default category list template.
      • Banner image/thumbnail: These images can be used for front-end navigation or classification pages, providing a more intuitive visual guidance.
      • Category content:You can add an introductory text here for the category, which will be very helpful on the category page.

Display multi-level product category navigation: frontend template implementation

After the back-end classification structure is set up, the next step is to vividly display it on the website through the front-end template tags. The template engine of Anqi CMS provides powerfulcategoryListandnavListTags, as well as flexible loop control, help us achieve this goal.

  1. UsecategoryListTag display of classification level categoryListLabels are the core of obtaining the category list. By nesting, you can easily build multi-level navigation.

    Firstly, obtain the top-level product category:

    {% categoryList productCategories with moduleId="您的产品模型ID" parentId="0" %}
    <ul>
        {% for item in productCategories %}
            <li>
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {# 在这里检查是否有子分类，并继续嵌套调用 #}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

    To achieve multi-level, we can use it again inside each category item.categoryListTags to get its sub-categories. Utilizeitem.HasChildrenProperty can determine if the current category has subcategories, thereby deciding whether to render the next level of navigation:

    {% categoryList productCategories with moduleId="您的产品模型ID" parentId="0" %}
    <ul class="main-nav">
        {% for item in productCategories %}
            <li class="nav-item">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.HasChildren %} {# 判断是否有子分类 #}
                    <ul class="sub-nav">
                        {% categoryList subCategories with parentId=item.Id %} {# 获取当前分类的子分类 #}
                            {% for subItem in subCategories %}
                                <li class="sub-nav-item">
                                    <a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
                                    {# 甚至可以在这里继续嵌套，如果您的分类层级更深 #}
                                </li>
                            {% endfor %}
                        {% endcategoryList %}
                    </ul>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endcategoryList %}

    In the above code,moduleIdShould be replaced with your product model ID (usually checked in the "Content Model" backend),parentId="0"Represents retrieving all top-level categories.item.IdUsed to specify retrieving the subcategories of the current category.

  2. CombinenavListTag builds the main navigation.If your main navigation menu needs to be flexibly configured in the background and contains product categories, thennavListThe label would be a better choice.In the background "Background Settings" -> "Navigation Settings", you can create a new navigation category, such as "Product Main Navigation", and then add various product categories and set up the hierarchy.

    <ul class="main-menu">
    {% for navItem in mainNav %}
        <li class="menu-item {% if navItem.IsCurrent %}active{% endif %}">
            <a href="{{ navItem.Link }}">{{ navItem.Title }}</a>
            {% if navItem.NavList %} {# 检查是否有子导航项 #}
                <ul class="submenu">
                    {% for subNavItem in navItem.NavList %}
                        <li class="submenu-item {% if subNavItem.IsCurrent %}active{% endif %}">
                            <a href="{{ subNavItem.Link }}">{{ subNavItem.Title }}</a>
                            {# 也可以在此处显示产品列表或更深层级的分类 #}
                            {% if subNavItem.PageId > 0 %} {# 如果是分类链接，PageId会大于0 #}
                                {% categoryList subCategories with parentId=subNavItem.PageId %}
                                    {% if subCategories %}
                                        <ul class="sub-submenu">
                                            {% for thirdLevelCat in subCategories %}
                                                <li><a href="{{ thirdLevelCat.Link }}">{{ thirdLevelCat