Brad Frost Web

Magento Static Block

There’s more than one way to skin a hippo and adding CMS static blocks in Magento is no exception.

In case you’re unfamiliar with CMS static blocks, they are powerful little buggers in Magento’s admin that allows the site’s administrator to add and control chunks of HTML that can be displayed throughout the site. They’re 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

1. Log into your Magento store’s admin
2. Navigate to CMS>Static Blocks
3. Click Add New Block in the top right corner
4. Give your block a recognizable Block Title such as Social Media Links or “Fall Sale Banner”
5. 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
6. Choose what store view the block belongs to. Just leave as All Store Views unless you have a good reason not to
7. Set Status to Enabled
8. 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 extention to help out.
9. 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:

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:

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.

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.

Do you have a preferred method of adding a static blocks or creative uses of static blocks in your Magento site? Let me know in the comments.