如何通过基于颜色和尺寸属性的关联产品图像更改可配置的产品主图像？

Question

我正在使用具有尺寸和颜色属性的可配置产品。我想根据选择的选项更改可配置产品视图上的主图像，例如如果我选择红色，那么一旦我选择该选项，具有红色属性值的关联产品的图像就会显示在主图像上.

我该怎么做？？

谢谢...

Answer 1

我已经找到了我正在解决的这个问题的一种解决方案......

\app\code\core\Mage\Catalog\Block\Product\View\Type\Configurable.php 中有一个块。

1) 扩展此块或将“Mage\Catalog\Block\Product\View\Type\Configurable.php”添加到“\app\code\local”文件夹。

2) Configurable.php 中有一种方法 getJsonConfig() 用于获取可配置的产品详细信息及其相关产品。我在这个文件中创建了一个新方法，称为 getJsonConfigImages()，在这个方法中我添加了以下代码。

public function getJsonConfigImages()
     {
        $spImages = array();
        foreach ($this->getAllowProducts() as $_sp) {
            $spImages[$_sp->getId()] = 
                (string)$this->helper('catalog/image')
                    ->init($_sp, 'small_image')
                    ->resize(645,520);
        }
        return Mage::helper('core')->jsonEncode($spImages);
     }

此方法将为我提供与可配置产品关联的关联产品的每个主图像 URL。

3）然后我只是在 \app\design\frontend\yourpackage\yourtheme\template\catalog\product\view\type\options\configurable.phtml 像这样调用这个方法......

<script type="text/javascript">
    var spConfig = new Product.Config(<?php echo $this->getJsonConfig() ?>);
    var spConfigimages = new Product.Config(<?php echo $this->getJsonConfigImages() ?>);
</script>

4) 现在我有了与可配置产品相​​关联的简单产品的每个主图像 url，然后只需使用一些 javascript/jquery 函数来更改产品页面上主图像的 src。

我用这个方法解决了这个问题... 如果可以的话，请提出新的想法或比这更好的解决方案...

Answer 2

还有一个扩展可以根据选择的选项Configurable Image Switcher更改可配置的图像。

此扩展在产品页面上为可配置产品添加了功能。当客户在产品页面选择可配置产品选项时，主图像会变为所选简单产品的图像。

如果您关联的简单产品没有上传任何图像，它可能会更改为默认图像 placholer 或没有更改图像（可能在扩展程序的管理设置中配置）

扩展支持与自定义缩放模块的集成，该模块具有与基本模板不同的图像大小。

确保在安装扩展程序之前禁用编译。系统 > 工具 > 编译页面，然后单击禁用按钮。安装后您可以重新启用编译。