Shopify中添加按钮关闭Fancybox v4弹窗失败如何解决？

问题核心原因 #

你查阅的旧帖解决方案均适用于Fancybox v3及更早的jQuery依赖版本，你当前使用的Fancybox v4+已重构为原生JS组件，不再挂载到jQuery的$对象上，因此调用$.fancybox.close()会抛出undefined相关报错。

具体实现方案 #

方式1：最简单的直接关闭按钮（无需额外写JS）

直接在你的弹窗内容容器（id为preferences-for-lb的div底部）插入以下按钮代码即可：

<button type="button" onclick="Fancybox.close();">保存偏好并关闭</button>

方式2：需要先保存数据再关闭的场景

如果点击按钮需要先提交/保存用户填写的偏好数据，再关闭弹窗，可以用以下方案：

1. 先在弹窗底部插入按钮：

<button type="button" id="save-pref-btn">保存偏好并关闭</button>

2. 把以下JS代码添加到主题的theme.liquid文件的</body>标签之前，或者直接放在preferences-for-lb的div底部即可：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const saveBtn = document.getElementById('save-pref-btn');
  if (saveBtn) {
    saveBtn.addEventListener('click', function() {
      // 此处可添加你保存用户偏好数据的逻辑，比如提交表单、存储数据等操作
      // 数据处理完成后调用关闭方法
      Fancybox.close();
    });
  }
});
</script>

内容的提问来源于stack exchange，提问作者Ranj