Navigation
https://github.com/magesuite/navigation
This module provides backend logic for corresponding frontend component navigation
It provides several new functionalities: featured product, navigation teaser, and helps to adjust desktop and mobile navigation according to the project’s requirements. It allows to include or exclude a specific category from desktop or mobile navigation. Also, a custom URL can be used instead of Magento category as a navigation link target.
Â
Installation
This module is required by theme-creativeshop and is installed out of the box when theme-creativeshop is required
composer require "creativestyle/magesuite-navigation" ^2.0.0
Â
User Guide
2.9. Custom Links in Main Navigation
4.7.1. All Categories Navigation Flyout
Admin settings
Main settings
Catalog->Categories
Â
Include in desktop navigation | When enabled category will be shown in navigation for desktop and tablet devices. Default value: true |
Include in mobile navigation | When enabled category will be shown in navigation for mobile devices. Default value: true |
Custom target URL | Links to this category will be replaced with above URL when provided. Use absolute URL (starts with https://) to redirect outside the shop. Use relative URL (i.e. customer/account/login/) to redirect within the shop. Default value: empty |
Include in main bar is part of Magesuite_MegaDropdown module
Â
Navigation featured products
Under Navigation - Featured Products
tab:
Choose products to display as featured products inside the desktop navigation flyout of a given category.
Navigation image teaser
Under Navigation - Image Teaser
tab:
Add slogan, description, CTA label. CTA target link (all optional) and image (required) in order to display the navigation teaser.
Category group
A category can be marked with a group name. Please use single word string. In the child theme categories with such identifier may have distinct styling.
Â
Backend
BE documentation is in progress
Â
Frontend
Featured product
Navigation teaser
Â
Corresponding components in theme-creativeshop:
theme-creativeshop/src/components/navigation
Styling
Styling is provided in:
theme-creativeshop/src/components/navigation/navigation.scss
theme-creativeshop/src/components/offcanvas-navigation/offcanvas-navigation.scss
Scripts
theme-creativeshop/src/components/navigation/navigation.ts
theme-creativeshop/src/components/offcanvas-navigation/offcanvas-navigation.ts
Additional functionalities
Active category
getActiveCategoryPath
method, used in corresponding template magesuite-navigation/view/frontend/templates/navigation/active-category-path.phtml
and then in theme-crativeshop in order to mark the active category with .active
class
Category group styling
If a category is assigned to a group in the admin panel (see documentation above) it is possible to apply an additional styling to such navigation item.
Example:
.cs-navigation__item[data-category-identifier='eco'] {
& > #{$root}__link {
color: #76b636 !important;
&:after {
content: '';
background-image: url('../images/icons/leaf.svg');
background-repeat: no-repeat;
background-size: 1.5rem;
width: 1.5rem;
height: 1.7rem;
margin-left: 0.4rem;
transform: translateY(0.2rem);
display: inline-block;
}
}
}