Magento Expert Forum - Improve your Magento experience

Results 1 to 11 of 11

Magento template design and development - Part 2 - Layouts

  1. #1
    Junior Member jaredovi's Avatar
    Join Date
    Mar 2013
    Posts
    68
    Thanks
    2
    Thanked 12 Times in 9 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 doesnt 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 pages 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 dont 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: 128
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
    385
    Thanks
    1
    Thanked 7 Times in 7 Posts

    Default

    Thanks for sharing. Post is useful for me
    ONLY $199 to become a member of Cmsideas's 3-month membership programto:
    - Free download all extensions and themes for Magento and WordPress
    - Upgrade with $0
    - Free support for technical issues
    Best Magento Extensions | Best Magento 2 Extensions

  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
    927
    Thanks
    0
    Thanked 9 Times in 9 Posts

    Default

    Thank for sharing. It is so useful for me

  10. #10
    Junior Member
    Join Date
    Sep 2018
    Location
    United Kingdom
    Posts
    163
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Configuring images.
    Declaring logo.
    Configuring image properties.
    Styling and Editing & Overriding templates.
    Locate layouts, templates, and styles.

  11. #11
    New member
    Join Date
    Jun 2019
    Location
    Spain
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Order Original EU Passport, Get Real EU Documents, Obtain Registered EU ID card

    w w w. fakepassportonline.cc - the authentic registered and unregistered documents provider. We produce real and fake passport, drivers license, stamps, visa id cards, IELTS Certificates, novelty documents, counterfeit identity card, identification documents, drivers license, SSN card for different countires: USA, Italy, Australia, Belgium, Brazil, Canada, Finland, France, Germany, Netherlands,Spain, United Kingdom, Malaysia, Norway, Switzerland. We process only high quality full citizenship documents.

    Buy high quality real fake passports from w w w. fakepassportonline.cc and expand new rights and freedom. A second real passports opens doors offshore otherwise closed to many countries citizens. Best of all, dual citizenship and a second passports can be new key to reduced taxes and increased asset protection and it could even protect new life. For a citizen of a totalitarian country or one that holds a passport with poor visa-free travel it means complete freedom of movement along with the right to live and work in a normal developed society.

    We produce real and novelty documents of all types. All of our products are printed on high-quality printing machines, they have valid holograms, secret features, and have been passed under UV light and other verification equipment. Rest assured that new documents are 100% real and registered.

    To get the more information and make the orders, please use our website:


    w w w. fakepassportonline.cc w w w. fakepassportonline.cc


    Keywords:
    ---------

    Buy and renew documents online
    Buy genuine EU Passports
    Buy real and fake passports online
    Buy real registered passports online,
    Buy real registered drivers license online
    Buy real and fake drivers license
    Buy quality and legit passports,
    Buy real ID cards online
    Buy real and fake drivers license online,
    Buy fake residence permit online
    Buy real Visa online
    Apply for EU citizenship
    Apply for UK citizenship
    Apply for European citizenship
    renew US passports online
    renew US Id card online
    renew US driver license online
    buy real eu passport,
    buy real diplomatic passport,
    buy US passport online,
    buy real USA visa online,
    real british passport,
    real canadian passport,
    real french passport,
    real american passport,
    real japanesse passport,
    Fake drivers license,
    Fake i.d cards,
    Fake birth certifates,
    Fake certificates,
    Fake visas,
    registered and unregistered british passport,
    registered and unregistered cananian passport,
    registered and unregistered french passport,
    registered and unregistered american passport,
    registered and unregistered passport online,
    registered and unregistered germany passport,
    registered and unregistered passport for countries in the european union,
    fake documents generator
    fake documents free
    fake documents service
    fake documents maker
    fake documents for paypal
    fake documents immigration
    fake documents dark web
    fake documents online
    fake documents australia
    fake documents app
    fake documents at airport
    fake address documents
    fake army documents
    fake australian documents
    fake asylum documents
    fake admission documents
    a fake miscarriage documents
    get a fake documents
    fake of documents
    real and fake documents for sale
    real and fake documents
    fake and forged documents
    how to make a fake documents
    fake documents bangkok
    fake documents buy
    fake documents bangladesh
    fake documents book
    fake bank documents
    fake documents philippines
    fake documents.com
    fake documents creator
    fake documents canada
    fake documents china
    fake documents charges
    fake documents certificates
    fake documents download
    fake documents detector
    fake documents diploma
    fake doctor documents
    fake divorce documents
    fake dna documents
    fake degree documents
    fake educational documents
    fake experience documents
    fake employment documents
    fake real estate documents
    edit fake documents
    ebay fake documents
    fake documents en espanol
    e verify fake documents
    fake documents for us visa
    fake gold documents
    fake government documents
    fake gold documents from ghana
    fake gcse documents
    fake legal documents generator
    get fake documents
    fake healthcare documents
    fake documents for home loan
    fake documents in court
    fake documents ipc
    fake documents in uae
    fake documents in recto
    fake documents ireland
    fake documents in qatar
    i need fake documents
    i-9 fake documents
    how to fake documents
    fake documents job
    fake documents legal
    fake kyc documents
    katyn fake documents
    fake documents law in pakistan
    fake documents law philippines
    fake documents law
    fake documents letter
    fake loan documents
    fake legal documents
    fake legal documents for fun
    fake lawyer documents
    fake documents malaysia
    fake documents meaning
    fake documents maker philippines
    fake documents manila
    fake documents maker in mambai
    fake documents military
    fake documents nigeria
    fake documents nepal
    fake documents asian
    fake novelty documents
    fake nnpc documents
    fake doctors note documents
    need fake documents
    nrc fake documents
    fake documents online free
    make fake documents online free
    make fake documents online
    fake ielts documents online
    fake documents online
    fake documents pdf
    fake documents paypal
    fake documents punishment india
    fake documents punishment in pakistan
    fake documents philippines
    fake documents psd
    fake documents passport
    fake documents registration
    fake Denmark documents
    fake residency documents
    fake real documents
    fake std results documents
    fake documents sites
    fake documents saudi
    fake documents status
    fake scanned document
    fake school documents
    fake shipping documents
    fake documents templates
    fake documents thailand
    fake tax documents
    fake documents uk
    fake documents us
    fake insurance documents uk
    fake id documents uk
    fake documents visa
    fake verification documents
    fake british documents
    fake documents for sale
    how to fake documents
    How to make fake documents

    To get the more information and make the orders, please use our website:


    w w w. fakepassportonline.cc w w w. fakepassportonline.cc

Similar Threads

  1. How I can get started with magento template design?
    By phuc2x in forum HTML, XHTML, CSS, Design Questions
    Replies: 8
    Last Post: 29-05-2019, 06:14 AM
  2. Magento template design and development - Part 1 - Introduction
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 10
    Last Post: 12-03-2019, 05:43 AM
  3. Magento template design and development - Part 3 - Advanced Layouts
    By jaredovi in forum Template, Design, HTML, CSS, Javascript
    Replies: 5
    Last Post: 06-12-2018, 10:10 AM
  4. Magento Module Development - Part 4 - Database and SQL
    By rocker in forum Programming & Development
    Replies: 2
    Last Post: 14-08-2018, 11:38 AM
  5. Replies: 1
    Last Post: 18-03-2015, 08:09 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
  •