javascript - 华丽的弹出窗口在shopify中不起作用

Question

我正在使用 shopify 网站进行自定义放大弹出窗口。在我的header.liquid文件中，我正在调用放大弹出内容。

<button id="open-popup" >Open popup</button>
<div id="my-popup" class="mfp-hide">
  popup  content here.
</div>

在这里，我在theme.js.liquid中添加了脚本

$('#open-popup').magnificPopup({
  items: [
    {
      src: '#my-popup',
      type: 'inline'
    }
  ],
  gallery: {
    enabled: true
  },
  type: 'image'
});

但它显示以下错误

TypeError: $(...).magnificPopup is not a function

如果有人请告诉我我是否想念js库文件之类的东西。

提前致谢。

Answer 1

我发现了这个问题的实际问题。一些主题在 theme.js.liquid 文件中具有默认的放大弹出库。

我的新主题布鲁克林已经有了华丽的弹出库。所以它现在工作正常。

因此，请检查是否存在具有强大弹出库的theme.js.liquid文件。

Answer 2

are you sure that jQuery is included? if so, is it imported before magnificPopup?

Answer 3

即使 magnificPopup 代码包含在我的 theme.js 中，我也遇到了类似的问题。

不要问我为什么 - 在 window.onload 中包装了 magnificPopup 调用后，它开始工作。

<script>
window.onload = function() {

  $('.open-popup').magnificPopup({
    type:'inline',
    midClick: true
  });
}