如何在magento 2中加载外部CDN（seat.io）？

Posted 2021-04-07

我正在尝试在magento 2中实现https://docs.seats.io/docs/tutorial-show-the-floor-plan-on-your-page

我在我的主页上添加了这段代码

<div id="chart"></div>
<script>
        require(['jquery', 'seatsio'], function($){
            $(document).ready(function(){
                new seatsio.SeatingChart({
                    divId: 'chart',
                    publicKey: 'xxxx',
                    event: 'xxxx'
                }).render();
            });
        });
</script>

在requirejs-config.js中，我将其添加到加载cdn：

paths: {
    'seatsio': 'https://cdn.seatsio.net/chart'

和

shim: {seatsio: ['jquery']}

在谷歌chrome devtools中加载了CDN，但我有这个错误：

未捕获的ReferenceError：未定义seatio

你知道我做错了吗？

答案

根据chart.js代码，当通过requireJS加载库时，不设置全局变量seatsio，并且require.amd是一个对象。

RequireJS将每个依赖项的导出值提供给模块函数。您可以接受导出的seatsio作为第二个参数，如下面的代码所示。

<div id="chart"></div>
<script>
        require(['jquery', 'seatsio'], function($, seatsio /* add this param */){
            $(document).ready(function(){
                new seatsio.SeatingChart({
                    divId: 'chart',
                    publicKey: 'xxxx',
                    event: 'xxxx'
                }).render();
            });
        });
</script>