Adding a static block to a template using layout files

Static blocks are a means of allowing store owners to modify the text displayed in sections of a page from the admin site. For example, a static block can be added to the header to show seasonal promotions.

Static blocks can be added to templates through the use of layout files.

Adding a static block reference to the template layout file

Magento makes use of layout files to create a hierarchy of the template files and objects they use.

Let’s take the example mentioned in the introduction and add a static block in the header to show seasonal promotions.

We start by adding the block to the layout file. To do this we modify the file page.xml file located under the app/design/frontend/<theme folder>/layout folder.

<block type="page/html_header" name="header" as="header">

    <block type="core/text_list" name="top.menu" as="topMenu"/>

    <block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>

    <block type="page/template_links" name="top.links" as="topLinks"/>

    <block type="page/html_wrapper" name="top.bar" as="topBar" translate="label">

        <action method="setElementClass"><value>top-bar</value></action>

        <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/>

```
    </block>
```

    <block type="page/html_wrapper" name="top.container" as="topContainer" translate="label">

```
        <label>Page Header</label>
```

        <action method="setElementClass"><value>top-container</value></action>

```
    </block>
```

    <!-- Reference to our seasonal promotions static block -->

    <block type="cms/block" name="headerPromotions">

        <action method=”setBlockId”><block_id>header-promotion</block_id></action>

```
    </block>
```
```
</block>
```

Before moving to actually rendering the block, let’s stop a minute and understand what’s going on in the layout file. The external block defines a new section of the page named “header”. The header block is then divided into a number of sections, which are constructed using different templates and further blocks. To add our block we create a new block section inside the external block. For this article’s example we named our block “headerPromotions”. Block names are used within templates as reference to the block. The second attribute specified is the type of the block. In our example we used the type “cms/block”, which instructs Magento that the newly added block is a CMS object.

Within our block tag we have added an action tag. Action tags within a block instructs Magento layout engine to perform a method call on the block instance. The method called is defined through the method attribute. In our example we instructed Magento to set the block id to the value of “header-promotion”. Note that we used the name assigned to the static block we created earlier.

Therefore combining all this information, in our example we are instructing Magento to create a new CMS block instance with the content of the static block “header-promotion”.

Now that we have the layout file set up, we can proceed with updating the template. The header template is defined in the file header.phtml that is located in the folder app/design/frontend/<theme>/template/page/html. We will display our promotional block below the breadcrumbs. From the page.xml header block we can determine that calling the top.bar block renders the breadcrumbs. Therefore we will place a call to our static block below the rendering of the top.bar. To render the static block we call the method getChildHtml() method. The getChildHtml() method analyses the layout file and determines which block to be rendered. Since we set the block Id to be our static block, the static block contents will get rendered.

```
<div class="header-container">
```
```
    <div class="header">
```

        <?php if ($this->getIsHomePage()):?>

        <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>

```
        <?php else:?>
```

        <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>

```
        <?php endif?>
```

        <p class="top-promo" title="<?php echo $this->__('Free Shipping on orders over 50$'); ?>"><?php echo $this->__('Free Shipping on orders over 50$'); ?></p>

        <?php echo $this->getChildHtml('topMenu') ?>

```
    </div>
```
```
    <div class="quick-access">
```

        <?php echo $this->getChildHtml('store_language') ?>

        <p class="welcome-msg"><?php echo $this->getWelcome()?></p>

        <?php echo $this->getChildHtml('topLinks') ?>

```
    </div>
```

    <?php echo $this->getChildHtml('topBar');

          /* Display the static block */

          echo $this->getChildHtml('headerPromotions'); ?>

    <?php echo $this->getChildHtml('topContainer'); ?>

```
</div>
```

Now whenever we want to display a seasonal promotion we define a static block with the identifier “header-promotion”. Once the block exists in CMS it will be rendered below the breadcrumbs section, as in the image below.

Fig 1: Promotional banner in header section

References

Magento Screencast: Static Blocks
Inchoo: Add New Reference in Magento

Clounce.com

An innovative view into technology

Adding a static block to a template using layout files

Adding a static block reference to the template layout file

References