Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Color swatches for configurable products on the product list page? 
 
Feldar
Member
 
Avatar
Total Posts:  32
Joined:  2010-06-15
NJ, US
 

I’ve been working on getting color swatches on the category pages of our website. I was able to get it to work to some extent, but the page is taking forever to load. We are using configurable products and each simple product has its own images. I was able to load the simple associated products and retreive a list of unique images for the available colors, but loading all of those products on the list page takes longer to load than the average person is willing to wait for. I will list the steps I took to get to where I am in further posts. Perhaps someone has some ideas as to what I should try next?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Feldar
Member
 
Avatar
Total Posts:  32
Joined:  2010-06-15
NJ, US
 

Getting started was rather difficult as the only example for creating color swatches required all of the product images for every color to be included in the configurable product. This method is hard to keep track of when you’ve got thousands of products and certain colors can go out of stock, in which case you’d need to remove the color image and link from the configurable product. We’ve already got all of the information we need stored in the simple products so first I tried to loop through the products returned by getAllowProducts() and gather each unique thumbnail image value for the swatch.

I didn’t save the code, so I’ll just fill in what I remember:

In (/app/design/frontend/default/mytheme/template/catalog/product/list.phtml)
After the product-image-wrapper div I added another div for the color swatches Inside the div I used php to loop through the associated products

$tempProd =  $_product->getTypeInstance(true);
$_associatedProducts $tempProd->getAllowProducts($_product);
$imgUrls = array();
foreach (
$_associatedProducts as $_associatedProduct{
   $_associatedProduct
->load();
   if (!
in_array($imgUrls$_associatedProduct->getData('thumbnail'))) {
      $imgUrls[] 
$_associatedProduct->getData('thumbnail');
   
}
}
if (count($imgUrls) > 1{
   
echo '<dl><div><ul style="height:auto; clear:both; width:180px; margin-top:4px;">';
   foreach(
$imgUrls as $imgUrl{
      
echo '<li id="hovers" style="list-style:none; display:inline">
      <div id="hovers" onclick="set_img_source('
.$_product->getId().', \''.$imgUrl.'\');" style="cursor:pointer; float:left; margin-left: 4px; height: 35px; width: 35px; border:1px solid #333333;  "><img src="'.$imgUrl->resize(35).'" height=35 width=35 border="0" /></div>
      </li>'
;
   
}
   
echo '</ul></div></dl>';
}

I was able to get it to work, but the page took over 10 seconds to load. Looping through the associated products and loading each one just for the thumbnail image seemed to use up a lot of the servers resources so I looked for an alternate method that wouldn’t require the product->load() function

 
Magento Community Magento Community
Magento Community
Magento Community
 
Feldar
Member
 
Avatar
Total Posts:  32
Joined:  2010-06-15
NJ, US
 

After a bit of research I was able to find a way to directly query the tables, it took some digging to find exactly what table(s) I needed to query, though. The final result was this:

<?php
   
//Color Swatches
   
$usedColIds = array();
   if (
$_product->getTypeId() == 'configurable'{
      $tempProd 
=  $_product->getTypeInstance(true);
      
$_associatedProducts $tempProd->getUsedProductIds($_product);

      if (
count($_associatedProducts)) {
         $read 
Mage::getSingleton('core/resource')->getConnection('core_read');
         
$readresult=$read->query("SELECT DISTINCT catalog_product_entity_varchar.value FROM catalog_product_entity_varchar 
Inner Join cataloginventory_stock_item on cataloginventory_stock_item.product_id = catalog_product_entity_varchar.entity_id 
WHERE catalog_product_entity_varchar.entity_id IN ( "
.join(','$_associatedProducts)." ) 
AND attribute_id = 76 and cataloginventory_stock_item.qty > 0"
);
         
$imgUrls = array();
         while (
$row $readresult->fetch() ) {
            $imgUrls[]
=$row['value'];
         
}
         
if (count($imgUrls) > 1{
            
echo '<dl><div><ul style="height:auto; clear:both; width:180px; margin-top:4px;">';
            foreach(
$imgUrls as $imgUrl{
               
echo '<li id="hovers" style="list-style:none; display:inline">
               <div id="hovers" onclick="set_img_source('
.$_product->getId().', \''.Mage::getBaseUrl("media").'catalog/product'.$imgUrl.'\');" style="cursor:pointer; float:left; margin-left: 4px; height: 35px; width: 35px; border:1px solid #333333;  "><img src="'.Mage::getBaseUrl("media").'catalog/product'.$imgUrl.'" height=35 width=35 border="0" /></div>
               </li>'
;
            
}
            
echo '</ul></div></dl>';
         
}
      }
   }
?>

and at the bottom a script

<script type="text/javascript">
   function 
set_img_sourceimg_idval {
      img 
document.getElementById('image-' img_id);
      
img.setAttribute("src"val);
   
}
</script>

I also changed:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'thumbnail')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail'); ?>" width="180" height="180" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'thumnail')) ?>" /></a>

in the product-image-wrapper to:

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'thumbnail')) ?>" class="product-image"><img id="image-<?php echo $_product->getId() ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail'); ?>" width="180" height="180" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'thumnail')) ?>" /></a>

Which effectively gave the image an id for my javascript to find…

This method did speed it up a bit as we were no longer loading individual products just for their thumbnail image, but it’s still taking too long to load the page. Is there anything more I can do to get it to run a little faster?

 
Magento Community Magento Community
Magento Community
Magento Community
 
MV
Jr. Member
 
Total Posts:  2
Joined:  2010-08-09
 

Hi,
I’m trying to do the same, but I cannot find any “product-image-wrapper” div anywhere, could you upload your changed file.

Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Feldar
Member
 
Avatar
Total Posts:  32
Joined:  2010-06-15
NJ, US
 

There are 2 of them in /app/design/frontend/default/mytheme/template/catalog/product/list.phtml (where /default/mytheme is the current theme you’re using for the frontend). If it’s not in the current theme you can take a copy from /app/design/frontend/base/default/template/catalog/product and paste it into the folder. Some addons may also rename this page and replace it with a page that refrences back to it (MagicToolbox)

The first section is for the product List view and any changes you make to the code there will be visible only when the List view is shown, the second section is for the product Grid view.

It still runs dirt slow though and i’m not sure it’s a good solution for anyone not running magento on a non magento optimized server. Which is why I’m still looking for a faster running solution.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Amasty
Mentor
 
Avatar
Total Posts:  3988
Joined:  2009-11-10
 

Hi! Color Swatches Pro extension ( http://amasty.com/color-swatches-pro.html) allows to use color swatches at product listing pages.

For more details, user guide and live demo please follow the link - http://amasty.com/color-swatches-pro.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
Martinly
Sr. Member
 
Total Posts:  90
Joined:  2013-11-10
 

It’s easily to add product’s image next to custom option values if you use paid extension such as Magento Color Swatch by professional extension providers such as Magestore. Our support team can also help you if there is any problemm as conflict. Why don’t you give it a try ?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top