How to build and display a multi-level product category navigation in AnQi CMS?

AnQi CMS is a powerful content management system that 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.Let's explore how to achieve this goal in Anqi CMS together.

Core fundamentals: Understanding the classification system of Anqi CMS

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

first, Content modelIt is the foundation for defining the structure of website content. If your website mainly showcases products, then there is usually 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.Categories are attached to specific content models.

secondly,Document CategoryIt is the framework for organizing content. In AnQi CMS, each category can have a parent category, thereby forming a clear hierarchical relationship.For example, you can create 'Electronics' as a primary category, and then create 'Smartphones', 'Computers', and other secondary categories under it. Even under 'Smartphones', you can further create 'Feature Phones' and other third-level categories.Each category not only has a name, link, description and other basic information, but can also set thumbnails, Banner images, even independent category content, all of which greatly enrich the possibilities of category display.

Build multi-level product classification navigation: backend operation

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.Enter the 'Content Management' module in the background and select 'Content Model'.If you do not have a dedicated "product model" yet, you can create a new one or modify an existing model to suit the needs of product display.Ensure that the model includes all the custom fields required for the product.

2. Create and organize product classifications.Find "Document Category" under "Content Management".

   • Add a top-level category:Click "Add new category", select the "Product model" you defined for the product, and enter the category name (for example, "Electronics").At this time, the 'parent category' remains 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 "Add new category", select "Product Model", and choose the primary category you just created (for example, "Electronics").Enter the name of the subcategory (for example, "phone"). Continue in this manner, and 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.
     • Custom URL:Set a concise, meaningful custom URL for categories, which is very important for SEO.
     • Category template:If certain categories require a unique layout or style, you can specify a custom template file here, for exampleproduct/list-12.htmlAmong them, 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.
     • Classification 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: front-end template implementation

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

1. UsecategoryListLabel display of classification levels categoryListTags 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 implement multi-level, we can use again inside each category itemcategoryListtags to get their subcategories. Utilizeitem.HasChildrenThe attribute can determine whether 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 found in the background "Content Model"),parentId="0"It represents getting all top-level categories.item.IdUsed to specify getting the subcategories of the current category.

2. CombinenavListTag builds the main navigation.If your main navigation menu needs to be flexible to configure in the background and includes product categories, thennavListThe label would be a more suitable 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.In the front-end template, you can call it like this: “`twig {% navList mainNav with typeId=“Your product main navigation category ID” %} {# Assuming your product main navigation category ID is 2 #}

   <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