Creating skeleton templates

The next step in creating our new Magento theme is to create skeleton templates for our design. Skeleton templates provide the overall page structure for our Magento themes.

For example, we might want three different views in our store:

  • Three columns, as shown in the previous screenshot
  • Two columns with a column to the right
  • Two columns with a column to the left

Tip

Some Magento "themers" may find it easier to design their theme and create a static XHTML/CSS version of it before getting to this stage.

These three different options for your store would be achieved by creating three separate skeleton templates, and changing which of these templates is assigned to each module or page within our store using layout. We will use our three-column design throughout our new theme to ensure simplicity while we create our Magento theme. Our theme's skeleton template will look like this: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body>
<div id="wrapper">
<?=$this->getChildHtml('header')?>
</div>
<div id="main">
<div id="content">
<?=$this->getChildHtml('content')?>
<div id="footer">
<?=$this->getChildHtml('footer')?>
</div><!--/footer-->
</div><!--/content-->
<div id="left">
<?=$this->getChildHtml('left')?>
</div><!--/promo-->
<div id="right">
<?=$this->getChildHtml('right')?>
</div><!--/column-->
</div><!--/main-->
<?php echo $this->getChildHtml('before_body_end') ?>
</div><!--/wrapper-->
<?php echo $this->getAbsoluteFooter() ?>
</body>
</html>

Note

before_body_end is content that can be defined in Magento's administration panel,under Configuration | Design(under theGeneral heading), and can be useful for inserting JavaScript such as that used for analytics in to your store.

We'll now save this skeleton template as default.pthml in the app/design/frontend/default/cheese2/template/page directory of our Magento installation, wheredefault is the name of the Magento interface we're using, and cheese2 is the name of our new Magento theme.

Tip

If this file already exists, then you will need to overwrite it, as it provides a default page template for our Magento theme.

getChildHtml

The getChildHtml method used above inserts the relevant structural blocks in to the page. The value passed as a parameter to the getChild.Html method is the way in which each structural block is identified in the Magento layout files. Take this as an example: 

<?=$this->getChildHtml('footer')?>

The value footer is passed as the parameter for the getChildHtml method, which references the footer.phtml template block in the app/design/frontend/default/cheese2 /template/page/html directory.

Assigning the skeleton template

We need to assign our new skeleton template to our Magento theme. We'll do this by opening the page.xml layout file in the app/design/frontend/default/cheese2/layout directory of our Magento store's installation, and change the template value to page/default.phtml. 

<layout version="0.1.0">
<default>
<block type="page/html" name="root" output="toHtml" template="page/default.phtml">
<!—layout continues -->

When the skeleton template is complete, we can begin to create blocks to populate content within the skeleton template.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset