将Select2与Magento 2集成

时间:2017-01-16 08:58:01

标签: requirejs magento2 select2

我试图将Select2与Magento2集成。到目前为止,我已成功集成插件,但控制台上显示错误。 enter image description here

我做了什么:

  1. 下载select2.min.js并将其放入app/design/frontend/<vendor>/<themename>/web/js/select2.min.js
  2. 将脚本包含在app/design/frontend/<vendor>/<themename>/Magento_Theme/layout/default_head_blocks.xml
  3. 将此添加到脚本标记中的phtml文件中:

    require(['jquery'],function(jquery){ jquery(document).load(function() { jquery("#sorter2").select2(); }); });

  4. 我知道我应该通过requireJS将其包括在内但我似乎无法使其发挥作用。

    谢谢!

2 个答案:

答案 0 :(得分:4)

您不应该在每个页面的标题中添加它,因为它的依赖关系不一定会加载。你需要将它添加到你的主题requirejs-config here;

/app/design/frontend/<vendor>/<theme>/requirejs.config

在文件中放这个;

var config = {

paths: {
'select2': 'js/select2.min',
},

shim: {
'select2': {
  deps: ['jquery'],

           }
      }

};

现在在任何phtml文件中你可以像这样调用它;

<script type="text/javascript">
require(['jquery','select2'],function($){
    // do stuff with select
});
</script>

答案 1 :(得分:0)

类似的作品:

requirejs-config.js

var config = {
    paths: {
        'select2': 'SATA_SparePartsFinder/js/vendor/select2.full'
    }
};

在您的.phtml中:

<script type="text/javascript">
    require(['jquery', 'select2'], function($) {
        $('#model-select').select2({language: {
                noResults: function () {
                    return '<?= __('No results found') ?>';
                }
            }});
    });
</script>