The Commerce Navigation component is a server-side component written in HTL, rendering a combined AEM page and commerce catalog navigation tree. The category tree details are retrieved from Magento via GraphQL. The main usage of this component would be as part of all page templates which include navigation. This component is based on the Navigation component of the AEM WCM Core Components library.
The component is configured to display all the AEM pages under the "commerce" section. In addition, the navigation page (at the bottom of the menu items) is configured to be the parent menu item of the "Magento catalog", that is, this displays and points to the product categories retrieved from Magento via GraphQL. This demonstrates how the component can display both AEM pages and Magento product categories.
Note: due to the limited amount of sample data available, the link to the category pages will always display the same sample category data. However, you can see that the URL of each category is different and contains the Magento category id and url path.
- skipNavigationRoot: true
- navigationRoot: /content/core-components-examples/library/commerce
- sling:resourceType: cif-components-examples/components/navigation
- collectAllPages: false
- structureDepth: 2