Alan Hou的个人博客

Magento实现点击选项切换图片的功能

Alan
Magento实现点击选项切换图片的功能
Magento自身拥有强大的自定义心选项功能，但即便是这么强大的系统在使用中依然会捉襟见肘，比如下面我们要提到的图片随着点击不同选项发生改变的功能(Color Switcher)。简单的说就是点选下拉框的红色就显示颜色为红色的产品，而点选绿色则显示绿色的产品。

实现这一功能可以有很多方法，这里我们采用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>

实现后的例效果如下

退出移动版