解决 PrestaShop 1.7.7.2 产品变体主图不随选择变化的问题

问题描述

在使用 prestashop 1.7.7.2 版本时，部分用户可能会遇到一个令人困扰的现象：在产品详情页，当顾客选择不同的产品变体（如颜色、尺寸）时，页面下方的缩略图会正确地切换以显示对应变体的图片，但页面上方的主要产品大图却保持不变，未能同步更新。尽管每个产品变体都已关联了对应的图片，且网站可能使用了自定义主题，但此问题依然存在，且通常不伴随明显的 javascript 错误。

问题根源分析

此问题并非由 JavaScript 错误引起，而是 PrestaShop 内部数据处理逻辑在特定版本（尤其是从旧的 1.7.x 版本升级到 1.7.7.x 后）发生“教义”（doctrine）变更所致。具体来说，在处理产品主图的显示逻辑时，PrestaShop 的模板文件可能仍在引用旧的变量 $product.cover 来获取当前显示的产品封面图片。然而，在新版本中，为了更精确地同步产品变体，系统可能更倾向于使用 $product.default_image 来表示当前选定变体的默认或主图片。当模板文件未能及时更新以适应这一变量变更时，就会出现主图不随变体切换的问题。

罪魁祸首通常是位于主题目录下的 product-cover-thumbnails.tpl 文件。

解决方案

解决此问题的核心在于修改负责产品图片显示的 Smarty 模板文件，将其中引用 $product.cover 的地方替换为 $product.default_image。

1. 定位问题文件

首先，您需要找到受影响的模板文件。它通常位于您的主题目录下的以下路径： themes/<您的主题名称>/templates/catalog/_partials/product-cover-thumbnails.tpl

2. 修改模板代码

打开 product-cover-thumbnails.tpl 文件，并根据以下指导进行修改。这些修改旨在确保主图和缩略图的选中状态都与 $product.default_image 变量同步。

修改点一：主图条件判断

将用于判断是否存在主图的条件语句中的 $product.cover 替换为 $product.default_image。

原代码 (约第 28 行):

{if $product.cover}

修改为:

{if $product.default_image}

修改点二：主图图片源及属性

Poe

Quora旗下的对话机器人聚合工具

607

查看详情

将主图 <img> 标签中用于设置 src、alt 和 title 属性的 $product.cover 替换为 $product.default_image。

原代码 (约第 29 行):

<img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">

修改为:

<img class="js-qv-product-cover" src="{$product.default_image.bySize.large_default.url}" alt="{$product.default_image.legend}" title="{$product.default_image.legend}" style="width:100%;" itemprop="image">

修改点三：缩略图选中状态

在缩略图列表中，用于判断哪个缩略图应该被标记为“选中”状态的条件语句中，将 $product.cover.id_image 替换为 $product.default_image.id_image。

原代码 (约第 45 行):

<img
              class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_default.url}"
              data-image-large-src="{$image.bySize.large_default.url}"
              src="{$image.bySize.home_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="100"
              itemprop="image"
            >

修改为:

<img
              class="thumb js-thumb {if $image.id_image == $product.default_image.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_default.url}"
              data-image-large-src="{$image.bySize.large_default.url}"
              src="{$image.bySize.home_default.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="100"
              itemprop="image"
            >

注意事项

• 文件备份： 在进行任何文件修改之前，务必备份原始的 product-cover-thumbnails.tpl 文件。这可以在出现问题时轻松恢复。
• 缓存清理： 完成代码修改后，您需要清除 PrestaShop 的所有缓存（在后台管理面板的“高级参数”->“性能”中操作）以及您的浏览器缓存，以确保新的模板文件能够被正确加载和渲染。
• 主题兼容性： 此解决方案主要针对 PrestaShop 1.7.7.x 版本中由于变量引用不当导致的问题。如果您使用的是高度定制的主题，或者 PrestaShop 版本差异较大，可能需要根据具体情况进行调整。
• 版本适用性： 本教程的解决方案主要针对 PrestaShop 1.7.7.2 及可能存在相同问题的 1.7.7.x 系列版本。
• 替代方案： 如果您不希望手动修改代码，并且您的主题没有对 product-cover-thumbnails.tpl 进行其他自定义，您可以尝试从一个干净的 PrestaShop 1.7.7.2 安装包中获取该文件的最新版本，并替换掉您主题中的旧文件。

总结

通过将 product-cover-thumbnails.tpl 文件中的 $product.cover 变量替换为 $product.default_image，我们可以有效地解决 PrestaShop 1.7.7.2 版本中产品变体主图不随选择而更新的问题。这个修改确保了产品详情页面的视觉一致性，提升了用户在浏览不同产品变体时的体验。对于使用自定义主题或从旧版本升级的 PrestaShop 商店来说，理解并适应这类内部逻辑变更至关重要，以确保网站功能的完整性和稳定性。

以上就是解决 PrestaShop 1.7.7.2 产品变体主图不随选择变化的问题的详细内容，更多请关注php中文网其它相关文章！