Integration of Magento 1.9.1 Configurable Swatches with custom Magento templates

One of the most hottest Magento 1.9.1 features is Configurable Swatches module. Unfortunately this extension was not added as standalone Magento core module. It was fully integrated only to Magento RWD theme. Integration and using of swatches for custom themes and even Magento default template got really time consuming task. Bellow you will find instructions how to integrate that swatches with any custom theme. You can also download module files at https://github.com/tmhub/catalog-configurable-swatches/releases

Installation

1. Deploy files into magento folder.
2. Modify templates and copy required files from RWD theme.
3. Configure swatches.

Known issues

1. Image becomes smaller, when selecting options inside ajax popup
2. Image gets resized, when selecting options on the catalogsearch page

What does the module do?

1. Add required containers and blocks to the category and product view pages.
2. Add required javascripts and styles.
3. Add support for colorswatches inside AjaxPro or QuickShopping popup on category view page.
4. Add support for AjaxPro or AjaxLayeredNavigation loaded products on the category view page.
5. Fixes some bugs of ConfigurableSwatches module.

Installation

Deploy module

Unpack archive to the Magento root directory, disable compilation and clear cache.

Or, if you are using modman you can
deploy the module with command line:

cd /path/to/magento
modman clone git@github.com:tmhub/core.git
modman clone git@github.com:tmhub/catalog-configurable-swatches.git

Required modifications

Copy the following files and folders from RWD to your theme:

Replace the PACKAGE/THEME with your values in commands below. For example default/f001, default/f001_grey.

If you are planning to use colorswatches on all of your themes, you can replace the PACKAGE/THEME with base/default.

cd /path/to/magento

# backup files if exists
mv app/design/frontend/PACKAGE/THEME/layout/configurableswatches.xml app/design/frontend/PACKAGE/THEME/layout/configurableswatches.xml.bak
mv app/design/frontend/PACKAGE/THEME/template/configurableswatches app/design/frontend/PACKAGE/THEME/template/configurableswatches.bak
mv app/design/frontend/PACKAGE/THEME/template/catalog/layer/state.phtml app/design/frontend/PACKAGE/THEME/template/catalog/layer/state.phtml.bak
mv app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options/configurable.phtml app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options/configurable.phtml.bak

# copy files from RWD to PACKAGE/THEME
mkdir -p app/design/frontend/PACKAGE/THEME/template/catalog/layer
mkdir -p app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options
cp app/design/frontend/rwd/default/layout/configurableswatches.xml app/design/frontend/PACKAGE/THEME/layout/configurableswatches.xml
cp -r app/design/frontend/rwd/default/template/configurableswatches app/design/frontend/PACKAGE/THEME/template/configurableswatches
cp app/design/frontend/rwd/default/template/catalog/layer/state.phtml app/design/frontend/PACKAGE/THEME/template/catalog/layer/state.phtml
cp app/design/frontend/rwd/default/template/catalog/product/view/type/options/configurable.phtml app/design/frontend/PACKAGE/THEME/template/catalog/product/view/type/options/configurable.phtml

# copy js from rwd to PACKAGE/THEME
mkdir -p skin/frontend/PACKAGE/THEME/js/lib
cp -r skin/frontend/rwd/default/js/configurableswatches skin/frontend/PACKAGE/THEME/js/configurableswatches
cp skin/frontend/rwd/default/js/lib/imagesloaded.js skin/frontend/PACKAGE/THEME/js/lib/imagesloaded.js
cp skin/frontend/rwd/default/js/lib/modernizr.custom.min.js skin/frontend/PACKAGE/THEME/js/lib/modernizr.custom.min.js

In case if your theme already have these files, please make sure to copy the
colorswatches modifications into your files.

Open app/design/frontend/PACKAGE/THEME/template/catalog/product/list.phtml
and modify original code in two places (For grid and list modes).

• Add the id attribute to the image element:

    id="product-collection-image-<?php echo $_product->getId(); ?>"
  

• Add the following code below the review summary in list mode and below the
  image in grid mode:

    <?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();
        }
    }
    ?>
  

Open app/design/frontend/PACKAGE/THEME/template/catalog/product/view/media.phtml

• Add the following code to the bottom of the template:

    <?php echo $this->getChildHtml('after'); ?>
  

Configuration

1. Navigate to the System > Configuration > Configurable Swatches > General,
   enable Magento module and select the options to transform into swatches.

2. Navigate to the System > Configuration > Catalog > Product Image and set
   the Small Image Width option to match your theme product images size.

Known issues

Image becomes smaller, when selecting options inside ajax popup (AjaxPro or QuickShopping for example).

Unfortunately it can't be fixed, because of Magento ConfigurableColorswatches
javascript design. It uses the singleton instance of ConfigurableMediaImages object
which is created in listing with listing parameters and can't be changed for particular
elements only.

Image gets resized, when selecting options on the catalogsearch page

This issue is caused by incomplete condition in app/code/core/Mage/ConfigurableSwatches/Block/Catalog/Media/Js/Abstract.php
on line 72-73:

$listBlock = $this->getLayout()->getBlock('product_list');
if ($listBlock && $listBlock->getMode() == 'grid') {

Product list block on catalogsearch page is called search_result_list. This issue could
be fixed in two ways:

1. Applying the following patch to the Abstract.php block:

    @@ -70,6 +70,9 @@
   
             if ($keepFrame === null) {
                 $listBlock = $this->getLayout()->getBlock('product_list');
    +            if (!$listBlock) {
    +                $listBlock = $this->getLayout()->getBlock('search_result_list');
    +            }
                 if ($listBlock && $listBlock->getMode() == 'grid') {
                     $keepFrame = true;
                 } else {
   

2. Applying the following path to the app/design/frontend/PACKAGE/THEME/template/configurableswatches/catalog/media/js.phtml:

    @@ -31,7 +31,8 @@
     <script type="text/javascript">
         $j(document).on('product-media-loaded', function() {
             ConfigurableMediaImages.init('<?php echo $this->getImageType(); ?>');
    -        <?php foreach ($this->getProductImageFallbacks() as $imageFallback): ?>
    +        <?php $keepFrame = ($this->getRequest()->getControllerName() !== 'product');
    +        foreach ($this->getProductImageFallbacks($keepFrame) 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);