Create your own page with your own layout and template files in Magento

Hello again, today we are going to talk about how we can create our own page in magento with layout and template files. But before that let’s talk about layout in magento, layout is a component which contains handles, blocks and actions. This is the file where we define which blocks will come in header, footer, left, right and main content.

Let’s talk about handles first, there are only two types of handle in magento and they are default and update handles. Default handles are there in the most of the layout files and we use them when we want to add something to every page of our site where update handles only show on specific custom page, store and theme. Let’s talk about them one at a time -:

CUSTOM HANDLES

The customer handles are created by combining the following the route name which we define in config.xml for frontend controller, action controller name which the name of the controller file, and action controller’s action method which action of the controller file.

Let’s have a look at magento’s contact us module especially contacts.xml in layout folder and you will notice contact_index_index handle where contact is the route name (contact) which can find in \Mage\Contacts\etc\config.xml under frontend\routers\, index is a action controller name (index) which is \Mage\Contacts\controllers\IndexController.php, and the last index is Action Controller Action Method (index) which is a method in the controller file \Mage\Contacts\controllers\IndexController.php.

STORE HANDLES

Store handles which you can put it to render block only for specific store, for example you have three stores English, French and German. And if you want to render block only for English store then you can add the following STORE_<STORE_CODE> as handle in your layout xml file and it will only render for english store only.

THEME HANDLES

Theme handles which you can put it to render block only for specific theme, for example you have two themes (theme_1 and theme_2) for product page and they only change colour scheme for the product page. And now you want to render an additional block only for theme_1 then you can add the following THEME_<DESIGN_AREA>_<PACKAGE_NAME>_<THEME_NAME> as handle in your layout xml file and it will only render for particular theme. For example -: THEME_frontend_default_default

Here is the order in which magento loads the layout handles -:

• Default or Custom
• Store
• Theme
• Custom

For more information, you can check loadLayout function which can be found here -: \Mage\Core\Controller\Varien\Action.php

Please note default handle can be replaced by passing custom handle in loadLayout function as a parameter. Check out the following line in loadLayout function -:

$this->getLayout()->getUpdate()->addHandle($handles ? $handles : 'default');

Hope you guys now have some idea about how layout works with the layout xml files. Now let’s start with our custom page using our step by step implementation -:

Step 1 – Create a new module under your local folder, in our case under \app\local\Scommerce\Enquiry.

Step 2 – Register the module in etc\modules directory either in Scommerce_All.xml or Scommerce_Equiry.xml by using the following code -:

<Scommerce_Sales>
    <active>true</active>
    <codePool>local</codePool>
</Scommerce_Sales>

Step 3 – Create config.xml under etc directory of your module \app\local\Scommerce\Enquiry\etc\config.xml by using the following code

<config>
    <modules>
        <Scommerce_Enquiry>
             <version>0.0.1</version>
        </Scommerce_Enquiry>
    </modules>
    <global>
       <blocks>
          <enquiry>
            <class>Scommerce_Enquiry_Block</class>
          </enquiry>
       </blocks>
    </global>
    <frontend>
         <routers>
            <enquiry>
                <use>standard</use>
                <args>
                    <module>Scommerce_Enquiry</module>
                    <frontName>enquiry</frontName>
                </args>
            </enquiry>
        </routers>
        <layout>
            <updates>
                <enquiry>
                    <file>enquiry.xml</file>
                </enquiry>
            </updates>
        </layout>
    </frontend>
</config>

Step 4 – Create block in app\code\local\Scommerce\Enquiry\Block\Page.php using the following code-:

class Scommerce_Enquiry_Block_Page extends Mage_Core_Block_Template
{
protected function _construct()
{
parent::_construct();
$this->setTemplate('enquiry/page.phtml');
}
}

Step 5 – Create IndexController in app\code\local\Scommerce\Enquiry\IndexController.php using the following code-:

class Scommerce_Enquiry_IndexController
      extends Mage_Core_Controller_Front_Action
{
public function indexAction()
{
$this->loadLayout();
$this->renderLayout();
}
}

In the above step, please notice two functions LoadLayout which loads layout xml file and renderLayout renders the content on the page.

Step 6 – Now create enquiry.xml (this is the name we have given in step 2) file in \app\design\frontend\base\default\layout\enquiry.xml using the following code-:

<layout version="0.1.0">
    <default>
        <reference name="footer_links">
            <action method="addLink"
                       translate="label title"
                       module="enquiry">
               <label>Enquiry</label>
               <url>enquiry</url>
               <title>Enquiry</title>
            </action>
        </reference>
    </default>

    <enquiry_index_index translate="label">
        <label>Enquiry</label>
        <reference name="breadcrumbs">
            <action method="addCrumb">
                <crumbName>Home</crumbName>
                <crumbInfo>
                  <label>Home</label>
                  <title>Home</title>
                  <link>/</link>
                </crumbInfo>
            </action>
            <action method="addCrumb">
                <crumbName>Enquiry</crumbName>
                <crumbInfo>
                   <label>Enquiry</label>
                   <title>Enquiry</title>
                </crumbInfo>
            </action>
        </reference>
        <reference name="content">
            <block type="enquiry/page" name="enquiry"
                      template="enquiry/page.phtml"/>
        </reference>
    </enquiry_index_index>
</layout>

Please note, we have two handles here default and custom handle (route_controller_action). You can relate this what we discussed in the beginning.

Step 7 – Let’s create our main phtml file in \app\design\frontend\base\default\template\enquiry\page.phtml using the following code -:

<div>
    <h1>Our first own page block, wow!!!!!!!!!</h1>
</div>

That’s it, it is as simple as that. Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.