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

Question

我正在使用 shopify 自定义 magnific 弹出窗口 site.In 我的 header.liquid 文件正在调用 magnific弹出内容。

<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

你确定jQuery包含在内吗？如果是，是否在 magnificPopup 之前导入？

Answer 2

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

我的新主题 brooklyn 有一个很棒的弹出库 already.So 现在工作正常。

因此请检查 theme.js.liquid 文件是否存在 magnific 弹出库。

Answer 3

即使我的 theme.js.

中包含 magnificPopup 代码，我也遇到了类似的问题

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

<script>
window.onload = function() {

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

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

magnific popup not working In shopify

javascript

jquery

shopify

magnific-popup

shopify-app