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);

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" />

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.

  • 1
    magento.stackexchange.com/questions/45948/… may help!
    – B00MER
    Commented Oct 12, 2016 at 8:07
  • @ B00MER thanks for the suggestion but I'm already using RWD theme which configurable swatches are compatible. I just want to display those color swatches not only on the product list but also on my homepage since I have some of my products there.
    – nosnevetzy
    Commented Oct 12, 2016 at 9:50
  • Please help me solve this.
    – nosnevetzy
    Commented Oct 14, 2016 at 5:35

1 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

                // 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);
                        echo $_nameAfterChild->toHtml();

at the end of this file add

// 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
        echo $_afterChild->toHtml();

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

    <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 name="product_list.name.after">
        <block type="core/template" name="product_list.swatches" template="configurableswatches/catalog/product/list/swatches.phtml" />
    <reference name="product_list.after">
        <block type="configurableswatches/catalog_media_js_list" name="configurableswatches.media.js.list" />

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

<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" />
  • Hello @Murtuza Zabuawala. Thanks for your response. I tried your suggestion but unfortunately, it doesn't work. I already cleared and deleted my cache but the configurable swatches on my homepage still didn't appear. I view the source code of the page and the two js <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> appears on the head of my page. The XML works but I don't know why it didn't show.
    – nosnevetzy
    Commented Oct 25, 2016 at 10:44
  • check My updated answer Commented Oct 25, 2016 at 10:57
  • @nosnevetzy check My updated answer Commented Oct 25, 2016 at 11:25
  • @ Murtuza Zabuawala Thanks for the response! But still the configurable swatches did not appear. I already cleared the cache, compiled the whole magento but I didn't get any changes. Please if you have other solutions I would be glad. Please help me. I've been searched on the internet over weeks but I still can't find the solution for this. Thanks a lot!
    – nosnevetzy
    Commented Oct 26, 2016 at 9:46
  • here's what inside of my CMS Homepage Content: prnt.sc/cz3qib
    – nosnevetzy
    Commented Oct 26, 2016 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.