Magento实现点击选项切换图片的功能
实现这一功能可以有很多方法，这里我们采用jQuery来完成。完成步骤如下：
首先上需要将准备好的图片上传到后台（产品创建页面的Images一栏下），如何上传这里就不再赘述了，这里要注意的一点是为每个产品指定有意义的Label名称，如下面的Black, Brown, Red等名称：
上面所指定的Label标签名需要与自定义属性中的各选项需要一一对应，在Custom Options一栏下进行创建即可，这里采用下拉框Drop-down的自定义选项
以上是图片和选项名称方面的准备，还需要对部分代码进行修改才能实现前述功能，首先要修改的文件为app/design/frontend/default/模板名/template/page/html/head.phtml，其中模板名根据您所使用的模板而定，首先而要在头部引入jQuery文件，如：
1 | <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script> |
具体代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type=”text/javascript”>jQuery(document).ready(function() {// On document ready hide all images firstjQuery(“#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 actionjQuery(“#imageShowcase img”).hide();// Show the image based on selected valuejQuery(“#productImg” + optionValueText).show();}});});</script> |
注：以上的id #select_155请根据您的实际情况来修改，这和前面选择的是下拉框以及模板等都有密切关系。
到这里我们就完成一大半的工作了，下面需要对app/design/frontend/default/模板名/template/catalog/product/view/media.phtml文件进行修改，替换product=this->getProduct();附近的一段代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 | <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用以上代码替换了下面这段代码：
1 2 3 4 5 6 | <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> |
实现后的例效果如下
