From e2960e9711eed88a9add6247c290cac07ea462d0 Mon Sep 17 00:00:00 2001 From: carinadues <82165392+carinadues@users.noreply.github.com> Date: Mon, 9 Aug 2021 18:13:10 -0300 Subject: [PATCH] Big improvements thanks to @riha112 --- README.md | 139 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 126 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index d095af2..eb6354a 100644 --- a/README.md +++ b/README.md @@ -2,22 +2,135 @@ This repository is a module for Magento 2. This module is used to create customized navigation. -## How to use? +## Menu +1. Supported features +2. Installation +3. How to use
+ 3.1. Creating first menu
+ 3.2. Adding menu items
+ 3.3. Structure for ScandiPWA
+4. For development
+ 4.1. DB structure
+ 4.2. GraphQl structure
+ 4.3. Quick file access
+-------- +
-### In admin panel +## 1. Supported features +* Multilevel structured menu +* Magento categories +* Magento CMS pages +* Custom URLs +* Icons for menu items +* Custom CSS classes +----- +
-1. Find the `Scandiweb` logo in the left navigation bar. -2. Go to Navigation > Menu Manager. +## 2. Installation +Installation via composer: +``` +composer require scandipwa/menu-organizer +``` +----- +
+ +## 3. How to use +
+ +### 3.1. Creating first menu +1. Open admin panel +2. Locate `admin/scandipwa_menuorganizer/menu` via URL or by using side panel menu: `Scandiweb -> Navigation -> MenuManager` 3. Find `Add New Menu` button in the right top corner, click it. -4. Enter the required fields (Menu title, identifier, status). -5. Find the `Save and Continue Edit` in the navigation on the top right corner, click it. -5. Find the `Assigned Menu Items` in the navigation on the left. click it. -6. Click `Add item` in the top right corner. -7. Enter the required fields (Menu item title, URL type, URL). -8. Choose URL parent item, opening type and status, click `Save`. +4. Fill out form fields: + 1. Required: + * _Title_ + * _Menu identifier (used in graphql requests)_ + * _Menu status (enabled / disabled)_ + 2. Optional: + * _Custom Menu CSS Class_ + * _Store (to which store-view this menu is assigned to)_ +5. Click `Save`. + +![image](https://user-images.githubusercontent.com/82165392/128774925-e1c39338-84ed-4add-9140-13fe647b6692.png) +
+ +### 3.2. Adding menu items +1. Open menu. +2. Find the `Assigned Menu Items` in the navigation on the left. click it. +3. Click `Add item` in the top right corner. +4. Fill out form fields: + 1. Required: + * Menu Item Title + * URL Type _(Custom URL / Category / CMS page)_ + * URL Type specific field: Custom URL | Category | CMS Page + * Parent _(Parent menu item)_ + * Menu Item Status _(enabled / disabled)_ + 2. Optional: + * Menu Item CSS Class + * URL Attributes + * Icon + * Icon Alt Text + * Menu Item Sort Order _(Item with lowest number will be on top)_ +5. Click `Save`. + +![image](https://user-images.githubusercontent.com/82165392/128774951-2a3be10e-9930-4b8e-8e11-c9e02e0b40b3.png) +
+ +### 3.3. Structure for ScandiPWA +By default ScandiPWA will only render yellow elements _(check image)_ and ignore the red ones. + +![image](https://user-images.githubusercontent.com/82165392/128774980-d1e07103-fc64-4398-a2d3-1912bb6e11e9.png) + +----- +
+ +## 4. For development +
+ +### 4.1. DB structure + +![image](https://user-images.githubusercontent.com/82165392/128775005-35875db3-9b87-4077-a4fc-3855c15ca5b5.png) +
+ +### 4.2. GraphQl structure + +```js +type Query { + scandiwebMenu(identifier: String!): Menu @resolver(class: "ScandiPWA\\MenuOrganizer\\Model\\Resolver\\Menu") +} + +type Menu { + menu_id: ID + title: String + is_active: Boolean + css_class: String + items: [Item] +} -Congratulations! You have successfully created your first ScandiPWA menu! 🎉 +type Item { + item_id: ID + icon: String + title: String + item_class: String @doc(description: "CSS class of the item") + parent_id: Int + url: String + url_type: Int @doc(description: "0 - regular link, 1 - cms page, 2 - category") + position: Int + is_active: Boolean + cms_page_identifier: String + is_promo: Int @doc(description: "Boolean if category is promotional category") + promo_image: String @doc(description: "Promo category image background") + category_id: Int @doc(description: "Category id") +} -### Via GraphQL endpoint +``` +Or check: [schema.graphqls](./src/etc/schema.graphqls) +
-Please refer to [schema.graphqls](./src/etc/schema.graphqls) to see all available fields to query. +### 4.3. Quick file access: +* Form for creating menu: [General.php](./src/Block/Adminhtml/Menu/Edit/Tab/General.php) +* Form for creating item: [Form.php](./src/Block/Adminhtml/Item/Edit/Form.php) +* Menu model: [Item.php](./src/Model/Menu.php) | [ResourceModel/Item.php](./src/Model/ResourceModel/Menu.php) +* Item model: [Menu.php](./src/Model/Item.php) | [ResourceModel/Item.php](./src/Model/ResourceModel/Item.php) +* Menu resolver: [Menu.php](./src/Model/Resolver/Menu.php) +* DB schema: [db_schema.xml](./src/Model/Resolver/Menu.php)