Cách thêm menu trong bảng quản trị Magento 2

Question

thẻ

Nội dung chính Show

Bước 1. Tạo cấu trúc mô-đun Magento 2
Bước 2. Tuyên bố mô-đun
Bước 3. Đăng ký mô-đun
Bước 4. Tạo Main Menu trong Admin Panel
Bước 5. Tạo Sub Menu trong Admin Panel
Tạo đường dẫn tệp. xml
Bước 5. Tạo trang để đính kèm liên kết trong menu. Tạo chỉ mục tệp. Php
Bước 6. Xác định giao diện của trang
Bước 7. Cài đặt mô-đun
Tạo lưới quản trị. -
Bước 8. Tạo Lưới quản trị bằng Thành phần
Làm cách nào để thêm menu điều hướng trong Magento 2?
Làm cách nào để thêm liên kết menu trên cùng trong Magento 2?
Làm cách nào để thay đổi menu trong Magento 2?
Làm cách nào để tạo lưới quản trị trong Magento 2?

phát triển

Trình đơn etc/adminhtml/. tệp xml được sử dụng để kiểm soát menu của bảng quản trị Magento 2 và đặc biệt là thêm các mục mới vào đó

Tạo tệp này trong thư mục mô-đun của bạn để thêm thành phần menu mới

etc/adminhtml/menu.xml

và thêm đoạn mã sau vào đó

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="VendorName_ModuleName::key1" title="Title 1" module="VendorName_ModuleName" parent="OtherVendorName_OtherModuleName::content" sortOrder="10" resource="VendorName_ModuleName::key1"/>
        <add id="VendorName_ModuleName::key2" title="Title 2" module="VendorName_ModuleName" parent="VendorName_ModuleName::key1" sortOrder="10" action="path/controllerName" resource="VendorName_ModuleName::key2"/>
    </menu>
</config>

id - một mã định danh thành phần menu duy nhất;
tiêu đề - văn bản của phần tử;
mô-đun - xác định phần tử thuộc về mô-đun nào;
cha mẹ - định danh của mục menu mẹ;
sortOrder - vị trí giữa các yếu tố khác;
hành động - chỉ định đường dẫn mà phần tử sẽ được tham chiếu đến;
tài nguyên - mã định danh acl (Danh sách kiểm soát truy cập), được sử dụng để phân định quyền truy cập (ai có thể xem mục menu này). Thông tin thêm về phân định quyền có trong bài viết này.

Sau khi lưu các thay đổi vào menu. xml, xóa bộ đệm bằng cách chạy lệnh CLI này

php bin/magento cache:clean

Kiểm tra kết quả.

Trong các ví dụ, chúng tôi tạo một mô-đun cho Câu hỏi thường gặp. Có thể xem mã mô-đun đã sửa đổi trên GitHub

Tôi đã giải thích cách tạo mô-đun giao diện người dùng trong loạt bài trước. Bạn có thể xem qua 4 phần sau

Mô-đun tùy chỉnh giao diện người dùng. -

PHẦN 1 – Cách xây dựng một mô-đun hoàn chỉnh
PHẦN 2 – Tạo URL mô-đun tùy chỉnh và hiển thị nội dung
PHẦN 3 – Tạo URL mô-đun tùy chỉnh và hiển thị nội dung
PHẦN 4 – Hiển thị dữ liệu từ Database trên Frontend trong Magento2

Hãy bắt đầu mô-đun tùy chỉnh của bảng quản trị. Tôi đã chia các bước thành như sau để chúng ta có thể hiểu dễ dàng

Bước 1. Tạo cấu trúc mô-đun Magento 2

Có hai vị trí có thể đặt một mô-đun trong ứng dụng Magento 2

Vị trí đầu tiên là thư mục ứng dụng/mã. Thư mục này được sử dụng để thêm tất cả các mô-đun Magento 2 tùy chỉnh và bên thứ 3. Vị trí này thường được sử dụng bởi các cơ quan phát triển, nhà phát triển nội bộ hoặc nội bộ để đơn giản hóa quy trình phát triển

Vị trí thứ hai là thư mục nhà cung cấp. Tất cả các mô-đun cốt lõi của Magento 2 đều nằm trong nhà cung cấp/magento. Thí dụ -

Hoàn thành mô-đun tùy chỉnh trong Magento2

Trên đây là cấu trúc thư mục mô-đun tiêu chuẩn. Đây là cấu trúc thư mục của mô-đun danh mục Magento

1. Tạo các thư mục sau trong thư mục gốc của dự án Magento (ví dụ:. - C. \xampp\htdocs\magento2)

ứng dụng/mã/Thecoachsmb
ứng dụng/mã/Thecoachsmb/Mymodule

Thư mục Thecoachsmb là Tên nhà cung cấp của mô-đun và Mymodule là Tên mô-đun

Ghi chú. Nếu bạn không có thư mục mã trong thư mục ứng dụng của mình, hãy tạo thư mục đó theo cách thủ công

Bây giờ, hãy tạo

  app/code/Thecoachsmb/Mymodule/etc/module.xml

5

Nội dung sẽ là

{}

Tệp này sẽ được Trình soạn thảo tải mỗi khi bạn chạy nó mặc dù chúng tôi không thực sự sử dụng Trình soạn thảo với mô-đun của mình

Bước 2. Tuyên bố mô-đun

Cần phải tạo thư mục etc và thêm tệp

  app/code/Thecoachsmb/Mymodule/etc/module.xml

6 vào đó

  app/code/Thecoachsmb/Mymodule/etc/module.xml

Nội dung sẽ là

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

Bước 3. Đăng ký mô-đun

Để đăng ký mô-đun, hãy tạo đăng ký. php trong

  app/code/Thecoachsmb/Mymodule/etc/module.xml

7

Nội dung sẽ là

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
	\Magento\Framework\Component\ComponentRegistrar::MODULE,
	'Thecoachsmb_Mymodule',
	__DIR__
);

Các menu được cấu hình bởi menu tệp. xml nằm trong thư mục etc/adminhtml của mô-đun. Nó bao gồm các nút config và menu và thêm chỉ thị. Nút menu có thể bao gồm nhiều lệnh thêm

Tệp này hiển thị các menu trong bảng quản trị. Hãy thêm Menu “TheCoachSMB” trong bảng Quản trị

Đường dẫn. ______3_______8

– Dưới đây là mẫu menu chính, đặt tên là. “TheCoachSMB”

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
    <menu>
        <add id="Thecoachsmb_Mymodule::menu" title="TheCoachSMB" translate="title" module="Thecoachsmb_Mymodule" sortOrder="10" resource="Thecoachsmb_Mymodule::menu"/>
    </menu>
</config>

Thuộc tính

- ID. Chỉ định mã định danh của menu. Nó phải là duy nhất và tuân theo định dạng. [Không gian tên_ModuleName]. [menu_name]
- Chức vụ. văn bản được hiển thị trong menu
- mô-đun. Tên của mô-đun, được định dạng là. [Không gian tên_ModuleName]
- Thứ tự sắp xếp. Đặt mức độ ưu tiên của mô-đun trong menu, giá trị nhỏ hơn sẽ nhận được vị trí hiển thị cao hơn. Mô-đun nhận giá trị “0” có thể được thêm vào bằng một biểu tượng
- Nguồn. xác định quy tắc ACL mà người dùng quản trị phải có để xem và truy cập menu này, nó được xác định trong acl. xml. Nếu không, mục menu sẽ không được hiển thị. Để đơn giản, Magento_Backend. nội dung được sử dụng

Bạn có thể thấy chúng phía trên tiêu đề menu cấp 0. Biểu tượng này được tạo bởi phông chữ 'Biểu tượng quản trị viên' trong Magento. Bạn có thể xem toàn bộ biểu tượng và cách tạo biểu tượng trong liên kết này

Bây giờ hãy chạy các lệnh dưới đây trong tệp gốc của Magento

php bin/magento module:enable Thecoachsmb_Mymodule && php bin/magento setup:upgrade && php bin/magento setup:static-content:deploy -f && php bin/magento cache:flush

Hóa ra một menu chính TheCoachSMB Menu ở điều hướng bên trái – Menu quản trị

Đã tạo thành công menu quản trị mới

– Tạo menu phụ mới trong menu chính trong ứng dụng / mã . xml. Đặt MyModule làm tên của nó. /Thecoachsmb/Mymodule/etc/adminhtml/menu.xml. Set MyModule as its name.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
   <menu>
       <add id="Thecoachsmb_Mymodule::menu"
           title="TheCoachSMB" translate="title" module="Thecoachsmb_Mymodule"
           sortOrder="10"
           resource="Thecoachsmb_Mymodule::menu"
           />
       <!-- START: new node -->  
       <add id="Thecoachsmb_Mymodule::submenu_mymodule"
           title="MyModule" translate="title" module="Thecoachsmb_Mymodule"
           sortOrder="20" parent="Thecoachsmb_Mymodule::menu"
           action="mymodule/create/index"
           resource="Thecoachsmb_Mymodule::submenu_mymodule"
           />
       <!-- END:   new node -->
   </menu>
</config>

Thuộc tính trong menu phụ

Cha mẹ. Giá trị là ID của menu chính. Nó chỉ định menu phụ thuộc về menu cha
Hoạt động. URL trực tiếp nếu nhấp vào menu, ở định dạng [router_name]/[controller_name]/[action_name]. – Trong ví dụ của chúng tôi, menu liên kết với mô-đun mymodule, bộ điều khiển Tạo và Chỉ mục hành động

Chạy bộ đệm lệnh Magento CLI. sạch sẽ, bạn đã tạo thành công nội dung menu MyModule bên trong TheCoachSMB Menu

Hy vọng bạn cũng có thực đơn của bạn. Bạn có thể thêm bao nhiêu menu tùy thích

Tạo đường dẫn tệp. xml

Đường dẫn. ứng dụng/mã/Thecoachsmb/Mymodule/etc/adminhtml/tuyến. xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
    <route id="mymodule" frontName="mymodule">
        <module name="Thecoachsmb_Mymodule"/>
    </route>
</router>
</config>

Đường dẫn. ứng dụng/mã/Thecoachsmb/Mymodule/Trình điều khiển/Adminhtml/Tạo/Chỉ mục. php

<?php 
namespace Thecoachsmb\Mymodule\Controller\Adminhtml\Create; 
class Index extends \Magento\Backend\App\Action {
protected $resultPageFactory = false;
	public function __construct(
		\Magento\Backend\App\Action\Context $context,
		\Magento\Framework\View\Result\PageFactory $resultPageFactory
	)
	{
		parent::__construct($context);
		$this->resultPageFactory = $resultPageFactory;
	}
	public function execute()
	{
		$resultPage = $this->resultPageFactory->create();
		$resultPage->getConfig()->getTitle()->prepend((__('Posts')));

		return $resultPage;
	}
}

Bước 6. Xác định giao diện của trang

Xác định bố cục và cấu trúc trang. Tạo tập tin mymodule_create_index. xml

Đường dẫn. ứng dụng/mã/Thecoachsmb/Mymodule/view/adminhtml/layout/mymodule_create_index. xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <body>
       <referenceContainer name="content">
               <block class="Magento\Backend\Block\Template" template="Thecoachsmb_Mymodule::view.phtml"/>
       </referenceContainer>
   </body>
</page>

Thiết lập nội dung trang. Tạo tệp helloworld. phtm

Đường dẫn. ứng dụng/mã/Thecoachsmb/Mymodule/view/adminhtml/templates/view. phtml

  app/code/Thecoachsmb/Mymodule/etc/module.xml

0

Bước 7. Cài đặt mô-đun

Chạy lệnh trong tệp gốc của Magento

  app/code/Thecoachsmb/Mymodule/etc/module.xml

1

Tạo lưới quản trị. -

Thực hiện theo các bước

Bước 8. Tạo Lưới quản trị bằng Thành phần

Bước 8. 1. Khai báo tài nguyên

Khai báo tài nguyên trong tệp tiêm phụ thuộc Bây giờ, chúng ta sẽ tạo tệp

  app/code/Thecoachsmb/Mymodule/etc/module.xml

9 sẽ kết nối với Mô hình để lấy dữ liệu cho lưới của chúng ta

Tập tin.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

0

Với nội dung sau

  app/code/Thecoachsmb/Mymodule/etc/module.xml

2

File này sẽ khai báo post collection class, table và resourceModel cho table. Nguồn này sẽ được gọi trong tệp bố cục để lấy dữ liệu cho lưới. bạn sẽ nhận được Tệp mô hình tại đây

Bước 8. 2. Tạo tệp bố cục

Đối với tác vụ

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

1, chúng tôi sẽ tạo tên tệp bố cục là

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

2

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

3

Tập tin.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

4/

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

5/view/adminhtml/layout/mymodule_create_index. xml

Với nội dung sau

  app/code/Thecoachsmb/Mymodule/etc/module.xml

3

Trong tệp bố cục này, chúng tôi khai báo một uiComponent cho nội dung của trang này

Bước8. 3. Tạo tệp bố cục thành phần

Khi khai báo trong layout file ta sẽ tạo file thành phần

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

6

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Thecoachsmb_Mymodule" setup_version="1.0.0"> 
 </module> 
</config>

7

Tập tin. ứng dụng/mã/Thecoachsmb/Mymodule/view/adminhtml/ui_component/thecoachsmb_mymodule_create_listing. xml

Với nội dung sau

  app/code/Thecoachsmb/Mymodule/etc/module.xml

4

Với đoạn code này, bạn sẽ biết cách khai báo Grid layout (nút, cột), gọi nguồn dữ liệu. Vui lòng làm mới bộ đệm và truy cập vào trang lưới này, lưới quản trị sẽ hiển thị như thế này

Làm cách nào để thiết lập menu điều hướng trên cùng trong Magento 2 bằng Bảng điều khiển quản trị? .

Tại thanh bên Quản trị, nhấp vào Sản phẩm > Danh mục

Tại trang Danh mục, chọn Danh mục mặc định để xem lựa chọn màu cam nhạt. .

Đặt vị trí của Danh mục mới bằng cách kéo đến vị trí mong muốn và thả

Bước 1. Thêm/sửa đổi mặc định. tập tin xml. Tìm đường dẫn app/code/Mageplaza/HelloWorld/view/frontend/layout , sau đó thêm/ sửa đổi mặc định. tệp xml bằng. .

Bước 2. Thêm liên kết. tập tin php. Tiếp tục với đường dẫn app/code/Mageplaza/HelloWorld/Block và bạn sẽ thêm liên kết. tập tin php. .

Bước 3. Xoá bộ đệm và kiểm tra kết quả Liên kết hàng đầu của bạn

Đi tới Sản phẩm > Danh mục. Chọn danh mục bất kỳ mà bạn muốn áp dụng Mega Menu cho. 2. Mở rộng tab Megamenu .