Prestashop更换主题后移动端分类商品滚动缩小及图片异常求助

问题根因总述 #

两类问题均为新主题的JavaScript逻辑与Prestashop 1.7.7版本核心渲染规则不兼容导致，和CSS样式无直接关联，具体定位及修复方法如下：

问题1：分类页滚动时商品尺寸逐渐缩小 #

• 触发逻辑：主题绑定的滚动懒加载事件存在逻辑漏洞，每触发一次滚动回调，就会给商品图片容器叠加一次小于1的缩放系数，滚动次数越多，商品尺寸被压缩得越小
• 验证方式：移动端打开分类页，开启浏览器开发者工具的元素检查面板，滚动页面时观察商品卡片或商品图片节点的style属性，可看到transform: scale()或width数值持续下降
• 修复步骤：
  1. 进入商店后台，依次打开「设计」-「主题与Logo」-「编辑主题代码」
  2. 找到主题的懒加载逻辑文件，通常路径为 /themes/当前主题名/assets/js/lazyload.js 或 /themes/当前主题名/assets/js/core.js
  3. 移除滚动事件中重复计算商品宽高的逻辑，直接替换为Prestashop原生懒加载方案：给所有商品图片标签添加loading="lazy"属性即可，无需额外JS做尺寸计算

问题2：商品详情页首张图溢出、默认组合封面图错误 #

• 触发逻辑：主题的商品组合切换JS只监听了用户手动切换组合/图片的事件，页面初始化时没有执行一次图片适配逻辑，同时主题读取默认组合封面图的逻辑和Prestashop 1.7.7版本的combinations接口返回结构不匹配，导致初始加载时取到错误的图片地址且没有做尺寸适配。用户手动切换图片后会触发适配回调，因此显示恢复正常
• 修复步骤：
  1. 在主题代码编辑页找到商品详情页逻辑文件，通常路径为 /themes/当前主题名/assets/js/product.js
  2. 找到处理组合切换、图片更新的回调函数（常见命名为updateCombinationImage、refreshProductGallery等），在页面DOM加载完成的回调（如$(document).ready()块）末尾，手动调用一次该函数即可同时解决默认图错误和尺寸溢出问题
  3. 若尺寸溢出仍存在，在主题自定义CSS面板添加如下规则即可：

@media (max-width: 768px) {
  .product-images-container img {
    max-width: 100% !important;
    height: auto !important;
  }
}

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