Simple random banner rotator in Magento using static blocks
This is my first post here and I’ll write about my first challenge regarding Magento since I came to work at Inchoo.
As title says I’ll show you how to implement simple random banner rotation functionality in Magento using static blocks.
First of all, upload images you want to use in “/skin/frontend/YOUR_INTERFACE/YOUR_THEME/images/”
In admin panel add N static blocks (”CMS->Static Blocks->Add new block”)
For identifier field use something like this:
SomeBannerIdentifierName_1 SomeBannerIdentifierName_2 SomeBannerIdentifierName_3 ... SomeBannerIdentifierName_N
For each content use this:
<a href="ADDRESS_YOU_WANT_TO_USE"><img src="{{skin url=images/media/IMAGE_YOU_WANT_TO_USE.jpg}}" alt="Some alt text" /></a>
Please note that you are not restricted only to images, you could use text, video or whatever you want here, but I’ll focus on images with links as title says.
Now when all is set, make new file called banner_rotator.phtml in “/app/design/frontend/YOUR_INTERFACE/YOUR_THEME/template/callouts/banner_rotator.phtml”
And use this code inside:
< ?php
echo $this->getLayout()->createBlock('cms/block')->setBlockId('SomeBannerIdentifierName_'.mt_rand(1, N))->toHtml() ?>
*Make sure you replace “N” with highest number of your static block
In order to show this block, you should be familiar with Magento layouts.
Since that is out of scope for this article, I’ll show you how to put it below the content on cms pages.
Open “/app/design/frontend/YOUR_INTERFACE/YOUR_THEME/layout/cms.xml”
[*] Put this line:
<block type="core/template" name="home.banner.rotator" template="callouts/banner_rotator.phtml"/>
Find this:
<cms_page> <reference name="content"> <block type="cms/page" name="cms_page"/> P U T [*] H E R E ! ! ! </reference> </cms_page>
Unfortunately I can’t be more specific so feel free to ask me anything.
By Tomas Novoselic from Inchoo.net
Related posts:
Leave your response!