The Uros Likar Blog Just another pointless blog site

Magento – display banners on front page

In one project i had to display banners on front page. My client wanted to manualy add banners and assign link to them. One banner had to be visible, and others can be selected with buttons bellow them. I rather to use my own solutions than some magento modules created by community. Magento doesn't give you much choice so i used ordinary products for banners i need it.

First i created a category called "banners" or whatever... i didn't wanted to be visible like other categories, so i turned "Is active" option to off.

Then i created "banner.phtml" file in "template/custom_blocks" directory and used following code in home page located in administration under "CMS/pages"

{{block type="catalog/product_list" category_id="9" template="custom_blocks/banner.phtml"}}
// 9 is my banner category id

To display banners in banner.phtml i used this code: (products = banners)

<?$_productCollection=$this->getLoadedProductCollection();?>

in this way you get all products, and to display then you can use simple foreach:

<?foreach($_productCollection as $_product){ ... }?>

Now i have my block in wich i load the category i need and i display it on front page.

Where here is my final code (explanation is bellow):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<?$_productCollection=$this->getLoadedProductCollection();?>
<?if($_productCollection->count()){?>	
<script type="text/javascript">
   document.observe("dom:loaded", function() {			
      $('link').onclick = function() { return false; };
      <?$i=0; foreach($_productCollection as $_product){ $i++;?>
         <?if($i==1){?>
            $('image').setStyle({'background':'url(<?=$this->helper('catalog/image')->init($_product, 'small_image')->resize(740, 192);?>)'});
            $('link').observe('click', function(){ location.href='<?=$_product->getData('url');?>'; });
         <?}?>
         $('show<?=$i;?>').onclick = function() { return false; };   
         $('show<?=$i;?>').observe('click', function(){
            $('image').setStyle({'background':'url(<?=$this->helper('catalog/image')->init($_product, 'small_image')->resize(740, 192);?>)'}); 
            $('link').observe('click', function(){ location.href='<?=$_product->getData('url');?>'; });
         });
      <?}?>
   });		
</script>
<div id="image">		
   <a href="#" id="link">&nbsp;</a>
   <ul>
      <?$i=0; foreach($_productCollection as $_product){ $i++;?>				
         <li><a href="#" id="show<?=$i;?>"><?=$i;?></a></li>
      <?}?>
      <li class="clear"></li>
    </ul>
</div>
<br />
<?}?>

Products i get with first line of code i display them using two foreach loops. First foreach is used to generate javascript and seccond to generate links to change banner.

HTML code from line 19 - 29:
div with id image is main holder wich displays current banner as background, first link with id "link" is used for current banner URL. Bottom UL holds links to change banners.

All images and logic is in javascript from line 3-19, all i had to do is to get image and url from each product. Line 7-10 is used to load first banner, line 12-15 is to load images wich are changed with buttons bellow.

Image you get in line 8 and 13, url you get in line 9 and 14. About URL, i don't remember if is by default, if is not you just create a new attribute with name url, set it to bi visible in procuct listing and get it with code "=$_product->getData('url');"

i used only default magento oprions: category + products + one attribute and prototype javascript ... that's all