Magento Expert Forum - Improve your Magento experience

Results 1 to 9 of 9

Magento template design and development - Part 2 - Layouts

  1. #1
    Junior Member jaredovi's Avatar
    Join Date
    Mar 2013
    Posts
    69
    Thanks
    2
    Thanked 11 Times in 8 Posts

    Post Magento template design and development - Part 2 - Layouts

    Magento layouts are very important for theme development. Layout are xml files located in your theme/layout folder. Layout are very power magento tools, initially tricky to understand but once you get familiar, it becomes very powerful tool. As the name suggests, layout files are responsible for setting positions of various elements on the page and determining which phtml is loaded on which page and placed where.

    Layout Basics

    Layout files are located in your theme inside the layout folder. catalog.xml, page.xml , checkout.xml ,etc are layout files.

    Magento uses 3 things to display its pages

    1. Block Classes
    2. PHTML files
    3. Layout XML


    Magento is based on MVC architecture. PHTML file contain all html(view) codes and Block classes contain all view related logic. Layout XML are the ones that relate block classes and phtml files, and define which phtml file will be used on which page and at which location.
    When a page is loaded in magento, it read all the magento layout xml files in your theme, combines it and then processes it to create the view of a page.

    Now we will look into the details of layout xml files

    Block Basics

    Layouts are basically xml files, which are divided into blocks and xml tags. Lets start of by taking an example, open the layout file catalog.xml

    A basic layout block looks like

    HTML Code:
    <block type="catalog/navigation" name="catalog.topnav" template="catalog/navigation/top.phtml"/><br />
    Here

    1. type = magento php file where all functions used in top.phtml are location. This the block class. For eg. In the current case it is Mage_Catalog_Block_Navigation
    2. name = any unique name given for the block
    3. template = path of the phtml file used


    In the template file, we using various php function $this object. The $this object is basically the object of the block type we defined. To see the significance of block type , open the file catalog/navigation/top.phtml

    There you will find a code

    PHP Code:
    <?php $_menu $this->renderCategoriesMenuHtml(0,'level-top'?>
    So the function $this->renderCategoriesMenuHtml is a class function, which is defined in class Mage_Catalog_Block_Navigation located at app/core/Mage/Catalog/Block/Navigation.php. So if block type is wrong, then a block doesn’t work.

    Child Blocks

    Put one block tag inside another to make a child block for e.g

    HTML Code:
    <block type='core/template' name='parent' template='parent.phtml'/>
         <block type='core/template' name='child' template='child.phtml'/>
    </block>
    In the phtml file parent.phtml you can access the child block by

    PHP Code:
    echo $this->getChildHtml(‘child'); 
    $this->getChildHtml function is used in various phtml in magento. It is basically used to the get the content of the its child block. Making child blocks, divides your view logic into separate files, and make reading of code simpler.

    Default Tag and URL Tags

    Another important aspect of layouts is how does magento to know which block to read for a particular page. For example, when opening home page, how does magneto know which blocks to display.

    If you see layout files, all block declarations are placed in parent tags like

    HTML Code:
    <default>
    </default>
    <checkout_cart_index>
    </checkout_cart_index>
    The default tag means, all blocks inside this tag are to be shown in all the pages. So blocks like header, footer, menu etc are placed inside tag, so that they are shown in all pages.

    Other tags like , are used to display block specific to pages. Like if we want to place a block on the cart page or product page then we use such tags. These tags are based on the URLs on the page.

    Each url inside magento is broken down into 3 parts

    modulename_controllername_actionname

    For example

    1. Customer login page url is: http://www.youtmagento.com/index.php.../account/login
    2. Checkout page url is: http://www.youtmagento.com/index.php.../onepage/index


    So the layout tag for login page would be <customer_account_login> and that for checkout page is <checkout_onepage_index>. Inside the layout files you will xml tags like <customer_account_login> and <checkout_onepage_index>,this is to specific, that block inside such tags are read on those pages and not other pages.

    The Root Block and Default Root Templates

    Magento default theme has 5 different type of page structures. These are 1column layout, 2 column left , 2 column right ,3 column layout and empty layout. If you open the files of your theme ‘page/1column.phtml’ , ‘page/2columns-left.php’, ‘page/2columns-right.php’, etc you will see HTML skeleton structure which has divided the page into header, footer, left column, right column, main body etc, these files make the basic skeleton of the pages in magento. You will find many $this->getChildHtml function in these templates.

    The block xml tags for these pages are defined in page.xml with names

    page.xml layout file, also contains an important block i.e the root block. This block is defined inside the tag as

    HTML Code:
    <block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">
    The root block is like the top most parent block, this block defines the structure of a page and all other block comes as children of the root block.

    So, suppose if you want to set the structure of a page as 3columns, the do the below inside the page’s url tag.

    HTML Code:
    <reference name="root">
    <action method="setTemplate"><template>page/3columns.phtml</template></action>
    </reference>
    Basically, this calls a function setTemplate in the root block. For example if you want the magento login page to have 3column layout. Then you need to do this

    HTML Code:
    <customer_account_login>
      <reference name="root">
         <action method="setTemplate">
               <template>page/3columns.phtml</template>      
         </action>
      </reference>
    </customer_account_login>
    There are few blocks which are important in magento and widely used. For example, the content block, left, right, head (these are block name), all these blocks are defined in page.xml.

    Content block is used to display the main content area. Left and Right are used in 1column-left layout and 1column-right layout respectively. Head is used to add css, javascript and other html tag related work.

    The important thing to know about these blocks is that, which ever child you add to these block, they automatically get displayed in them. You don’t need to call getChildHtml(‘childname’); ?> for these blocks.

    Reference Basics

    As we know magento layout is divided in many xml files. But there are many blocks that we want to use, lets say in catalog.xml but it is are defined in a different file like page.xml. For example the head, content, root block are all defined in page.xml but we want to use them in other layout files as well.

    To do this, magento has setup the reference tag. Using this tag, we can take a reference of another block and add child elements to it or do other operations on it. For example, if I want to add a block in the left column, from the catalog.xml file. I will take reference of block left, and add a child block to it.

    HTML Code:
    <reference name='left'>
        <block type='core/template' template='catalog/test.phtml' />
    </reference>
    So, taken reference can be correlated, to make a copy of that block in your own xml file and doing operations on it.

    Adding Javascript and CSS using layout xml

    If you want to add javascript or css to a specific page, say you want to add it to customer login page, then this would be the way to do it.

    HTML Code:
    <customer_account_login>
     <reference name='head'>
      <action method="addCss"><stylesheet>css/styles.css</stylesheet></action>
      <action method="addJs"><script>varien/js.js</script></action>
     </reference>
    </customer_account_login>
    You can many other ways to add js and css files in page.xml layout file.

    View more threads in the same category:


  2. #2
    Junior Member
    Join Date
    May 2013
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    These steps will help in building magento theme by designing layout.

  3. #3
    Junior Member Kathy Daunt's Avatar
    Join Date
    May 2013
    Posts
    69
    Thanks
    10
    Thanked 4 Times in 4 Posts

    Default

    Thanks for sharing. Post is useful for me.

  4. #4
    Junior Member Kathy Daunt's Avatar
    Join Date
    May 2013
    Posts
    69
    Thanks
    10
    Thanked 4 Times in 4 Posts

    Default

    Really post helped me a lot. Because referred this post for Magento template development. Recently developed this template:http://www.apptha.com/category/theme...ectronic-store

    Thanks

  5. #5
    New member
    Join Date
    Dec 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    paypal advance and chronopay are the safest 642-447 exam
    payment gateways supported in europe countries especially in denmark.

  6. #6
    Junior Member Gowebbaby's Avatar
    Join Date
    May 2014
    Location
    700 LOWER STATE RD, 19B3 NORTH WALES, PA 19454
    Posts
    42
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    Name:  magento-logo-300x127.png
Views: 119
Size:  12.5 KB

    Gowebbaby has a team of Expert Magento Developers and we design custom Magento templates for our customers. We make sure to deliver perfect eCommerce store to get relevant traffic and good sales. Below are some features we include in Magento Store Design -

    Custom Magento Ecommerce Website Template
    Mobile Optimized Store
    Responsive Website Design
    Integration with payment gateway like Paypal, Sage Pay, Authorize.net etc.
    Integration with UPS/USPS/ FEDEX etc.
    Setup inventory
    Synchronization of Amazon/EBAY with Magento Store
    CMS to manage all products and content easily from dashboard
    SEO Optimized Store
    Google Analytic and Webmaster Integration
    Complete Magento Documentation for future use

    - See more at:Magento Ecommerce Website Templates Design – 2015

  7. #7
    Junior Member Cms_ideas's Avatar
    Join Date
    Jun 2014
    Location
    https://cmsideas.net
    Posts
    380
    Thanks
    1
    Thanked 7 Times in 7 Posts

    Default

    Thanks for sharing. Post is useful for me

  8. #8
    Junior Member
    Join Date
    May 2015
    Posts
    50
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    thanks for your wonderfull post its really help to me, i have plan to develop a magento module, your inforamtion give basic knowlegde to me

  9. #9
    Junior Member
    Join Date
    Jun 2015
    Posts
    607
    Thanks
    0
    Thanked 8 Times in 8 Posts

    Default

    Thank for sharing. It is so useful for me

Similar Threads

  1. Magento template design and development - Part 1 - Introduction
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 7
    Last Post: 08-08-2016, 03:43 AM
  2. Magento template design and development - Part 3 - Advanced Layouts
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 4
    Last Post: 22-07-2016, 11:48 AM
  3. Replies: 1
    Last Post: 18-03-2015, 09:09 AM
  4. How I can get started with magento template design?
    By phuc2x in forum HTML, XHTML, CSS, Design Questions
    Replies: 5
    Last Post: 04-03-2014, 11:17 AM
  5. Magento Module Development - Part 4 - Database and SQL
    By rocker in forum Programming & Development
    Replies: 0
    Last Post: 29-04-2013, 03:17 AM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •