Magento Static Block:
There is more than one way to skin a hippo and adding CMS static blocks in Magento is no exception.
In case you are unfamiliar with CMS static blocks, they are powerful
little buggers in Magento’s admin that allows the site is the administrator
to add and control chunks of HTML that can be displayed throughout the
site. They are perfect for seasonal banners, sale blocks, return
policies, size charts, and anything that would make sense to modularize
to make maintaining your site easier.
But wait, aren’t there already ‘callouts’ in Magento? Well,
if you’re talking about those annoying graphics of the dog and chalkboard that take editing multiple files to update then yes. Magento’s built-in callouts are a terrible way of handling regularly updated content.
Your Magento website should be as updatable as possible to keep you from getting phone calls every time a client wants to advertise a new sale. Which is exactly why
we want to control these blocks from the admin. Keep in mind Magento’s upcoming release of 1.4 will be implementing a WYSIWIG editor so clients can handle their own changes instead of pestering you.
Creating a Static Block
- Log into your Magento store’s admin
- Navigate to CMS>Static Blocks
- Click Add New Block in the top right corner
- Give your block a recognizable Block Title such as Social Media Links or “Fall Sale Banner”
- Give your block an Identifier which will be used to
call the block. Make sure the Identifier is all lowercase and separated
by underscores to follow Magento’s nomenclature i.e. your_block_id
- Choose what store view the block belongs to. Just leave as All Store Views unless you have a good reason not to
- Set Status to Enabled
- Enter your HTML in the Content field. The editor is currently a raw HTML editor, but 1.4 will support a WYSIWIG editor. Alternately, there is a Magento WYSIWIG extension to help out.
- Click Save Block or Save and Continue Edit to save your settings.
You’ve set up your block, so how do you plug it into your site? Well
it depends on how you need it to function, but you have several options
at your disposal:
1. XML
Adding a static block to a page template is a great way to control global elements of your site, such as footer links, custom callouts in
the sidebar (ultimately replacing that damn dog) and more. You can
embed this code in
app > design > frontend > default > your_theme > layout. Open the appropriate the file, lets say
catalog.xml and plunk the following code in the
block for our category view:
<block type="cms/block" name="your_block_id" before="-">
<action method="setBlockId"><block_id>your_block_id</block_id>
</action>
</block>
This code will place the block “your_block_id” that you have created
in the admin above the content on the category pages (notice the
before=”-“
attribute, which makes sure your block gets displayed before the rest
of the content). This is perfect for a seasonal banner that could
advertise a current sale on all product listings.
Controlling static blocks with XML is geared for content that will remain in a consistent position in your theme.
Sometimes however you gotta get down and dirty and place your CMS
static block inline in your template. That’s where the next method
comes in.
2. PHP
Adding your static block inline with PHP is the quickest way to get
your block in your template. Let’s say you want to add a quick blurb
about your return policy right after the “Add to Cart” button. The
client needs to be able to occassionaly update this blurb from time to
keep it current. So you open your template file that contains the “Add
to Cart” button
app > design > frontend > default
> your_theme > template > catalog > product > view >
addtocart.phtml. Find the
<button> tag and right afterwards add the following code:
[cc lang="php" tab_size="2" lines="40"]
<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('your_block_id')->toHtml(); ?>
[/cc]
This code will add the block
“your_block_id” right after the
button. Jobs done. This method is perfect for getting into those nooks
and crannies in Magento’s vast and awkward file structure.
3. Shortcode
This method is used when you need to pull in a static block while in
Magento’s admin creating CMS pages or other static blocks. A possible
example would be injecting contact information into multiple CMS pages.
So you create a contact static block, and then can insert the contact
info on the contact us page, your privacy policy page, customer service
page, etc. If the contact info changes, you simply update the static
block and the changes will be reflected across all your CMS pages.
{{block type="cms/block" block_id="your_block_id"}}
This code will place the block “your_block_id” inline in your CMS page.
Conclusion
The whole idea of creating these static blocks is to streamline the
amount of time it takes to update your site. Clients won’t have to
bother you to change their 800 number. Your design team or site
administer can simply FTP a new image and update the image path. Or if
you own the site, you don’t have to go dumpster diving through your
template files to find where you put that couple paragraphs of content.
You can now go to the products section of the Magento administrator
backend and check the imported products. They will be present there and
assigned to the corresponding categories with the attributes you have
added for them.
Actually, magento has a fully-featured CMS system integrated in it.
Browse through the pages to see the different elements you can add to
your site.
