...

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

composer require "creativestyle/magesuite-navigation" ^2.0.0

User Guide

2.9. Custom Links in Main Navigation

4.7.1. All Categories Navigation Flyout

4.7.2. Disable Categories for mobile and desktop devices

4.7.3. Featured Products in Navigation Flyout

Admin settings

Main settings

...

Add slogan, description, CTA label. CTA target link (all optional) and image (required) in order to display the navigation teaser.

...

Category group

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 active category with .active class

...

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

Frontend

Featured product

...

Navigation teaser

...

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;
        }
    }
}