Tuesday, May 2, 2017

Simple random banner rotator in Magento using static blocks

This is not slider. This is simple image rotator. Every refresh make image changed in page.

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. (you have to create folder  "callouts")
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.
UPDATE:
If you want this to work for specific page such as homepage do this:
Instead of here /app/design/frontend/YOUR_INTERFACE/YOUR_THEME/layout/cms.xml
put this:

<reference code="content">
<block type="core/template" name="home.banner.rotator" template="callouts/banner_rotator.phtml"/>
</reference>
 
 
or put this code

{{block type="core/template" name="home.banner.rotator" template="callouts/banner_rotator.phtml"}}
 
into your Admin panel’s CMS->Pages->Your page->Design->Layout Update XML field
Everything else is the same…

No comments:

Post a Comment