How to display Configurable/Color Swatches in Homepage Magento 1.9.1

Question

I have a list of products on my homepage and I'm trying to display its associated color swatches but I'm having a hard time to do it. I have the configurable swatches in my product list and it's working fine.

I'm using RWD theme and Magento 1.9.1 CE.

<script type="text/javascript">
    $j(document).on('product-media-loaded', function() {
        ConfigurableMediaImages.init('<?php echo $this->getImageType(); ?>');
        <?php foreach ($this->getProductImageFallbacks() as $imageFallback): ?>
        ConfigurableMediaImages.setImageFallback(<?php echo $imageFallback['product']->getId(); ?>, $j.parseJSON('<?php echo $imageFallback['image_fallback']; ?>'));
        <?php endforeach; ?>
        $j(document).trigger('configurable-media-images-init', ConfigurableMediaImages);
    });
</script>

in app/design/frontend//default/configurableswatches/catalog/media/js.phtml

is the cause of the problem.

But before that, I paste this in my local.xml

<cms_index_index translate="label">
    <update handle="product_list"/> 
    <reference name="content">
         <block type="configurableswatches/catalog_media_js_list" name="configurableswatches.media.js.list" />
     </reference>
</cms_index_index>

Then I found out that the products don't populate its small images. If you noticed, there's a for loop in the javascript above, but it doesn't work because getProductImageFallbacks() returns NULL.

This is what I put on my CMS content (Homepage)

{{block type="catalog/product_list" column_count="5" category_id="21" template="catalog/product/homepage-list.phtml"}}

In app/code/local/Mage/ConfigurableSwatches/Block/Catalog/Media/Js/Abstract.php line 69 in public function getProductImageFallbacks($keepFrame = null)

This $products = $this->getProducts(); gives me NULL. That's why it can't give the correct image fallback.

Answer 1

in your catalog/product/homepage-list.phtml

find img tag for product image and update the code

<?php $_imgSize = 300; ?>
        <img id="product-collection-image-<?php echo $_product->getId(); ?>"
             src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
             alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />

after rating summy or after image add this code

   <?php
                // Provides extra blocks on which to hang some features for products in the list
                // Features providing UI elements targeting this block will display directly below the product name
                if ($this->getChild('name.after')) {
                    $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                    foreach ($_nameAfterChildren as $_nameAfterChildName) {
                        $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                        $_nameAfterChild->setProduct($_product);
                        echo $_nameAfterChild->toHtml();
                    }
                }
                ?>

at the end of this file add

<?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
    $_afterChildren = $this->getChild('after')->getSortedChildren();
    foreach ($_afterChildren as $_afterChildName) {
        $_afterChild = $this->getChild('after')->getChild($_afterChildName);
        //set product collection on after blocks
        $_afterChild->setProductCollection($_productCollection);
        echo $_afterChild->toHtml();
    }
}
?>

in layout folder open configurableswatches.xml file and add below code

<cms_index_index>
    <reference name="head">
        <action method="addItem"><type>skin_js</type><name>js/configurableswatches/product-media.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/configurableswatches/swatches-list.js</name></action>
    </reference>
    <reference name="product_list.name.after">
        <block type="core/template" name="product_list.swatches" template="configurableswatches/catalog/product/list/swatches.phtml" />
    </reference>
    <reference name="product_list.after">
        <block type="configurableswatches/catalog_media_js_list" name="configurableswatches.media.js.list" />
    </reference>
</cms_index_index>

change this code to like below

{{block type="catalog/product_list"  name="myCustomName" column_count="5" category_id="21" template="catalog/product/homepage-list.phtml"}}

add below code to your local.xml file

<cms_index_index>
<reference name="myCustomName">
    <block type="core/text_list" name="product_list.name.after" as="name.after" />
    <block type="core/text_list" name="product_list.after" as="after" />
</reference>
</cms_index_index>