Topic 2 – Part 6: 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

• Parse the layout file

– Layout is compiled

• Determine block and .phtml template file to get html string
• Translate that string

– Output is rendered

• Return html

2.Describe the module layout XML schema

– Layout:

– 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_head: Defines the HTML head section of the page which contains elements for including JavaScript, CSS etc.
• 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.

<layout>
     <updates>
          <module_name>
	         <file>file_name.xml</file>
          </ module_name >
     </updates>
</layout>