【问题标题】:Integrating Select2 with Magento 2将 Select2 与 Magento 2 集成
【发布时间】:2023-12-24 20:08:02
【问题描述】:

我正在尝试将 Select2 与 Magento2 集成。到目前为止,我已成功集成插件,但控制台上显示错误。

我做了什么:

  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(); }); });

我知道我应该通过 requireJS 包含它,但我似乎无法让它工作。

谢谢!

【问题讨论】:

  • 你的 require.js 配置在哪里?将“select2”添加到配置后,可以将其设置为依赖项:require(['jquery','select2'],function(jquery){

标签: requirejs magento2 select2


【解决方案1】:

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

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

在文件中放这个;

var config = {
    paths: {
        'select2': 'js/select2.min',
    },
};

现在在任何 phtml 文件中你都可以这样称呼它;

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

【讨论】:

  • 我赞成您的回答,但我认为有一个问题。为什么将“Select2”放入 shim 配置部分?这仅适用于非 AMD 模块! Select2 已为 AMD 做好准备,它已经将 jQuery 定义为依赖项。
  • 啊,很公平,我们不得不声明 jquery 依赖于其他 jquery 插件。
  • 酷。稍后会尝试一下,并在它工作时更新你们。谢谢!
  • 成功了!我也没有根据 Legends 评论放置垫片配置部分。感谢所有的帮助。
【解决方案2】:

这样的工作:

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>

【讨论】: