my code stock.com

magegurusit

Magento : How to implement color filter with color images on
by magegurusit

Steps to follow :
1) Upload all color images on ftp media/swatches folder
2) Create admin config for storing color names -  images mapping
3) Go to app/design/frontend/youtheme/default/template/catalog/layer
4) Open the File filter.phtml
5) Replace the existing code with below one :

Snippet options

Download: Download snippet as magento-how-to-implement-color-filter-with-color-images-on.php.
Copy snippet: For this you need a free my code stock.com account.
Embed code : You will find the embed code for this snippet at the end of the page, if you want to embed it into a website or a blog!

#file filter.phtml
<?php
 $display_count = 5;
 $ii = 0;
 $color_swatches = Mage::getStoreConfig('appollo_configurable/color_swatches/textarea');
 $color_swatches = explode('|',$color_swatches);
?>

<ol>
<?php foreach ($this->getItems() as $_item): ?>
    <li <?php if($ii >= $display_count): ?> class="less" style="display: none;" <?php endif; ?>>
        <?php if ($_item->getCount() > 0): ?>
        <a rel="nofollow" href="<?php echo $this->urlEscape($_item->getUrl()) ?>">
        	<?php 
        		$label = trim($_item->getLabel()); 
        		$img = 0;
        		foreach($color_swatches as $value){
        				$finalarr = explode(':', $value);
        				$colorname = $finalarr[0];
        				if($colorname==$label){
        					$imgname = $finalarr[1];
        					$img = 1;
        					//break;
        				}
        		}
        		if($img=='1'){
        			$url = $this->getUrl().'media/swatches/';
        			$imgt = '<img src='.$url.$imgname.' />';		
        			echo $imgt;
        		}
        		else{
        			echo $label;
        		}
        	?>
        </a>
        <?php else: 
        	$label = trim($_item->getLabel());
        	$img = 0;
    		foreach($color_swatches as $value){
    				$finalarr = explode(':', $value);
    				$colorname = $finalarr[0];
    				if($colorname==$label){
    					$imgname = $finalarr[1];
    					$img = 1;
    					//break;
    				}
    		}
    		if($img=='1'){
    			$url = $this->getUrl().'media/swatches/';
    			$imgt = '<img src='.$url.$imgname.' />';		
    			echo $imgt;
    		}
    		else{
    			echo $label;
    		}
         ?>
        <?php endif; ?>
        <?php if ($this->shouldDisplayProductCount()): ?>
        (<?php echo $_item->getCount() ?>)
        <?php endif; $ii++; ?>
    </li>
<?php endforeach ;
if($ii >= $display_count): ?> 
<li class="dd-but more-cl">More</li>
<li class="dd-but less less-cl" style="display: none;">Less</li>
<?php endif; ?>
</ol>

#file state.phtml 
<?php 
    $_filters = $this->getActiveFilters();
    $color_swatches = Mage::getStoreConfig('appollo_configurable/color_swatches/textarea');
    $color_swatches = explode('|',$color_swatches);
?>
<?php if(!empty($_filters)): ?>
<div class="currently">
    <p class="block-subtitle"><?php echo $this->__('Currently Shopping by:') ?></p>
    <ol>
    <?php foreach ($_filters as $_filter): ?>
        <li>
            <span class="label"><?php echo $this->__($_filter->getName()) ?>:</span> 
            <span class="value">
                <?php 
                    $label = trim($this->stripTags($_filter->getLabel()));
                    $img = 0;
                    foreach($color_swatches as $value){
                            $finalarr = explode(':', $value);
                            $colorname = $finalarr[0];
                            if($colorname==$label){
                                $imgname = $finalarr[1];
                                $img = 1;
                                //break;
                            }
                    }
                    if($img=='1'){
                        $url = $this->getUrl().'media/swatches/';
                        $imgt = '<img src='.$url.$imgname.' />';        
                        echo $imgt;
                    }
                    else{
                        echo $label;
                    }
                ?></span>
            <?php
                $clearLinkUrl = $_filter->getClearLinkUrl();
                if ($clearLinkUrl):
            ?>
                <a  class="btn-previous" href="<?php echo $_filter->getRemoveUrl() ?>" title="<?php echo $this->__('Previous') ?>"><?php echo $this->__('Previous') ?></a>
                <a  class="btn-remove" title="<?php echo $this->escapeHtml($_filter->getFilter()->getClearLinkText()) ?>" href="<?php echo $clearLinkUrl ?>"><?php echo $this->escapeHtml($_filter->getFilter()->getClearLinkText()) ?></a>
            <?php else: ?>
                <a  class="btn-remove" href="<?php echo $_filter->getRemoveUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>"><?php echo $this->__('Remove This Item') ?></a>
            <?php endif; ?>
        </li>
    <?php endforeach; ?>
    </ol>
</div>
<?php endif; ?>

Create a free my code stock.com account now.

my code stok.com is a free service, which allows you to save and manage code snippes of any kind and programming language. We provide many advantages for your daily work with code-snippets, also for your teamwork. Give it a try!

Find out more and register now

You can customize the height of iFrame-Codes as needed! You can find more infos in our API Reference for iframe Embeds.