Alan Hou的个人博客

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

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>

实现后的例效果如下

退出移动版