Các widget cho phép quản trị viên cửa hàng Magento 2 thêm nội dung tĩnh hoặc động vào các trang và khối CMS, cung cấp nhiều chức năng và triển khai đơn giản. Widget là các thành phần có thể tái sử dụng có thể được thêm vào bất kỳ khối CMS nào của Magento 2.
Do đó, widget cho phép các developer Magento 2 và quản trị viên cửa hàng thêm các giao diện và tính năng tương tác vào giao diện người dùng mà không cần phải biết nhiều về lập trình. Tất nhiên, họ vẫn cần biết cách sử dụng Magento để tạo một widget. Trong bài viết này tôi sẽ giải thích cơ bản về widget là gì? Và cách sử dụng widget. Sau đó sẽ hướng dẫn các bạn thêm một custom widget trong Magento 2.
Widget là gì?
Magento 2 là phiên bản mới nhất của Magento, một trong những nền tảng Thương mại điện tử hàng đầu hiện nay. Các widget đóng một vai trò quan trọng trong Magento 2, đặc biệt là các chức năng của nó. Ngoài việc cung cấp thêm chức năng phía người dùng, các widget Magento giúp quản trị viên thêm nội dung tĩnh hoặc động vào các trang và khối CMS. Vậy widget là gì?
Widget trong Magento 2 về cơ bản là một tiện ích mở rộng được thiết kế với một tập hợp các tùy chọn cấu hình nâng cao. Do tính linh hoạt và khả năng kiểm soát cao, chúng được sử dụng để cung cấp thông tin và marketing content thông qua Administrator panel Magento. Một trong những lợi thế của các widget Magento 2 là bạn có thể “gọi” chúng từ bất kỳ đâu trên trang web.
Các widget cũng cho phép quản trị viên thêm các giao diện và tính năng tương tác trong giao diện người dùng của Magento mà không cần phải viết code.
Magento 2 cung cấp nhiều loại widget
Trước khi chúng ta chuyển sang cách tạo một widget, hãy xem xét kỹ hơn phạm vi tiêu chuẩn của các widget được hỗ trợ trong Magento 2:
- Recently Compared Products: Bạn hẳn đã bắt gặp tiện ích này khi duyệt các sản phẩm trên các trang thương mại điện tử yêu thích của mình. Tiện ích này được sử dụng để hiển thị các sản phẩm đã xem hoặc so sánh gần đây trong sidebar của trang danh mục.
- Orders and Returns: Bất cứ khi nào bạn mua sắm một sản phẩm trực tuyến, phải có một tiện ích giúp truy cập nhanh các đơn đặt hàng và trả hàng. Nếu người dùng muốn xem lại các sản phẩm đã đặt hàng hoặc đã trả lại, họ có thể điền vào các chi tiết cần thiết như Order ID, Billing the Last Date, Find Order by, Email v.v.
- Catalog Products List: Đây là một widget được sử dụng rộng rãi khác; mọi người đều quen thuộc với phần “sản phẩm nổi bật” trên các trang Thương mại điện tử, vì hầu hết mọi trang đều có phần này. Các sản phẩm nổi bật thường được đặt trên trang chủ với mục đích quảng bá sản phẩm. Sản phẩm cụ thể được hiển thị với các chi tiết ngắn gọn như giá cả, tính năng và các tùy chọn như thêm vào giỏ hàng, thêm vào danh sách yêu thích và thêm vào tính năng so sánh.
- Catalog Product Link: Mục đích chính của tiện ích Catalog Product Link là nó cho phép quản trị viên quản lý các liên kết cho các sản phẩm, bao gồm related products, cross sells, upsells, and grouped products. Khi bạn truy cập trang Catalog Product Link, bạn sẽ thấy các danh mục khác nhau được bắt đầu bằng phần giới thiệu.
- Catalog Category Link: Trong các trang web Thương mại điện tử, đặc biệt là các trang web dựa trên sản phẩm, bạn sẽ thấy không thiếu các tiện ích catalog category link.
- Custom Block Widget: Có thể kết hợp các khối, widgets và trang tùy chỉnh để hiển thị các phần của danh mục hoặc thông tin khác mà khách hàng có thể thấy hữu ích.
Widget có thể được sử dụng để cải thiện trải nghiệm người dùng và thêm chức năng cho cửa hàng.
Các khối và widget là những yếu tố quan trọng của hầu hết các trang web Thương mại điện tử. Chúng cho phép người dùng nhanh chóng tạo và kiểm soát nội dung, đồng thời có thể được sử dụng để làm những việc như:
- Thêm khối động hoặc thông tin trên sidebar.
- Thêm banners trên các trang CMS.
- Thêm custom menu.
- Thêm giao diện người dùng.
Bất kỳ trang web nào cũng cần nhiều chức năng để chạy trơn tru và thu hút nhiều khách truy cập hơn, và tạo ra trải nghiệm người dùng hấp dẫn là điều bắt buộc trong Thương mại điện tử. Đó là lúc các custom widget trong Magento 2 phát huy tác dụng của nó.
Cách tạo custom widget trong Magento 2
Bây giờ, chúng ta sẽ tìm hiểu cách tạo custom widget cho Magento 2. Các custom widget cung cấp cách tốt nhất để thêm và chỉnh sửa nội dung bên trong các khối hoặc trang CMS, vì chúng có thể được điều chỉnh để phù hợp với yêu cầu của bạn.
Đầu tiên để tạo một custom widget chúng ta cần phải tạo một module. Tôi sẽ tạo một module mới với tên là ViMagento_Widget.
ViMagento/Widget/etc/module.xml
|
1 2 3 4 5 6 7 8 |
<?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="ViMagento_Widget" setup_version="1.0.0"> <sequence> <module name="Magento_Catalog"/> </sequence> </module> </config> |
ViMagento/Widget/registration.php
|
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'ViMagento_Widget', __DIR__ ); |
Tiếp theo các bạn chạy câu lệnh php bin/magento setup:upgrade để cài đặt module.
Để tạo custom widget bạn cần tạo file widget.xml bên trong thư mục etc trong module của bạn.
ViMagento/Widget/etc/widget.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?xml version="1.0" ?> <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd"> <widget class="ViMagento\Widget\Block\Sample" id="vimagento_widget_sample"> <label>Button</label> <description>Thêm button</description> <parameters> <parameter name="title" sort_order="10" visible="true" xsi:type="text" required="true"> <label>Tiêu đề</label> </parameter> <parameter name="color" sort_order="20" visible="true" xsi:type="text" required="true"> <label>Màu sắc</label> </parameter> <parameter name="width" sort_order="30" visible="true" xsi:type="text" required="true"> <label>Chiều rộng</label> </parameter> <parameter name="height" sort_order="40" visible="true" xsi:type="text" required="true"> <label>Chiều dài</label> </parameter> </parameters> </widget> </widgets> |
|
1 |
ViMagento/Widget/Block/Sample.php |
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php namespace ViMagento\Widget\Block; use Magento\Framework\View\Element\Template; use Magento\Widget\Block\BlockInterface; class Sample extends Template implements BlockInterface { protected $_template = "widget/sample.phtml"; } |
|
1 |
ViMagento/Widget/view/frontend/templates/widget/sample.phtml |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button id="sample"> <?= $block->getData('title') ?> </button> <style> #sample { border-radius: 5px; width: <?= $block->getData('width') ?>; height: <?= $block->getData('height') ?>; color: <?= $block->getData('color') ?>; } </style> |
Ở đây mình chỉ làm một ví dụ cơ bản là thêm một button thôi nhé. Trong thực tế các bạn có thể làm được những tính năng hay ho nhờ widget.
Sau đó các bạn hãy xóa cache bằng câu lệnh php bin/magento cache:clean để áp dụng những thay đổi mà bạn vừa thực hiện.
Cách sử dụng widget trong Magento 2
Bạn có thể thêm widget vừa tạo vào bất cứ trang nào bạn thích. Đầu tiên bạn vào CONTENT > WIDGET
Sau đó các bạn sẽ được điều hướng đến trang quản lý widget, các bạn nhấn vào button Add Widget.
Sau đó ở tab Settings các bạn chọn Type là widget bạn muốn chọn, ở đây tôi sẽ chọn widget Button tôi vừa tạo ở trên.
Các bạn chọn theme sẽ áp dụng widget ở mục Design Theme.
Ở tab Storefront Properties các bạn điền đầy đủ thông tin như bên dưới:
Ở mục Layout Updates các bạn có thể chọn được trang và vị trí cụ thể sẽ hiển thị widget của bạn.
Tiếp theo ở tab Widget Options các bạn thêm các thông số chúng ta đã thêm vào wiget ở trên:
Cuối cùng các bạn ra ngoài frontend sẽ thấy được button mình đã thêm. Ở trên mình chỉ định widget được hiển thị ở toàn bộ trang và sẽ xuất hiện ở vị trí After Page Header.
Kết luận
Vừa rồi mình vừa hướng dẫn các bạn cơ bản về widget cũng như cách tạo một custom widget trong Magento 2. Hy vọng bài viết có thể hữu ích với mọi người. Thanks.
Admin làm thêm widget về navigation menu được không ?