I would like to be able to show a preview of available colors for a product on the category listing page. You did it with the JM Sporty theme. For example, when you roll over the product images on this page http://magento-themes.joomlart.com/j…p/running.html you can see how the color selections are visible. I would like to do the same thing with the JM Crafts. Here is a page example that I would like to do this with http://silkplan.nextmp.net/index.php…gapanthus.html
2 answers
Hi mate,
At the demo of jm sporty as you have seen, if a product has various colors then we would need to separate that product into various products (each product for a color) and those products are related, if you already have products scheme like that then you can pm me your FTP Info as well as the admin account and I will try to implement this for you 
Hi toprock,
you can try as following
1) install the JmColorSwatch extension that I attached here, after installing you go to back-end of the extension to enable it
2) open the file of app\design\frontend\default\jm_craftstemplate\cat alog\product\list.phtml there you look for this snap of code
HTML Code:
<h2 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"> <?php $pname = $_helper->productAttribute($_product, $_product->getName(), 'name') ?> <?php if (strlen($pname) > 30) : echo strip_tags(substr($pname, 0, 20)).'...'; else : echo $pname; endif; ?> </a></h2>
right above it you add this code
PHP Code:
<?php if($_products = Mage::helper("jmcolorswatch")->getRelatedproducts($_product->getId())){ ?>
<span class="productgaleries">
<?php
?>
<?php foreach ($_products as $_item):
$_item = Mage::getModel('catalog/product')->load($_item->getId());
?>
<a href="<?php echo $_item->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_item->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_item, 'thumbnail')->resize(56,56) ?>" width="56" height="62" alt="<?php echo $this->htmlEscape($_item->getName()) ?>" /></a>
<?php endforeach; ?>
</span>
<?php } ?>
3) Finally you open the style file of skin\frontend\default\jm_crafts\css\styles.css to add these css rules
HTML Code:
span.productgaleries{
bottom: 95px;
display: block;
left: 44px;
margin: 0 auto;
position: absolute;
width: 200px;
}
.products-grid .productgaleries img{
width:auto !important;
}
.products-grid .productgaleries .product-image{
display: none;
float: left;
width: 32%;
}
.products-grid li.item:hover .productgaleries .product-image{
display: block;
}
I hope this helps !
