contents › media › catalog › ... · php bin/magento module:enable nublue_navatron then, to...
TRANSCRIPT
01
02
........................................................................................................................................................ 1
Installation Process ............................................................................................................................. 3
Instructions for Installation ............................................................................................................. 4
1. Installation via composer ........................................................................................................ 4
2. Manual Installation ................................................................................................................. 5
3. Database ................................................................................................................................. 5
Instructions for Setup/Configuration .............................................................................................. 6
General Configuration ................................................................................................................. 6
Module Enable/Disable ........................................................................................................... 6
Menu Breakpoint .................................................................................................................... 6
Mobile Menu: Type ................................................................................................................. 7
Mobile Menu: Page Dim ......................................................................................................... 8
Mobile Menu: Direction .......................................................................................................... 8
Mobile Menu: Parent Link ...................................................................................................... 8
Mobile Menu: Parent Link Prefix ............................................................................................ 8
Desktop Menu: Mouse Event ................................................................................................. 9
Desktop Menu: Animation ...................................................................................................... 9
Custom CSS ............................................................................................................................. 9
Menu Builder .................................................................................................................................... 10
Instructions for Building your Menu ............................................................................................. 11
Adding a New Menu Item ..................................................................................................... 11
Warning Notification Messages ............................................................................................ 15
Preview before pushing LIVE ................................................................................................ 15
Autosave / Restore................................................................................................................ 15
Removing a Category or Static Block referenced in the Navatron ....................................... 15
Magento Version ........................................................................................................................... 16
Support.......................................................................................................................................... 16
Contents
03
Installation Process
04
1. Installation via composer
You can install the extension via System > Web Setup Wizard > Extension Manager like
other extensions in the Marketplace. You will need to have your access keys on hand as
you will be prompted to enter them.
1. Select Review and Install, select the module to install and follow the Setup Wizard
2. In the CLI (Command Line Interface) the following needs to be entered
composer require nublue/navatron
3. Enable Module
To get the module to appear in your Magento instance it needs to be
enabled. To do this via the CLI you need to run:
php bin/magento module:enable Nublue_Navatron
Then, to upgrade the module you need to run:
php bin/magento setup:upgrade
Finally, to compile run:
php bin/magento setup:di:compile
Instructions for Installation
05
2. Manual Installation
1. Download the Files
Download the files from Magento Marketplace.
2. Place the Downloaded Files in the app > code Folder
In the app > code folder (If you do not have the code folder, then you will
need to create it), place the extension folder and files into this. If the files are
zipped, they will need to be extracted before placing in app > code.
When successful, you should see the following structure:
app > code > Nublue > Navatron > Module Folders
3. Enable Module
To get the module to appear in your Magento instance it needs to be
enabled. To do this via the CLI you need to run:
php bin/magento module:enable Nublue_Navatron
Then, to upgrade the module you need to run:
php bin/magento setup:upgrade
Finally, to compile run:
php bin/magento setup:di:compile
3. Database
During installation the extension creates default data. Configuration for the extension can
be found in the core_config_data table, the eav attributes made for the extension can be
found in the eav_attribute table and it creates a custom table in the database called
Nublue_Navatron.
06
General Configuration
General Configuration can be found in the Stores > Configuration > NaVAtron > Global
Options menu in your Magento admin panel.
These are the main settings for the NaVAtron, to enable/disable it on the frontend, as well
as the global styles and animation for the mobile and desktop version of the menu.
Module Enable/Disable
To enable/disable the module (to show or hide the NaVAtron on the frontend – on your
website), you can either select ‘Yes’ or ‘No’ from the Enabled dropdown that appears in
Stores > Configuration > NaVAtron.
Selecting ‘Yes’: On the frontend, the NaVAtron menu will appear across your site.
Selecting ‘No’: On the frontend, the NaVAtron will not show anywhere until the extension is
enabled again.
Note: Disabling the module via the General Configuration does not remove the module
files from app > code. For this you will need to use module:disable Nublue_Navatron via the CLI. If
you then need to enable the module again, then you will need to follow Step 3 from
the Installation Process.
Menu Breakpoint
A text field to specify the point (the width of the browser window or device) at which the
NaVAtron menu changes from the Desktop version to the Mobile version.
Instructions for Setup/Configuration
07
The following group of settings are specifically for the Mobile version of the NaVAtron:
Mobile Menu: Type
Choose the type of menu for the mobile version of NaVAtron:
Flyout Panel: The menu will have a flyout animation which displays only the current
category on the menu at one time, see below left.
Accordion: The menu will have an accordion animation which displays the full menu, initially
collapsed, where you can expand each section to reveal it’s sub-categories, see below right.
Choosing the Accordion option will display 4 extra settings:
Accordion Duration: the speed at which the accordion menu opens the sub-menu.
Accordion Single: ‘True’ allows only one sub-menu accordion to be open at one time. ‘False’ allows
multiple menus to be open at the same time.
Accordion Scroll: ‘True’ scrolls to the top of the opened accordion.
Accordion Scroll Offset: in pixels, the height above the opened accordion to which the menu will
automatically scroll to, providing Accordion Scroll = True. For example, 0 = will scroll to the top of the
opened menu ‘Jewelry’ (left) and 100 = will scroll to 100px above the opened menu (right).
08
Mobile Menu: Page Dim
The option to dim the background behind the menu when it is active. True = the background
is dimmed (left) or False = the background remains fully visible (right).
Mobile Menu: Direction
The direction from which the menu opens, either from the left or right-hand side.
Mobile Menu: Parent Link
Choose whether or not to display the ‘Parent’ category link. In the example below, True =
will show the ‘Go To Men’ category link and False = will hide this link.
Mobile Menu: Parent Link Prefix
Related to the above setting, this free text field determines what is displayed before the
parent link, providing this setting is enabled above. In the example above, the text here
would be ‘Go To’.
09
The following group of settings are specifically for the Desktop version of the NaVAtron:
Desktop Menu: Mouse Event
Choose the type of mouse event required to open the dropdowns on the Desktop menu,
either: Hover over the menu to open or Click the menu to open.
Desktop Menu: Animation
Choose the transition animation for displaying the dropdown menus.
The last Global Setting is Custom CSS.
Custom CSS
This allows you to edit the CSS of the NaVAtron to customise it to suit the style and design
of your own website.
010
Menu Builder
011
The Menu Builder can be found in the Stores > Configuration > NaVAtron > Menu Builder in
your Magento admin panel.
This is where you can build your menu and make use of the drag & drop functionality to
organise your category structure. There are 5 different menu types you can choose from
when building your navigation; Category Link; CMS Page Link; Static Block (for including
promotional banners etc. within the navigation); Custom URL and Blank Link.
Adding a New Menu Item
To add a new menu item click the ‘New Menu Item’ button at the top of the page to reveal
the form. The main form fields are as follows:
Instructions for Building your Menu
012
Enabled: Yes = the menu item will be visible on the front-end of your website. No = the
menu item will not show on the front-end of your website.
Title: the title of your menu item, as it appears on the front-end of your website.
Parent Item: this defines where the new menu item is placed in the navigation. To add an
item to the main navigation bar you can add it to the Root parent item. To add an item to a
drop-down as a child item to a main menu item, add them to the relevant Parent Category.
Root Parent Item: If an item is added to the Root, 2 additional fields will show:
Desktop Drop Down Panel Width: This value determines how wide the drop-
down menu will be. If no value is entered, the drop-down will span the full
width. If a value is entered, an additional field will show called Desktop Drop
Down Position which determines whether the drop-down appears to the
right or left of the main menu item.
CTA Image: If added, this image appears to the right of the drop-down.
Child Sub-Menu Item: If an item is added to a parent item other than the Root (for
example Root/Men), one additional field will show called Container ID which is used
to separate the menu drop-down into columns.
If the menu is a direct child of the Root you can add a numerical ‘Container ID’. All
IDs that are the same will be grouped and stacked in the same column. For example,
if TOPS menu had container ID 1, TROUSERS menu had container ID 1 and SHOES
menu had container ID 2, the drop-down menu will be split into 2 columns with
TOPS and TROUSERS sharing column 1 and SHOES taking up column 2, like follows:
013
Menu Type: this determines the type of menu item that will be placed in your navigation,
from the following 5 options:
Category: this displays a link to the Magento Category, which can be chosen from
the additional Select Category field that appears when this menu type is selected.
CMS Page: this displays a link to a CMS Page, which can be chosen from the
additional Select CMS Page field that appears when this menu type is selected.
Static Block: this displays the content of a Static Block, which can be chosen from the
additional Select Static Block field that appears when this menu type is selected.
Custom URL: this allows you to enter any URL link, which can be specified from the
additional Custom URL field that appears when this menu type is selected.
Blank Link: this displays the text as a blank link within the menu.
Custom Class: this allows you to specify a custom class for your menu item.
The next fields on the form allow you to add a custom label next to a menu item:
Label Title: this is the text displayed on the label, for example ‘New!’.
Font Label Size: this is the size of the text displayed on the label.
Label Background Colour: this displays a pop-up colour choose to allow you to specify a
colour for the label.
Label Text Colour: this displays a pop-up colour choose to allow you to specify a colour for
the text on the label.
014
When a new menu item is added it is added to the table below:
Clicking the + icon next to a menu item will expand it to show the associated sub-menus.
Using the arrows you can drag and drop menu items to change their position in the menu.
When moving a menu item that has associated sub-menus, all sub-menus will move as well.
Also using the arrows you can drag and drop menu items to the left and right. Dragging a
menu item to the right makes it a child item of the menu item directly above it. Dragging a
menu item to the left makes it a child item or a parent item depending on what the
relationship between the menu items are.
015
Warning Notification Messages
When making any changes, a warning message will appear above the table to remind you to
save the config changes before navigating away from the page. When the config changes
are saved in the admin they are also updated on the front-end of your website.
These notification messages can be closed by clicking the cross to the right of the message.
Preview before pushing LIVE You can also Preview the changes on your menu before saving them and putting it live. This
can be done by clicking the Preview Live link next to the Save Config button. This will open
up another browser window with the Navatron menu on. The preview will automatically
update whenever a change is made.
Autosave / Restore Should any errors occur, such as with your internet connection or Magento session, a
Restore Last Session button will display above the table, allowing you to restore the menu
back to its last saved state.
Removing a Category or Static Block referenced in the Navatron
If you delete a category or static block that you have previously used within your mega
menu, a message will appear upon deletion to inform you that the link to this category was
removed from the Navatron and replaced with a blank link, giving you the specific menu
item/s affected (in this case the Test delete menu item).
This ensures your mega menu is still visible on the front-end, without errors.
Similar messages appear when deleting a static block that is referenced in the mega menu.
016
Magento Version
This extension works with Magento v2.1.x, v2.2.x and v2.3.x despite v2.1.x and v2.2.x and above
using different formats for storing data in the database (v2.1.x serialises data whilst v2.2.x and
above uses JSON). A Helper is used to compare the Magento version in the composer.json file
against a string, with the data being parsed according to how it is stored.
Support
If you require support, please contact our support team at [email protected]