Thêm thư viện jQuery vào Magento 2

Làm cách nào nhà phát triển bên thứ ba có thể thêm thư viện jQuery vào Magento 2?

Mặc dù Magento 2 bao gồm một phiên bản jQuery trong các chủ đề frontend của chúng, đối tượng jQuery không có sẵn ngay lập tức trong không gian tên toàn cầu. Tôi tin điều này là do Magento 2 sử dụng RequireJS để tải jQuery và RequireJS sẽ không tải tệp mô-đun cho đến khi cần.

Điều này trình bày một vấn đề cho các plugin jQuery. Thông thường, tôi bao gồm một plugin có HTML trông giống như thế này

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

Tuy nhiên, điều này là không thể với Magento 2. Vì jquery.cookie.jstệp xác định plugin jQuery bằng cách sử dụng đối tượng jQuery toàn cầu, nên nó sẽ bị lỗi trong Magento 2 jQuery is not defineddo lỗi.

Nhà phát triển giao diện người dùng nên bao gồm thư viện plugin jquery tiêu chuẩn trong ứng dụng giao diện người dùng của Magento 2 như thế nào?

Tạo certjs-config.js Companyname \ Modulename \ view \ frontend \ allowjs-config.js thêm

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

Tệp Js của bạn trong mô-đun Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
Bạn chỉ cần thêm lib jquery bằng cú pháp sau

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

ví dụ thứ hai

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Tôi trích dẫn Tài liệu Magento .

Để tạo sự phụ thuộc vào plugin của bên thứ ba, hãy chỉ định shim trong các tệp cấu hình sau:

Trong requestjs-config.js của bạn:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

Sau đó, bao gồm mã plugin của bên thứ ba trong Chủ đề hoặc Mô-đun của bạn: "web / js / 3 -rd-party-plugin.js" như vậy:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

Giải pháp này rất thuận lợi vì bạn đang bao gồm tệp plugin của mình mà không cần bất kỳ loại sửa đổi nào. Đồng thời thay thế tệp js khi tác giả plugin cập nhật hoặc thậm chí sử dụng cdn!

Điều tốt nhất để làm là sử dụng Mô-đun Magento 2 hoặc Chủ đề để bao gồm các plugin / thư viện như vậy. Đó là cách được đề nghị và thực hành tốt nhất .

Phương pháp 1> CHỦ ĐỀ : Nếu thư viện javascript / jquery có liên quan đến chủ đề (Để thay đổi giao diện của hệ thống).

• Đặt tệp nguồn thành phần tùy chỉnh vào một trong các vị trí sau
  [theme_dir] / web / js /
• Đặt tệp certjs-config.js của bạn vào
  [theme_dir]

Phương pháp 2> MODULE : Nếu thư viện javascript / jquery có liên quan đến một chức năng kinh doanh cụ thể hoặc xử lý một tính năng Magento. Nó sẽ đi vào bên trong một mô-đun.

• Đặt tệp nguồn thành phần tùy chỉnh vào một trong các vị trí sau
  [module_dir] / view / frontend / web / js /

• Đặt tệp certjs-config.js của bạn vào
  [module_dir] / view / frontend /

Magento 2 khuyến cáo không nên thay đổi mã nguồn của các thành phần và widget mặc định của Magento. Tất cả các tùy chỉnh phải được thực hiện trong các mô-đun hoặc chủ đề tùy chỉnh.

Alan, nhà máy UI UI jQuery có một trường hợp đặc biệt. Để làm cho AMD tương thích, vui lòng kiểm tra liên kết sau.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/