实现这一功能可以有很多方法,这里我们采用jQuery来完成。完成步骤如下:
首先上需要将准备好的图片上传到后台(产品创建页面的Images一栏下),如何上传这里就不再赘述了,这里要注意的一点是为每个产品指定有意义的Label名称,如下面的Black, Brown, Red等名称:
上面所指定的Label标签名需要与自定义属性中的各选项需要一一对应,在Custom Options一栏下进行创建即可,这里采用下拉框Drop-down的自定义选项
以上是图片和选项名称方面的准备,还需要对部分代码进行修改才能实现前述功能,首先要修改的文件为app/design/frontend/default/模板名/template/page/html/head.phtml,其中模板名根据您所使用的模板而定,首先而要在头部引入jQuery文件,如:
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
具体代码如下:
<script type=”text/javascript”> jQuery(document).ready(function() { // On document ready hide all images first jQuery(“#imageShowcase img”).hide(); jQuery(“#productImgDefault”).show(); jQuery(“#select_155″).change(function() { var optionValueText = jQuery.trim(jQuery(‘#select_155 :selected’).text()); if(optionValueText != “– Please Select –“) { // Hide all images on select element change action jQuery(“#imageShowcase img”).hide(); // Show the image based on selected value jQuery(“#productImg” + optionValueText).show(); } }); }); </script>
注:以上的id #select_155请根据您的实际情况来修改,这和前面选择的是下拉框以及模板等都有密切关系。
到这里我们就完成一大半的工作了,下面需要对app/design/frontend/default/模板名/template/catalog/product/view/media.phtml文件进行修改,替换$_product = $this->getProduct();附近的一段代码如下:
<div id=”imageShowcase”> <?php if ($_product->getImage() != ‘no_selection’ && $_product->getImage()): ?> <img id=”productImgDefault” src=”<?php echo $this->helper(‘catalog/image’)->init($_product, ‘image’); ?>” alt=”<?php echo $this->htmlEscape($_product->getName()) ?>” /> <?php else: ?> <img id=”productImgDefault” src=”<?php echo $this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(265); ?>” alt=”<?php echo $this->htmlEscape($_product->getName()) ?>” /> <?php endif; ?> <?php if (count($this->getGalleryImages()) > 0): ?> <?php foreach ($this->getGalleryImages() as $_image): ?> <img src=”<?php echo $this->helper(‘catalog/image’)->init($this->getProduct(), ‘image’, $_image->getFile()); ?>” alt=”no image” id=”productImg<?php echo $this->htmlEscape($_image->getLabel()) ?>” /> <?php endforeach; ?> </div> <?php endif; ?>
同样这也是依模板而定的,以madame-modern模板为例,Alan用以上代码替换了下面这段代码:
<p class=”product-image product-image-zoom”> <?php $_img = ‘<a href=”‘.$this->helper(‘catalog/image’)->init($_product, ‘image’).'” id=”zoom1″ class=”cloud-zoom” rel=”image_gallery” title=”‘.$this->htmlEscape($this->getImageLabel()).'” ><img id=”image” src=”‘.$this->helper(‘catalog/image’)->init($_product, ‘image’)->resize(590,714).'” alt=”‘.$this->htmlEscape($this->getImageLabel()).'” title=”‘.$this->htmlEscape($this->getImageLabel()).'” /></a>'; echo $_helper->productAttribute($_product, $_img, ‘image’); ?> </p>
实现后的例效果如下