大型彈出窗口無法在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
  });
}