浏览文章

文章信息

Magento2 模块中引入js文件 | Magento2引入js | Magento2 include js file in module 13207

以模块根目录为准:以引入zoomify为例。

1、js下载后放到

web/zoomify/dist/zoomify.min.js

2、编辑web/requirejs-config.js

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
var config = {
    // paths: {
    //     "jquery.bootstrap.3.3.7.min.js": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"
    // },
    map: {
        '*': {
            'jquery.bootstrap.3.3.7.min.js':       'Aiweline_ProductHowToStyle/bootstrap/3.3.7/js/bootstrap.min',
            'zoomify':       'Aiweline_ProductHowToStyle/zoomify/dist/zoomify.min',
        }
    },
    shim: {
        'jquery.bootstrap.3.3.7.min.js': {
            'deps': ['jquery']
        },
        'zoomify': {
            'deps': ['jquery']
        },
    }
};

3、使用在phtml中,或者自定义一个模块js

<script>
            require(['jquery','zoomify'], function ($) {
                    let how_to_style_click = $('#how-to-style-click')
                    let tab_pane = $('#how-to-style');
                    let showing = false;
                    how_to_style_click.click(function (e) {
                            if (showing) {
                                // $('#how-to-style-tab').tab('hide')
                                $(e.target).attr('style', 'background: #f8f6f6');
                                tab_pane.hide();
                            } else {
                                tab_pane.show();
                                $(e.target).attr('style', "background:#e2e2e2;color:black");
                            }
                            showing = !showing
                        }
                    )
            )
        </script>


原创