大型弹出窗口无法在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

您确定包含jQuery吗？ 如果是这样，它是在magnificPopup之前导入的吗？

Answer 3

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

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

<script>
window.onload = function() {

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