In the Aanqi CMS, integrating product categories into the navigation menu and displaying the product documents under them is a key step to enhance website user experience and content organization efficiency.This not only allows visitors to quickly find the information they need, 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 security CMS backend and integrate the corresponding code in the template files according to these settings.
第一步：Background preparation——Build content and navigation structure
Ensure that the background content structure is clearly established before integrating at the template level.
Establish product content model and classificationThe auto CMS supports a flexible content model.If your website is mainly for displaying products, you should have already set up the "product model" (this is usually built-in to the system, or you can customize it).In the "Content ManagementNext, create a detailed classification system for your products in the "Document Classification".For example, you can create primary categories such as 'Electronic Products' and 'Home Goods', and under them create secondary categories such as 'Cell Phones', 'Computers', or 'Kitchen Appliances', 'Bedroom Furniture', etc.Ensure these categories are based on the "product model".
Publish and associate product documentsPublish your product documentation under the corresponding category.When adding product documents, be sure to associate them with the correct category, and fill in the product title, description, images, and any custom parameters. This information will be displayed on the front end.
Configure website navigationNow, we need to configure the navigation menu in the background 'Navigation Settings' so that these product categories are displayed on the front end of the website.
- 通常会有一个主导航，你可以创建一个名为“产品中心”或“所有产品”的一级导航。
- Next, add a sub-navigation to this main navigation.Select 'Link Type' as 'Category Page Link', then choose the specific product category you previously created from the dropdown list (e.g., 'Electronics', 'Home Goods').Thus, each category item in the navigation menu is linked to the product categories on the backend.
第二步：模板集成——将分类与文档整合到导航中
Complete the background settings, and then we need to modify the website template files to display this data correctly on the front end. Typically, the website navigation menu code is located intemplatethe directory.bash.html/header.htmlor a dedicatedpartial/nav.htmlthese files.
The template tag feature of Anqi CMS is powerful and easy to use, which can help us easily integrate navigation menus and categorized documents. The core idea is:navListLabel fetches navigation menu data, 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 acquisition and display of 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>
Third step: Code parsing and注意事项
Let's analyze the template code in detail:
{% navList navList with typeId=1 %}: This is the tag for getting the main navigation list.typeId=1It usually refers to the default main navigation category in the "navigation settings" backend. If you have created other navigation categories, please adjust according to the actual situation.typeId.navListThe data of all main navigation items will be stored.{%- for item in navList %}): Iterate over each item in the main navigation.itemRepresents a main navigation item.{%- if item.NavList %}:item.NavListIs to determine whether the current main navigation item contains a sub-navigation list (i.e., a second-level 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 classification ID associated with this sub-navigation item (product category). We determinePageIdwhether it is greater than 0 to ensure that it is indeed a valid classification link.{% archiveList products with type="list" categoryId=inner.PageId limit="8" %}This is the core label for retrieving product documentation.productsIt is a custom variable name used to store the list of retrieved product documents.type="list"Indicates that we are getting a static list rather than a paginated list.categoryId=inner.PageId:This is the key!The ID of the product category currently being looped to (inner.PageIdtoarchiveListEnglish translation: It can accurately obtain the product documents under this category.limit="8"English translation: Limits 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 %}In obtaining the product document list, first judgeproductswhether the variable has content (i.e., whether there are products under this category), if so, continue to traverse and display each product's link and title.
Through 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 clean up the system cache after completing the code modification so that the front-end page can update in time.
Common Questions (FAQ)
Why can't I see the product documentation in the navigation menu?First, please check if your sub-navigation (product category) is correctly associated with the actual product category in the "Navigation Settings" on the backend.Next, confirm if there are any published product documents under the product categories you are associated with.
categoryIdIs the parameter correctly referencing the sub-navigation item?PageIdas well asarchiveListTagsmoduleIdDoes it match your product model ID (default to product model)？Don't forget to clear the cache to make the changes take effect.I only want to display a fixed number of product documents under a certain category in the navigation menu, instead of all, how should I do it?You can do this on
archiveListthe label uselimitUse parameters to limit the number of displayed items, for examplelimit="5"Displays only 5 product documents. If you want to adjust the order of display, you can useorderparameter, such asorder="views desc"sorted by views in descending order, ororder="id desc"sorted by the most recent release in descending order.How to ensure that only the product documents of the lowest-level categories are displayed in my navigation menu with multiple nested categories?The above code example will default to traversing all levels of child navigation. If you only want to display product documents under specific level categories, you may need to add some logical judgment in the template code, such as判断
innerThe property of an object (if there are level tags in the background classification), or only at the deepest levelforuse in a loop.archiveLista label, not in all child loops