当前位置: 首页>>网站问题>>正文


添加一个jQuery库到Magento 2

webfans 网站问题 , , , 去评论

问题描述

第三方开发人员如何向Magento 2添加jQuery库?

虽然Magento 2在其前端主题中包含了一个jQuery版本,但jQuery对象并非立即在全局命名空间中可用。我相信这是因为Magento 2使用RequireJS来引入jQuery,并且RequireJS在它需要之前不会加载模块文件。

这给jQuery插件带来了一个问题。通常情况下,我会包含一个HTML插件,看起来像这样

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

但是,这对于Magento 2来说是不可能的。因为jquery.cookie.js文件通过使用全局jQuery对象来定义jQuery插件,所以它会在Magento 2中出现jQuery is not defined错误。

前端开发人员应该如何在Magento 2的前端应用程序中包含标准的jquery插件库?

最佳解决方案

创建requirejs-config.js公司名称\ Modulename \ view \ frontend \ requirejs-config.js add

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

你的Js文件在你的模块中公司名\ Modulename \ view \ frontend \ web \ js \ flexslider.js你只需使用下面的语法添加jquery lib

<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>

第二个例子

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

次佳解决方案

最好的做法是使用Magento 2模块或主题来包含这样的插件/库。这是推荐的方式和最佳做法。


方法1>主题:如果javascript /jquery库与主题相关(为了改变系统的外观)。

  • 将自定义组件源文件放置在以下位置之一[theme_dir] /web /js /

  • 将您的requirejs-config.js文件放入[theme_dir]


方法2>模块:如果javascript /jquery库与特定的业务功能相关或处理Magento功能。它应该进入模块内部。

  • 将自定义组件源文件放置在以下位置之一[module_dir] /view /frontend /web /js /

  • 将您的requirejs-config.js文件放入[module_dir] /view /frontend /

Magento 2 strongly recommends not changing the source code of default Magento components and widgets. All customizations must be implemented in custom modules or themes.

第三种解决方案

我引用Magento Docs

要构建对third-party插件的依赖关系,请在以下配置文件中指定一个垫片:

在你的requirejs-config.js中:

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

然后在您的主题或模块中包含第三方插件代码:”web/js/3-rd-party-plugin.js”,如下所示:

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

这个解决方案是有利的,因为你包含你的插件文件没有任何修改。当插件作者更新甚至使用cdn时,只需要替换js文件!

第四种方案

Alan,jQuery UI Widget工厂有一个特例。要使AMD兼容,请检查以下链接。

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

参考资料

本文由朵颐IT整理自网络, 文章地址: https://duoyit.com/article/2004.html,转载请务必附带本地址声明。