Skip to content
Magento Customization :”Layout” – A Virtual Component Of Magento Cart
Before arriving at Magento cart you have most probably worked with other e-commerce applications. You likely have a some sets of things which have turn 2nd nature to you at the time of developing a theme for your online store. Layout is built with a small set of XML tags that are easy and fun to learn.
1. Content Blocks
2. Structural Blocks
3. Layout
Layout, by visual aspect of its elements, can simply deceive you into believing which in order to work with it you must first be armed with an extensive knowledge of programming logic. By learning some key concepts as well as commands of layout, soon you will be equipped with the assurance and knowledge to easily modify your store design to your desired spec. Nothing can be further from the truth.
• How Layout Works
• Rules of XML
• Anatomy of Layout
How Layout Works
Layout is comprised of default layout and layout updates that are made up of easy-to-learn XML tags. Layout is a virtual component of the Magento application. With these layout commands, you can modify/assign content block-structural block relationships and also control store-front functionality such as loading and unloading of block. By changing the elements of layout, you can create your online-store page in an upgrade matched way. Layout files are detached on a per-module basis, each module conveyance with it, its own layout file.
These layout files are located in app/design/front-end/your_interface/your_theme/layout/ and each file is further separated by handles, each handle with exception of distributing its nested modifies according to specific page in an online-store. The system is built this way in order to allow seamless addition and removal of modules without effecting other modules in the system.
Anatomy of Layout
The best way to approach layout is to just dive right in and attack it from all angles. Layout contain a small set of XML tags that act as detailed instructions to the application on how to create a page, to build it with as also the behavior of each structure block. In order for you to do that, here are some behavioral properties of each layout XML tag. Handle is an identifier by which the application determines what to do with the updates nested by it. If Magento finds handles other than , it will assign the modifies nested internal handle to the reported page specified by the handle. If the name of the handle is , then the application knows that its nested modifies must be loaded on almost all the pages of the store prior to loading page-specific layout. Handles are set-in-stone identifiers that as a designer with no extensive understanding of Magento programming, should never need to modify. For example, contain the layout modifies for the Product View page, while contain those for the Compare Product page.
Block
The best way to distinguish between the two is by examining the behavior assigned to it via the tag attributes. Magento determines the behavior and visual representation of each building block of a page via the tag. A structural block usually contains the attribute ‘as’, through which the application is able to communicate with the designated area in a template. We’ve already mentioned the two types of blocks Magento employs – structural blocks and content blocks.
You will notice many occurrences of this ‘as’ attribute in the absence layout, because by nature the absence layout is one that creates the ground work upon which the particular page layouts can begin adding. Not to say these blocks cannot exist in normal layout modifies. Why not firstly fixed up the reoccurring composition blocks in the default layout, and then start adding content on a basis of per-page. Let’s site further into available concepts for . For example, in default layout, there are structural blocks such as ‘right’,’left’,’footer’ and ‘content’ being presented.
• Type – This attribute must not be modified. This is the symbol of the module form which defines the functionality of certain block.
• Name – The name by which any other blocks can make their reference to that particular block in which this concept is assigned.
• After And Before – These are the two ways to point a content block within a mixture block. After=”-” as well as Before =”-” are bids utilized to point the block accordingly at the very top or very bottom of a structural block.
• Template – This attribute determines the template that will represent the functionality of the block in which this attribute is assigned. In order to learn about how layout works with templates to bring markup to your online store, read Step by Step Guidebook to creating a Theme. For example, if this attributes is assigned ‘catalog/category/view.phtml’, the application will load the ‘app/design/frontend/template/category/view.phtml the template file.
• Action – A full list of action methods soon will become acquirable, but in the mean time the top-grade way to learn about the antithetic action methods is by playing around with them in the presently available layout modifies. This is used to power store-front functionality such as loading or unloading of a script.
• As – At the time you see the get Child Html(‘block_name’) PHP method called from a template, be certain that it is mentioning to the block whose dimension ‘as’ is assigned the name as ‘block_name’. This is the name by which a template calls the block in which this attribute is assigned.
Reference
In order to make the reference, you must target the reference to a block by using the ‘name’ attribute. is used to make reference to another block. This attribute targets the tag’s ‘name’ abstraction. If you were to form a reference by , you are marking the block known as .
XML Rules
The only set rule you need to remember with respects to XML, is that at a tag wide-open, it must be followed by a concluding tag() self-close() precisely as (X)HTML file tags. If you are not acquainted with it, upon combating Magento’s XML supported layout modifies. You must follow the rules when modifying an XML file.
Detached the SEO links at the footer area – As an alternative of having the link items to be one list, separate ‘Advanced Search’ to be in the header or else.
1. You will need the Template Path Hints turned on to see why this is obvious. You can make a measured hypothesis that the SEO links must be allotted somewhere in the layout under the footer block.
2. Open up layout/page.xml and look through the list of children under the footer block in order to locate a block that calls the footer links. Now that you know that layout updates reference the SEO links. You will find references for the footer_links block in catalog.xml (which calls ‘Site Map’), catalogsearch.xml(which calls ‘Search Terms’ and ‘Advanced Search’) and contacts.xml (which calls ‘Contact Us’).
3. Now that you’ve located the area of the single SEO link component part, now you will get down the steps to separate ‘Advanced Search’ from the crew and also make it it’s own thing in the header. You’ve made the layout updates to expect this link in header.phtml. First go back to page.xml and create a new block and nest it inside .
4. Now you have Advanced search in the header instead of the footer.
In the category page, move the “My Cart” box from the right column to the left
1. Turn on the Template Path Hint by going to the admin then navigating to System -> Configuration. Wait for the page to load up, then choice the Creator tab. Choice ‘Yes’ in the select box for Template Path Hints. Go back to the store front, as also load up. When you are in the design page, choice the store you are working in by using the top left website/online store picker.
2. When the page reloads, look at the template path of the ‘My Cart’ block-‘front-end/default/template/checkout/cart/side-bar.phtml’ it will most likely to say this . You know this template is being introduced via the ‘checkout’ module. The immediate directory name following ‘template’ is the name of the module through which a template is introduced.
3. Open up layout/checkout.xml
4. Load up the store front and you will now see the change indicated.
Layout is the instrument with which you can delegate content blocks to every structural block created. Layout subsists in the sort of XML text-file and by changing the layout you are able to relocate blocks around in a page as well as designate templates to the content blocks to produce markup for the structural blocks. Instead, your templates are managed on a per-functionality basis and you can load and unload functionality in your store page by the virtue of a couple of layout commands alone. You are able to modify the visual layout of every page in your store.
1. Content Blocks
2. Structural Blocks
3. Layout
Layout, by visual aspect of its elements, can simply deceive you into believing which in order to work with it you must first be armed with an extensive knowledge of programming logic. By learning some key concepts as well as commands of layout, soon you will be equipped with the assurance and knowledge to easily modify your store design to your desired spec. Nothing can be further from the truth.
• How Layout Works
• Rules of XML
• Anatomy of Layout
How Layout Works
Layout is comprised of default layout and layout updates that are made up of easy-to-learn XML tags. Layout is a virtual component of the Magento application. With these layout commands, you can modify/assign content block-structural block relationships and also control store-front functionality such as loading and unloading of block. By changing the elements of layout, you can create your online-store page in an upgrade matched way. Layout files are detached on a per-module basis, each module conveyance with it, its own layout file.
These layout files are located in app/design/front-end/your_interface/your_theme/layout/ and each file is further separated by handles, each handle with exception of distributing its nested modifies according to specific page in an online-store. The system is built this way in order to allow seamless addition and removal of modules without effecting other modules in the system.
Anatomy of Layout
The best way to approach layout is to just dive right in and attack it from all angles. Layout contain a small set of XML tags that act as detailed instructions to the application on how to create a page, to build it with as also the behavior of each structure block. In order for you to do that, here are some behavioral properties of each layout XML tag. Handle is an identifier by which the application determines what to do with the updates nested by it. If Magento finds handles other than , it will assign the modifies nested internal handle to the reported page specified by the handle. If the name of the handle is , then the application knows that its nested modifies must be loaded on almost all the pages of the store prior to loading page-specific layout. Handles are set-in-stone identifiers that as a designer with no extensive understanding of Magento programming, should never need to modify. For example, contain the layout modifies for the Product View page, while contain those for the Compare Product page.
Block
The best way to distinguish between the two is by examining the behavior assigned to it via the tag attributes. Magento determines the behavior and visual representation of each building block of a page via the tag. A structural block usually contains the attribute ‘as’, through which the application is able to communicate with the designated area in a template. We’ve already mentioned the two types of blocks Magento employs – structural blocks and content blocks.
You will notice many occurrences of this ‘as’ attribute in the absence layout, because by nature the absence layout is one that creates the ground work upon which the particular page layouts can begin adding. Not to say these blocks cannot exist in normal layout modifies. Why not firstly fixed up the reoccurring composition blocks in the default layout, and then start adding content on a basis of per-page. Let’s site further into available concepts for . For example, in default layout, there are structural blocks such as ‘right’,’left’,’footer’ and ‘content’ being presented.
• Type – This attribute must not be modified. This is the symbol of the module form which defines the functionality of certain block.
• Name – The name by which any other blocks can make their reference to that particular block in which this concept is assigned.
• After And Before – These are the two ways to point a content block within a mixture block. After=”-” as well as Before =”-” are bids utilized to point the block accordingly at the very top or very bottom of a structural block.
• Template – This attribute determines the template that will represent the functionality of the block in which this attribute is assigned. In order to learn about how layout works with templates to bring markup to your online store, read Step by Step Guidebook to creating a Theme. For example, if this attributes is assigned ‘catalog/category/view.phtml’, the application will load the ‘app/design/frontend/template/category/view.phtml the template file.
• Action – A full list of action methods soon will become acquirable, but in the mean time the top-grade way to learn about the antithetic action methods is by playing around with them in the presently available layout modifies. This is used to power store-front functionality such as loading or unloading of a script.
• As – At the time you see the get Child Html(‘block_name’) PHP method called from a template, be certain that it is mentioning to the block whose dimension ‘as’ is assigned the name as ‘block_name’. This is the name by which a template calls the block in which this attribute is assigned.
Reference
In order to make the reference, you must target the reference to a block by using the ‘name’ attribute. is used to make reference to another block. This attribute targets the tag’s ‘name’ abstraction. If you were to form a reference by , you are marking the block known as .
XML Rules
The only set rule you need to remember with respects to XML, is that at a tag wide-open, it must be followed by a concluding tag() self-close() precisely as (X)HTML file tags. If you are not acquainted with it, upon combating Magento’s XML supported layout modifies. You must follow the rules when modifying an XML file.
Detached the SEO links at the footer area – As an alternative of having the link items to be one list, separate ‘Advanced Search’ to be in the header or else.
1. You will need the Template Path Hints turned on to see why this is obvious. You can make a measured hypothesis that the SEO links must be allotted somewhere in the layout under the footer block.
2. Open up layout/page.xml and look through the list of children under the footer block in order to locate a block that calls the footer links. Now that you know that layout updates reference the SEO links. You will find references for the footer_links block in catalog.xml (which calls ‘Site Map’), catalogsearch.xml(which calls ‘Search Terms’ and ‘Advanced Search’) and contacts.xml (which calls ‘Contact Us’).
3. Now that you’ve located the area of the single SEO link component part, now you will get down the steps to separate ‘Advanced Search’ from the crew and also make it it’s own thing in the header. You’ve made the layout updates to expect this link in header.phtml. First go back to page.xml and create a new block and nest it inside .
4. Now you have Advanced search in the header instead of the footer.
In the category page, move the “My Cart” box from the right column to the left
1. Turn on the Template Path Hint by going to the admin then navigating to System -> Configuration. Wait for the page to load up, then choice the Creator tab. Choice ‘Yes’ in the select box for Template Path Hints. Go back to the store front, as also load up. When you are in the design page, choice the store you are working in by using the top left website/online store picker.
2. When the page reloads, look at the template path of the ‘My Cart’ block-‘front-end/default/template/checkout/cart/side-bar.phtml’ it will most likely to say this . You know this template is being introduced via the ‘checkout’ module. The immediate directory name following ‘template’ is the name of the module through which a template is introduced.
3. Open up layout/checkout.xml
4. Load up the store front and you will now see the change indicated.
Layout is the instrument with which you can delegate content blocks to every structural block created. Layout subsists in the sort of XML text-file and by changing the layout you are able to relocate blocks around in a page as well as designate templates to the content blocks to produce markup for the structural blocks. Instead, your templates are managed on a per-functionality basis and you can load and unload functionality in your store page by the virtue of a couple of layout commands alone. You are able to modify the visual layout of every page in your store.
