Prestashop 1.7.6添加商品至心愿单时页面变暗无法点击求助

问题描述 #

使用Prestashop 1.7.6搭配第三方主题，启用心愿单功能后，商品页的“添加至心愿单”按钮点击后弹出选择弹窗，但弹窗区域无法点击，仅能滚动背景页面，需刷新才能恢复操作。更换官方及第三方心愿单模块均未解决问题，推测是遮罩层遮挡弹窗交互区域导致。

排查与解决步骤 #

• 调整z-index层级
  打开浏览器开发者工具（F12），定位弹窗和遮罩层元素，检查两者的z-index属性。确保弹窗的z-index值高于遮罩层，比如：

  /* 根据实际页面元素类名调整 */
  .wishlist-modal-container {
      z-index: 9999 !important;
  }
  .modal-backdrop {
      z-index: 9998 !important;
  }
  

  将上述代码添加到主题自定义CSS文件（如themes/你的主题/assets/css/custom.css）中。

• 检查JS事件拦截
  排查主题的自定义JavaScript文件（如theme.js、custom.js），查看是否存在event.preventDefault()或event.stopPropagation()代码，意外阻止了弹窗区域的点击事件。若有，修改或移除相关拦截逻辑。

• 验证主题兼容性
  临时切换到Prestashop默认的Classic主题测试心愿单功能：

  • 若切换后功能正常，说明是第三方主题与心愿单模块的DOM结构不兼容。需对比默认主题与当前主题的心愿单模板文件（位于themes/主题名/modules/blockwishlist目录），修复模板结构差异，确保弹窗容器、类名与模块输出一致。
  • 若切换后仍有问题，需排查Prestashop核心文件或服务器端的JS加载冲突。

• 检查模块模板覆盖
  确认当前主题是否覆盖了心愿单模块的模板文件。若存在覆盖，将默认模块的模板文件（从modules/blockwishlist/views/templates/front复制）替换主题内的对应文件，再根据主题样式调整。

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