How to implement nested display of multi-level categories (such as product categories) in AnQi CMS?

AnQi CMS, as an enterprise-level content management system, provides high flexibility and powerful functions in terms of content organization and presentation.For enterprises, especially those with complex product lines or websites with a large amount of content, how to achieve clear and logical multi-level classification nesting display is the key to improving user experience and content management efficiency.Today, let's delve deeply into how AnQiCMS elegantly achieves this goal.

The foundation of AnQiCMS: Flexible content model and classification system

In AnQiCMS, the foundation for building multi-level categories is its 'flexible content model' and the closely related 'document classification' feature.This is like setting up different 'blueprints' for your website content, each blueprint defining the unique properties and management methods of a type of content.For example, when we need to display a product, we can create a special "product model" that includes fields unique to the product such as price, inventory, SKU, and so on.

It is noteworthy that the classification of AnQiCMS is bound to the content model.This means that when you create a category of 'Electronic Products', it will clearly indicate which model it belongs to, such as 'Product Model'.All classification operations, including the construction of multi-level classifications, will revolve around this specific content model.This design ensures the high structuring of content and clear management.

Building multi-level classification: Backend operation details

The AnQiCMS backend interface design is intuitive, even non-technical personnel can easily get started. To build multi-level categories, such as product categories, you just need to follow the following steps:

1. Define the content model:First, go to the "Content Management" module in the background and enter the "Content Model" settings.Here, you can create or edit a "product model", and add necessary custom fields such as "brand", "material", etc., to meet your personalized product display needs.

2. Create a top-level category:Next, enter the "Document Classification" management page. Click "Add Category" to set the primary category for your product, such as "Home Appliances", "Digital Accessories", "Clothing Shoes Hats", and so on.When creating, select the content model it belongs to, which is the previously created "product model".These top-level category's 'parent category' option is usually set to none.

3. Create a sub-level category:Select a primary category, you can add subcategories for it.For example, under "household appliances", you can add second-level categories such as "kitchen appliances" and "major appliances".At this time, in the form for creating sub-categories, select "Parent Category" as the category you just created.AnQiCMS will intelligently prompt you to ensure that the child category you select belongs to the same "content model" as the parent category, thus avoiding confusion in the data structure.This process can be nested infinitely, theoretically supporting any depth of classification levels, allowing you to organize content finely according to business logic.

4. Associate products (documents) with category:Finally, when you publish specific products in the 'Document Management', just select the corresponding lowest-level category under its category.AnQiCMS will automatically assign products to the carefully designed classification structure you have created.

The magic of frontend display: flexible use of template tags

After setting up the classification structure on the back-end, how can it be displayed in a nested form on the website front-end, which is a highlight of the AnQiCMS template engine.AnQiCMS uses a syntax similar to the Django template engine, providing a series of powerful tags to call and render data.

The core of implementing multi-level nested display of categories iscategoryListTags, which allow you to retrieve categories based on conditions and perform circular output.

Firstly, we can call all the top-level product categories:

{% categoryList topCategories with moduleId="你的产品模型ID" parentId="0" %}
    {# 在这里循环遍历所有一级分类 #}
    {% for category in topCategories %}
        <div class="top-level-category">
            <a href="{{ category.Link }}">{{ category.Title }}</a>
            {# 判断当前分类是否有子分类 #}
            {% if category.HasChildren %}
                <ul class="sub-level-categories">
                    {# 嵌套调用categoryList，获取当前分类的子分类 #}
                    {% categoryList subCategories with parentId=category.Id %}
                        {% for subCategory in subCategories %}
                            <li class="sub-level-category">
                                <a href="{{ subCategory.Link }}">{{ subCategory.Title }}</a>
                                {# 如果还需要更深层次的嵌套，可以继续在这里判断subCategory.HasChildren并再次嵌套调用 #}
                                {% if subCategory.HasChildren %}
                                    <ul class="third-level-categories">
                                        {# 再次嵌套调用，获取三级分类 #}
                                        {% categoryList thirdCategories with parentId=subCategory.Id %}
                                            {% for thirdCategory in thirdCategories %}
                                                <li><a href="{{ thirdCategory.Link }}">{{ thirdCategory.Title }}</a></li>
                                            {% endfor %}
                                        {% endcategoryList %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endfor %}
                    {% endcategoryList %}
                </ul>
            {% endif %}
        </div>
    {% endfor %}
{% endcategoryList %}

In the above template code, we:

1. Outer layercategoryList: PassmoduleIdspecified the product model category to be obtained, and usedparentId="0"to limit only the top-level categories.
2. category.HasChildrenthe judgment.:In each iteration, usingHasChildrenThis boolean value is used to determine whether the current category has a subcategory. This determines whether nesting should continue for the display.
3. Inner layercategoryListnestedIf:category.HasChildrenIf true, we will use it again internally.categoryListLabel, andparentIdThe parameter is set to the current loop categorycategory.IdThus, it can accurately obtain its subcategories. This process can be nested in multiple layers according to your category depth requirements.

Moreover, if you want to display the corresponding product list directly under a category instead of an empty subcategory list, you can do so in the judgmentcategory.HasChildrenwhen it is false, usearchiveListTag to call products (documents) under this category and throughcategoryId=category.IdAssociate.