Creative use of Static Block

The power of Static Block and how to use it for your Magento design

Of all Magento features, what we like most is the static block, we guess the reason is because we are Magento theme developer therefor we spend a great deal of time contemplating design and layout, and we think hard to always creating Magento theme that gives users more power and flexibility to maintain their Magento stores from the Magento Admin Panel.

There are two ways to call a static block, one is to call the Block ID in XML file and the other is directly call it in any of the PHTML template. In this article we showed you how to do that in the XML file, now we will show you how to do it directly in any of the PHTML template, and you should always use this method as it offers more flexibility.

The most commonly used method for a static block is add a CMS pages menu link, or a callout on the side column like so:

<ul>
<li><a href="{{store url=""}}">About Us</a></li>
<li class="last"><a href="{{store url=""}}">Customer Service</a></li>
</ul>

<div class="sidebox">
<p>You can put your extra content in here</p>
<img src="{{skin url='images/media/callout2.png'}}" width="182" alt="callout block" />
</div>

Basically it’s just HTML markup with Magento variable. Nothing fancy right?

Creative use of static blocks to create a more engaging layout

Example 1: Static Blocks in the new.phtml file for homepage

We wanted a more engaging homepage using one column layout with the ability to display side column’s items that you see in inner pages, and we wanted to add a New Release block just for the homepage. There are different way to achieve this, e.g, serve the same layout like other pages and serve different CSS elements for left/right columns just for the homepage, in some cases this approach works better but we wanted a layout for homepage that is more expandable-friendliness should we decided to add more content below the fold, and because the New Product code is already existed in the default new.phtml template hence we decided the Static Block approach is better.

The homepage in Magento uses new.phtml template located in “template/catalog/product/”; in the default Magento theme it shows a whole chunk of New Products code. Like any other template, you can insert as many Static Blocks as you see fit in this template to give your homepage’s layout more juices and offer a more engaging layout like we do for our homepage.

<div id="main-col">
<!-- static block for Recent Blog Entries -->
   <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('wp-feed')->toHtml() ?>
   <!-- static block for Testimonials -->
  <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('testimonial-home')->toHtml() ?>
  <!-- New Products -->
  <div class="new_products">
   <h2>  <?php echo $this->__('New Releases') ?>
</h2>
    <?php if (($_products = $this->getProductCollection()) && $_products->getSize()): ?>
<ul>
<?php $i=0; foreach ($_products->getItems() as $_product): ?>
    <?php if ($i>1): continue; endif; ?>
		<li>
<a class="product-name" href="<?php echo $_product->getProductUrl() ?>">
                <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(105, 105); ?>" class="product-image" width="105" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" />
       <em><?php echo $this->htmlEscape($_product->getName()) ?></em> </a>
</li>
<?php $i++; endforeach; ?>
<?php for($i;$i%1!=0;$i++): ?>
<?php endfor ?>
   </ul>
        <?php endif; ?>
</div>
</div> <!-- main-col -->

In the above code we called the two static block IDs, and we placed the New Products code after them, we then created the two static blocks in Magneto Admin Panel > CMS > Static Blocks. For “Recent Blog Entries” we simply called the template for our WordPress RSS feed like so:

<div>{{block type="wpfeeds/wprss" name="wordpress.rss" template="wordpress_rss/rss.phtml"}}</div>

Note that we added an extraneous DIV tag to wrap around the block type code, the reason for this is because the TinyMCE editor will add a <p> tag as the editor basically treating content without HTML markup as a paragraph. A DIV tag will prevent this annoying behavior of TinyMCE and because DIV tag is a correct and semantic markup for such purpose while P tag is not.

For Testimonials block, it’s just a chunk of html markup.

<div class="sidebox">
<h2>Testimonials</h2>
<p>&ldquo;Dozens of customised themes for Magento have sprung up over recent months, but I was looking for something a cut above the average...&rdquo;  continue reading <a href="http://www.lotusseedsdesign.com/ministry-grounds-coffee">testimonial from Ministry Grounds Coffee</a>...</p>
<p>"Looking around the web for Magento Theme I was really impressed by the themes developed by lotusseeddesign.com. They looked much richer, nicer and more attractive than others... continue reading <a href="http://www.lotusseedsdesign.com/beters">testimonial from beters.nl</a>...</p>
</div>

We are done and we have an engaging homepage to show to our visitors. Simple isn’t that? We can actually use one Static block instead of two, and place the Testimonials’ markup right below the “Recent Blog Entries” code, we didn’t do that because the content for Testimonials section maybe re-used in other CMS pages—this is the consideration that you should plan ahead if you are a web developer doing the layout; furthermore, breaking sections in a page into different static blocks may make page maintenance and content editing less daunting for your clients and decrease chance for them to mess up the code if raw html markup is needed in the static block.

Example 2: Use Static block to call a promotional product in a product page.

Say, your client wants a promotional or random product displays in a product page somewhere around image gallery or product description area. A static block will come in handy with such purpose calling the random product template.

To do so we actually have to create a new template, and we need to place this template inside “template/catalog/product/”. A random product code may look like so:

<?php $_productCollection=$this->getLoadedProductCollection() ?>
<?php if($_productCollection->count()): ?>
<div class="sidebox" id="random">
<?php $_items = $_productCollection->getItems(); ?>
<?php shuffle($_items); ?>
<?php $_collectionSize = 1 ?>
    <?php $_columnCount = 1; ?>
    <?php $i=0; foreach ($_items as $_product): ?>
    <?php if ($i++%$_columnCount==0): ?>
       <h6><?php echo $this->htmlEscape($_product->getName()) ?></h6>
      <a href="<?php echo $_product->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(125); ?>" width="125" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>
   <?php echo $this->getPriceHtml($_product, true) ?>
            <?php if($_product->isSaleable()): ?>
           <?php else: ?>
         <p class="out-of-stock"><?php echo $this->__('Out of stock') ?></p>
            <?php endif; ?>
  <?php endif ?>
    <?php if($i==1): ?>
        <?php break; ?>
    <?php endif; ?>
    <?php endforeach ?>
</div>
<?php endif; ?>

Now we need to call the Block ID in “template/catalog/product/view.phtml” and place it somewhere where you want the Random product shows up; we then proceed to creating a new static block in the Magneto Admin Panel > CMS > Static Blocks just like we did in Example 1 above and call the random template using block type code.

   <!-- static block for Random product -->
  <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('random')->toHtml() ?>

<!-- static block for random product in a product view page -->
  <div><div>{{block type="catalog/product_list_random" name="product_random" template="catalog/product/random.phtml}}</div></div>

Here we did a quick example based on the above code so that you can see it in action. The code had been deleted from our site but you can see the screenshot below.

If you find this article useful, please share it, dig it or tweet it.