如何根据颜色和尺寸属性通过关联的产品图像更改可配置的产品主图像? [英] How to change configurable product main image by associated product image based on color and size attributes?

问题描述

我正在使用具有尺寸和颜色属性的可配置产品.我想根据选择的选项更改可配置产品视图上的主图像.像如果选择红色，则具有红色属性值的关联产品的图像应在我选择该选项后立即显示在主图像上

I am using configurable product with size and color attributes. I want to change the main-image on configurable-product view as per the options chosen Like If I choose red-color then image of associated-product which has red color attribute value should display on main-image as soon as I choose the option.

我该怎么做?

谢谢...

推荐答案

我已经找到了解决该问题的一种解决方案，我正在为此解决问题...

I have found one solution for this problem for which I am working...

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

There is one block at \app\code\core\Mage\Catalog\Block\Product\View\Type\Configurable.php .

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

1) Extend this block or just add "Mage\Catalog\Block\Product\View\Type\Configurable.php" to "\app\code\local" folder.

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

2) There is one method in Configurable.php, getJsonConfig() which is used for getting configurable product details with their associated products. I have created one new method in this file, called getJsonConfigImages() and in this method I have added following code.

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);
     }

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

This method will give me every main-image-url of associated-product which is associated with configurable-product.

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

3) Then I just called this method at \app\design\frontend\yourpackage\yourtheme\template\catalog\product\view\type\options\configurable.phtml like this...

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

4)现在，我具有与configurable-product相关联的简单产品的每个main-image-url，然后仅使用一些javascript/jquery函数来更改产品页面上main-image的src.

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

4) Now I have every main-image-url of simple products which are associated with configurable-product, then just used some javascript/jquery function to change src of the main-image on product page.

I solved this issue by using this method... Please suggest new ideas or better solution than this if available...

这篇关于如何根据颜色和尺寸属性通过关联的产品图像更改可配置的产品主图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！