i m using mangento 1.8.1 and i want to update images on selction of configurable product options..
so far searching on itenrnet i have come accros some javascripts inlucding in a header file.
<?php
$_product = Mage::registry('current_product');
?>
<script type="text/javascript">
//<![CDATA[
var assocIMG = // Added - Removed { here, causes issues with other scripts when not working with a configurable product.
<?php
if ($_product->getTypeId() == "configurable") {
echo "{";
$associated_products = $_product->loadByAttribute('sku', $_product->getSku())->getTypeInstance()->getUsedProducts();
foreach ($associated_products as $assoc)
$dados[] = $assoc->getId().":'".($assoc->image == "no_selection" || $assoc->image == "" ? $this->helper('catalog/image')->init($_product, 'image', $_product->image)->resize(368,368) : $this->helper('catalog/image')->init($assoc, 'image', $assoc->image)->resize(368,368))."'";
} else {
$dados[] = "''";
}
echo implode(',', $dados );
if ($_product->getTypeId() == "configurable") {
echo "}";
}
?> ;
//]]
</script> the above code changes the product images after selecting each option. but magento built in zoom funciton is not working. i m using custom theme and my theme is integrated with magic anc cloudzoom functionalities.. so far none of them works for me.
my media.phtml file have
<?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<?php
$mainImagePath = '';
$galleryImages = $this->getGalleryImages();
if (count($galleryImages) > 0) {
$gallery = '<div class="more-views">';
$gallery .= '<ul>';
foreach ($galleryImages as $_image) {
if ($_image->getFile() == $_product->getData('small_image')) {
$mainImagePath = $this->getGalleryUrl($_image);
}
$gallery .= '<li>'
. '<a href="' . $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()) . '" '
. 'rel="popupWin:\'' . $this->getGalleryUrl($_image) . '\', useZoom: \'cloudZoom\', smallImage: \'' . $this->getCloudImage($this->getProduct(), $_image) . '\'" class="cloud-zoom-gallery" title="' . $this->htmlEscape($_image->getLabel()) . '">'
. '<img src="' . $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(95) . '" alt="' . $this->htmlEscape($_image->getLabel()) . '" />'
. '</a></li>';
}
$gallery .= '</ul></div>';
}
?>
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<div class="badge">
<?php if($_product->getData('new')){echo '<span class="new">'. $_product->getAttributeText('new').'</span>'; }?>
<?php if($_product->getData('sale')){echo '<span class="sale">'. $_product->getAttributeText('sale').'</span>'; }?>
</div>
<p class="product-image product-image-zoom">
<a rel="<?php echo $this->renderCloudOptions(); ?>" gallery="<?php echo $mainImagePath; ?>" href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" class="cloud-zoom ajax" id="cloudZoom">
<?php
$_img = '<img id="image" src="'.$this->getCloudImage($_product).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</a>
</p>
<?php if(isset($gallery)): ?>
<p class="zoom-notice" id="track_hint"><?php echo $this->__('Click on above image to view full picture') ?></p>
<div class="thumbbox"><?php echo $gallery; ?></div>
<?php endif; ?>
<?php else: ?>
<p class="product-image">
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</p>
<?php endif; ?>
<script type="text/javascript">
jQuery(document).ready(function(){
var trigggerflag = 1;
jQuery('.product-image-zoom #wrap').click(function(){
if(trigggerflag){
trigggerflag =0;
jQuery('#cloudZoom').trigger('click');
}
trigggerflag =1;
});
jQuery('.more-views').jcarousel({
start: 1,
scroll:1,
wrap: 'circular'
});
jQuery('.more-views').hover(function(){
jQuery(".jcarousel-prev").stop().delay(0).animate({left: '-21px'},{queue:true,duration:300});
jQuery(".jcarousel-next").stop().delay(0).animate({right: '-21px'},{queue:true,duration:300});
},function(){
jQuery(".jcarousel-prev").stop().delay(0).animate({left:'5px'},{queue:true,duration:300});
jQuery(".jcarousel-next").stop().delay(0).animate({right:'5px'},{queue:true,duration:300});
});
});
</script>
pleae help me implementing the pic zoom functionality. also when i select the options in configurable product only the base image associated is displayed.. but i want to display all the images inside a associated simple product.
