Thư viện jQuery là tính năng cốt lõi liên quan đến các chức năng cơ bản để làm việc với các phần tử. Chắc các bạn cũng chẳng xa lạ gì với thư viện này. Nó hỗ trợ kiểm soát nội dung trang, xử lý, sửa đổi và quản lý các sự kiện thông qua JavaScript. Bạn có thể nghĩ đến việc sử dụng thư viện jquery bên ngoài Magento 2 để tận dụng lợi thế của jQuery. Tuy nhiên, bạn có thể không biết rằng bạn cũng có thể sử dụng thư viện Jquery trong Magento 2 theo mặc định và bài viết này sẽ hướng dẫn bạn.
Jquery là gì?
Jquery được xem là một trong những thư viện JavaScript mã nguồn mở phổ biến nhất hiện nay. Nó cung cấp một cách nhanh chóng để triển khai lựa chọn truy vấn, duyệt qua HTML, xử lý sự kiện, animations, hiệu ứng và AJAX. Nó là một thư viện mã nguồn mở, với tài liệu API khá chắc chắn và bảo trì thường xuyên.
Lợi ích của Jquery trong Magento 2.
Bạn đang muốn mang lại giao diện hiện đại và thông minh cho trang web Magento 2 của mình. Giải pháp hợp lý nhất để thêm các yếu tố động(dynamic) vào trang web Magento 2 là Javascript. Magento 2 sử dụng thư viện jQuery và jQuery UI để tạo ra các phần tử động khác nhau như drop-down lists, checkboxes, accordions, buttons, date pickers, pop-ups…Bởi mặc định, Magento 2 thêm thư viện JavaScript bắt buộc, tức là Magento 2 cũng kết hợp jQuery. Sử dụng thư viện jQuery tích hợp trong Magento 2 giải quyết được nhiều vấn đề và đồng thời cung cấp các ưu điểm của jquery như:
- Tối ưu hóa SEO
- Thân thiện với người dùng
- Khả năng tương thích trên nhiều trình duyệt
- Thực hiện tương đối dễ dàng
- Đơn giản hóa AJAX
- Giao diện người dùng tương tác
- Mã nguồn mở
- Nhẹ
Cách sử dụng thư viện jQuery trong Magento 2
Magento 2 cung cấp rất nhiều chức năng mặc định được tích hợp sẵn. Mặc dù vậy, thường cần phải thêm thư viện JQuery vào trong khi tạo theme Magento 2 vì nó tạo điều kiện cho giao diện người dùng động và tương tác.
Để thêm thư viện jQ trong Magento 2, bạn cần phải khai báo bên trong Require Js:
|
1 2 3 4 5 6 7 8 9 10 11 |
require(['jquery', 'jquery/ui'], function($){ //your js code here }); //For Example : require(['jquery', 'jquery/ui'], function($){ $(document).ready( function() { alert("jquery demo."); }); }); |
JQuery UI trong Magento 2.3.3
Thư viện JQuery UI đã được cấu trúc lại trong Magento 2.3.3.jQuery UI được chia thành các widget riêng biệt chỉ có thể sử dụng khi được khai báo. Nó được thực hiện để nâng cao hiệu suất của Magento. Điều đó có nghĩa là bạn phải loại bỏ sự phụ thuộc “jquery / UI”. Đây là một ví dụ trên Magento 2.3.3:
|
1 2 3 4 5 6 7 8 9 10 |
<script> define([ 'jquery', ‘jquery-ui-modules/widget’ ], function ($) { ‘use strict’; $.widget(‘...’); }); </script> |
Hoặc bạn cũng có thể sử dụng cách này để hỗ trợ tương thích với các phiên bản cũ:
|
1 2 3 4 5 6 7 8 9 10 |
<script> define([ 'jquery', ‘Magento_Ui/js/modal/modal’ ], function ($) { ‘use strict’; $.widget(‘...’); }); </script> |
Các bạn có thể đọc thêm về bài viết Tạo Popup modal trong Magento 2 để biết thêm về cách sử dụng Jquery UI.
Kết luận
Vừa rồi tôi đã hướng dẫn các bạn cách sử dụng thư viện JQuery và JQuery UI trong Magento 2. Hy vọng bài viết hữu ích đối với các bạn. Thanks.
Bài viết tham khảo: https://www.magesolution.com/blog/add-jquery-magento/