I'm trying to show configurable swatches on custom category page (magento 1.9)

Question

I'm using Magento 1.9.1.0 and have configurable swatches working on category, and product view pages.

I'm attempting to create a custom 'Shop' page which lists all products (store has only +/-20), and shows the configurable swatches below the products.

I'm able to create the Shop page which lists all products a number of ways .. Either through CMS, local.xml, or using a controller, etc ... no problems there.

Here is the local.xml example. *I have the appropriate routes setup, and the Default Category set to "Is Anchor".

<mystore_site_index_shop>
    <reference name="content">
            <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                <block type="core/text_list" name="product_list.name.after" as="name.after" />
                <block type="core/text_list" name="product_list.after" as="after" />
                <block type="catalog/product_list_toolbar" name="product_list_toolbar" template="catalog/product/list/toolbar.phtml">
                    <block type="page/html_pager" name="product_list_toolbar_pager"/>
                </block>
            </block>
    </reference>
</mystore_site_index_shop>

I've also added the page reference to the page in configurableswatches.xml

<mystore_site_index_shop>
    <update handle="product_list"/>
</mystore_site_index_shop>

which loads the appropriate .js files to the page ... however no swatches are shown.

Does anybody have any advice on how I can accomplish this? I must be missing something obvious here ..

Thanks!

Answer 1

If you go to the app/code/core/Mage/ConfigurableSwatches/etc/config.xml You will see observer on catalog_block_product_list_collection event on line 83.

  <catalog_block_product_list_collection>
                <observers>
                    <configurableswatches>
                        <class>configurableswatches/observer</class>
                        <method>productListCollectionLoadAfter</method>
                    </configurableswatches>
                </observers>
            </catalog_block_product_list_collection>

Add your observer method on the event to add swatches.

I hope this helps.

Answer 2

Adding Swatches on listing page is done by various way

i will providing you the methods.

Method 1: You can use this module which is free or you can study the way of doing by studying module

http://magebug.blogspot.in/2013/06/magento-how-to-display-color-options-in.html

Methos 2 :[This will show all option of configurable product]

<?php if($_product->isConfigurable()): ?>
  //get attributes
  <?php $attributes = $_product->getTypeInstance(true)->getConfigurableAttributes($_product) ?>
  <?php if(count($attributes)): ?>
    <ul>
    <?php foreach($attributes as $att): ?>
      <?php $pAtt=$att->getProductAttribute();
        //get the child products
        $allProducts = $_product->getTypeInstance(true)->getUsedProducts(null, $_product);
        $frontValues =array() ?>
      <li><?php echo $pAtt->getFrontendLabel() ?>
       <ul>
       <?php foreach($allProducts as $p): ?>
         //check stock, status, ...
         //do not show unsaleable options
         <?php if(!$p->isSaleable()) continue; ?>
         <?php $out=$p->getAttributeText($pAtt->getName()); ?>
         <?php $frontValues[$out]=$out; ?>
       <?php endforeach ?>
        <li><?php echo implode('</li><li>', $frontValues) ?></li>
       </ul>
      </li>
    <?php endforeach ?>
    </ul>
  <?php endif ?>
<?php endif ?>

You can replace dropdown by image or label.

Hope this will work for you.

Answer 3

Try adding the product list update inside of the local.xml file after the mystore_site_index_shop block.

Inside local.xml

<mystore_site_index_shop>
   <update handle="product_list"/>
</mystore_site_index_shop>

--Edit--

Even though I was able to get this working using the method i posted above. The correct method from my understanding is to build your entire theme as a child of of the rwd theme allowing you usage of the swatches without any hacks.

inside app/design/frontend/YOURTHEME/default/etc/theme.xml

<?xml version="1.0"?>
<theme>
<parent>rwd/default</parent>
</theme>

Answer 4

If you look in Mage_ConfigurableSwatches_Model_Observer, you have

  public function convertLayerBlock(Varien_Event_Observer $observer)
{
    $front = Mage::app()->getRequest()->getRouteName();
    $controller = Mage::app()->getRequest()->getControllerName();
    $action = Mage::app()->getRequest()->getActionName();

    // Perform this operation if we're on a category view page or search results page
    if (($front == 'catalog' && $controller == 'category' && $action == 'view')
        || ($front == 'catalogsearch' && $controller == 'result' && $action == 'index')) {

        // Block name for layered navigation differs depending on which Magento edition we're in
        $blockName = 'catalog.leftnav';
        if (Mage::getEdition() == Mage::EDITION_ENTERPRISE) {
            $blockName = ($front == 'catalogsearch') ? 'enterprisesearch.leftnav' : 'enterprisecatalog.leftnav';
        } elseif ($front == 'catalogsearch') {
            $blockName = 'catalogsearch.leftnav';
        }
        Mage::helper('configurableswatches/productlist')->convertLayerBlock($blockName);
    }
}

As you see, the conditional needs your route ($front,$controller,$action) to process. You can override this observer by rewrite and add your condition.