Magento Expert Forum - Improve your Magento experience
Design and layout initialization
As you may know, layout is built with a small set of XML tags that are simple and interesting to learn. By learning some key concepts and commands of layout, you will be soon be equipped with the sufficient knowledge to easily modify your store design to your desired specification.
1. Identify the steps in request flow in which
- Design data is populated
- Define the position of template files: block, layout, phtml
- Layout configuration files are parsed
- Layout is compiled
- Determine block and .phtml template file to get html string
- Translate that string
- Output is rendered
2.Describe the module layout XML schema
- Layout handles:
- Correspond with a layout page
- Based on the action controller (Module_Controller_Action). Example: category_product_list
- Layout handle is always called in any pages
- label: label of handles
- reference: is used to make reference to assigned block and adds child blocks or updates block. In order to make the reference, you must target the reference to a block by using the “name” attribute.
- block: is the definition of a new block in reference.
- name: shows the name of block (only in a page rendered).
- as: this is the block name. It is used to call blocks in file phtml (only in cha block).
- type: shows the block’s class name (core/template).
- If the type is type or subtype of core/template, blocks will assign “template” attribute to set template.
- remove: deletes an assigned block
- action: calls a mode (function) of instance. Action positions in references or blocks.
- update: loads a handle in a current handle. The handle inherits all handles loaded
- Block types:
- core/template: This block renders a template defined by its template attribute. The majority of blocks defined in the layout are of type or subtype of core/template.
- page/html: This is a subtype of core/template and defines the root block. All other blocks are child blocks of this block.
- page/html_header: Defines the header part of the page which contains the site logo, top links, etc.
- page/template_links: This block is used to create a list of links. Links visible in the footer and header area use this block type.
- core/text_list: Some blocks like content, left, right etc. are of type core/text_list. When these blocks are rendered, all their child blocks are rendered automatically without the need to call thegetChildHtml() method.
- page/html_wrapper: This block is used to create a wrapper block which renders its child blocks inside an HTML tag set by the action setHtmlTagName. The default tag is if no element is set.
- page/html_breadcrumbs: This block defines breadcrumbs on the page.
- page/html_footer: Defines the footer area of page which contains footer links, copyright message etc.
- core/messages: This block renders error/success/notice messages.
- page/switch: This block can be used for the language or store switcher.
3. Describe layout fallback
We have the following files:
- Base, Default, Magestore: are called package and contain many themes
- Default, cutepet: name of theme
- Base: is called the fall back package
When calling the file product/view.phtml, if the system doesn’t see this file in magestore/cutepet, it will find in magstore/default. The system will find in base/default if it also doesn’t see in magestore/default. In case the system cannot see the file anywhere, it will report the error.
4. Describe admin and frontend scopes
When creating a module, we will declare the scope of the layout file in file config.xml
- Layout in admin: use tab <adminhtml>
- Layout in frontend: use tab < frontend >
<layout> <updates> <module_name> <file>file_name.xml</file> </ module_name > </updates> </layout>
View more threads in the same category:
The Following 2 Users Say Thank You to rocker For This Useful Post:
david (02-04-2013),shunavi (29-03-2013)
It work but I think you should edit so it look nicer
It is really useful information about design & layout as many people get confused while doing this.
Thanks for sharing some good information regarding design & layout. Thanks for the nice input.
It is really nice information thank you for sharing. I am a designer and design recruitment websites for recruiters. But i never design in magento now I will definitely try it on.
It is really very nice, informative and useful share that really helps the people to design there website as they want.
It is really very nice, informative and useful share that really helps the people to design
pass4sure ccnp training
Thank you for sharing this useful article
Thanks for sharing the article.
It really informative and it's worked with my website. Thanks.
By david in forum Programming & Development
Last Post: 13-04-2016, 09:40 AM
By rocker in forum Programming & Development
Last Post: 22-04-2013, 07:31 AM
By david in forum Programming & Development
Last Post: 09-04-2013, 08:13 AM
Tags for this Thread