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.
3. Describe layout fallback
We have the following files:
- app/design/frontend/magestore/cutepet/catalog/template/product/view.phtml
- app/design/frontend/magestore/default/catalog/template/product/view.phtml
- app/design/frontend/base/default/catalog/template/product/view.phtml
- app/design/frontend/default/default/catalog/template/product/view.phtml
- 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:
- Custom Theme Development In Magento 2
- Use Custom JavaScript in Magento 2
- Configure JavaScript resources in Magento 2
- Create Your Custom Theme In Magento 2 (Part-1)
- Display product prices in the catalog with and without tax in Magento
- Design magento to increase conversion rate!
- How to change logo in magento?
- How to edit footer links in magento?
- How to turn on template path hints in magento?
- Magento Design and Content Overview
Bookmarks