Is it possible to update or change a theme layout so that all default files would remain unchanged, yet all changes you make would be listed in a single file?Also, is it possible to optimize the working process in such a way so that you would not need to search for multiple changes in the template files? One would say that this is impossible, however the solution lies in the local.xml file.
What is local.xml?
The best way to update a theme layout is to create a local.xml file.
Using a single local.xml file, located in your theme folder, it is possible to override or update all XML blocks of that theme. All you need to do is to create one file inside your theme folder and to write your own XML. Mаgentо reads XML files in a specific order so the file local.xml will be read at the very end of the xml sequence. When all XML files are read, Mаgentо will search for changes inside local.xml and then will correspondingly override an update your theme layout.
This method allows us to conveniently implement new changes in our theme layout.
How to set up your local.xml?
- Create a local.xml file inside your theme layout folder app/design/frontend/<your_package>/<your_theme>/layout/local.xml
- Add basic XML structure
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0"?> <!-- this sucker just opens the doc --> <!-- /** * local.xml * * Local layout modifications for our local theme * * @category design * @package my_theme_default * @copyright Copyright (c) 2013 Magento. */ --> <layout version="0.1.0"><!-- everything goes in here --> <default> <!-- this container tells you what your default layout is. like 'header' and 'footer' --> <!-- code goes here --> </default> </layout> |
Adding and deleting script and stylesheet through local.xml
Quite often it is necessary to add or delete a js or css file. For example, some third-party extensions install their own CSS styles. The same way sometimes you may need to add some javascripts so that they are available either on all pages or just some of them. Besides, you can add a JS and your own styles to any of your modules.
To add a file you first need to decide whether it should be available on every page of your site or just on some of them. Because the type of layout handle will depend on that choice.
Let’s show an example:
1 2 3 4 5 6 |
<default> <reference name="head"> <action method="addCss"><stylesheet>css/new_stylesheet.css></stylesheet></action> <action method="addJs"><script>jquery/jquery.js</script></action> </reference> </default> |
In this example we added a new CSS file new_stylesheet.css into local.xml. We also added JQuery into the library using the method attribute addJs. All these files will be added into the head of our template and will be available on all pages of the theme, since they are located inlayout handle <default>.
How to delete, move or replace a block in Mаgentо via local. xml?
Quite often we need to delete some blocks or to replace them with our own modified versions, as well as to change or move them.
There are two ways to remove blocks in XML layout:
- <remove name=”” />
- <action method=”unsetChild”>
It is important to understand that the main difference between these two methods is that they operate in different contexts.
<remove name=”” /> operates in global context. When finished with all layouts, Magento will completely delete the block with indicated name=””, regardless of which layout handle it has been added to. Using this method it is impossible to remove a block from one location and then add it to another.
A simple example how to delete a block through local.xml using the remove tag. For example, take the blocks “products compare” and “related products”: using the method remove we can delete blocks with such names from the context.
1 2 3 4 5 6 |
<default> <reference name="right"> <remove name="catalog.compare.sidebar" /> <remove name="catalog.product.related" /> </reference> </default> |
<action method=”unsetChild”> operates only in the context where it is being used. unsetChild is created for moving existing blocks from one place to another. You need to use this method if you want to remove a specific block from a specific layout handle and then insert it to another position or layout handle.
1 2 3 4 5 6 7 |
<default> <reference name="left"> <!-- Removed the Newsletter from the left sidebar --> <action method="unsetChild"><name>left.newsletter</name></action> <action method="unsetChild"><name>tags_popular</name></action> </reference> </default> |
In this example the block “Newsletter” and “tаgs_pоpulаr” were deleted from the block “left” and now we can move them to a different location.
As you can see, the difference between these two methods lets you understand how to move and change the template layout.
In the below local.xml file you can see how to delete other blocks as well as to see the structure of the file. I would also like to point out the importance of dividing the file into structural units and adding comments. Local.xml can contain various blocks, that is why it is better to add necessary comments to avoid confusion in future when more and more blocks will be added.
For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!--Category View--> - indicate the block of the category <catalog_category_view> <!--Set Page Template--> <reference name="root"> <action method="setTemplate"> <template>page/3columns.phtml</template> </action> </reference> </catalog_category_view> <!--Product View--> indicate the block of the product page <catalog_product_view> <!--Product Information Block--> specify the type of information. In our case this is a product information block <reference name="product.info"> <!--Recently Viewed Products--> <block type="reports/product_viewed" name="product.viewed" template="reports/recently-viewed.phtml" /> </reference> </catalog_product_view> |
You can also indicate your main steps and actions so that other developers would not get confused in your file.
1 2 3 4 5 6 7 |
<!--remove Magento's Default Sidebar Blocks--> -indicate where and which blocks you delete <remove name="cart_sidebar"/> <!--Cart Sidebar--> <remove name="catalog.product.related"/> <!--Related products sidebar--> <remove name="wishlist_sidebar"/> <!--Wishlist Sidebar--> |
An example of local.xml:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
<?xml version="1.0"?> <layout> <default> <!--Root/Default Layouts--> <reference name="root"> <!--Appending Block--> <block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/> </reference> <!--CSS and JS Files--> <reference name="head"> <!--Add CSS and JS, skin Folder--> <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action> <action method="addItem"><type>skin_js</type><name>js/functions.js</name></action> <!--Remove CSS and JS, skin Folder--> <action method="removeItem"><type>skin_js</type><name>scripts/functions.js</name></action> <action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action> <!--Remove JS, js Folder--> <action method="removeItem"><type>js</type><name>scripts/functions.js</name></action> </reference> <!--Header--> <reference name="header"> <!--Append CMS Block--> <block type="cms/block" name="header.cms.block" as="headerCmsBlock"> <action method="setBlockId"><block_id>header_cms_block</block_id></action> </block> </reference> <!--Change Block's Template if some Configuration is Set--> <reference name="catalog.topnav"> <action method="setTemplate" ifconfig="pronav/pronavconfig/pronav_status"> <template>pronav/navigation_top.phtml</template> </action> </reference> <!—remove Magento's Default Sidebar Blocks--> <remove name="cart_sidebar"/> <!--Cart Sidebar--> <remove name="catalog.product.related"/> <!--Related products sidebar--> <remove name="wishlist_sidebar"/> <!--Wishlist Sidebar--> <remove name="catalog.compare.sidebar"/> <!--Compare Items Sidebar--> <remove name="right.permanent.callout"/> <!--Right Callout Sample Data--> <remove name="left.permanent.callout"/> <!--Left Callout Sample Data--> <remove name="right.reports.product.viewed"/> <!--Viewed Products--> <remove name="right.reports.product.compared"/><!--Compared Products--> <remove name="catalog.leftnav"/> <!--Layered Navigation--> <remove name="left.newsletter"/> <!--Sidebar Newsletter--> <remove name="right.poll"/> <!--Poll--> <remove name="tags_popular"/> <!--Popular Tags--> <remove name="paypal.partner.right.logo"/> <!--Paypal logo Sample Data--> <remove name="catalogsearch.leftnav"/> <!--Layered navigation on search result page--> <remove name="sale.reorder.sidebar"/> <!--Reorder Sidebar When User Logged, in Dashboard--> <remove name="customer_account_navigation"/> <!--Customer Navigation--> </default> <!--Home Page--> <cms_index_index> </cms_index_index> <!--All Cms Pages--> <cms_page> </cms_page> <!--Category View--> <catalog_category_view> <!--Set Page Template--> <reference name="root"> <action method="setTemplate"> <template>page/3columns.phtml</template> </action> </reference> </catalog_category_view> <!--Category View With Layered Navigation--> <catalog_category_layered> </catalog_category_layered> <!--Onepage Checkout Index Page--> <checkout_onepage_index> </checkout_onepage_index> <!--Onepage Checkout Success Page--> <checkout_onepage_success> </checkout_onepage_success> <!--Customer Accound Pages--> <customer_account> <!--Adds Body Class For All Dashboard Pages - MUST when Dashboard is present--> <reference name="root"> <action method="addBodyClass"><className>customer-account-page</className></action> </reference> </customer_account> <!--Customer Logged In--> <customer_logged_in> </customer_logged_in> <!--Customer Logged Out--> <customer_logged_out> </customer_logged_out> <!--Product View--> <catalog_product_view> <!--Product Information Block--> <reference name="product.info"> <!--Recently Viewed Products--> <block type="reports/product_viewed" name="product.viewed" template="reports/recently-viewed.phtml" /> </reference> </catalog_product_view> <!--Catalogsearch Result Page--> <catalogsearch_result_index> </catalogsearch_result_index> <!--Advanced Search Result Page--> <catalogsearch_advanced_result> </catalogsearch_advanced_result> <!--Advanced Search Page--> <catalogsearch_advanced_index> </catalogsearch_advanced_index> <!--Cart--> <checkout_cart_index> </checkout_cart_index> <!--Contacts Page--> <contacts_index_index> </contacts_index_index> </layout> |
So now we know how to use local.xml layout file, manipulate, update and modify layout in a Mаgentо theme.
This useful approach keeps all your template layout modifications in one single file thus making your modifications easy to find and also ensure an easier upgrade path if and when there is a theme update.
If you have any interesting local.xml tips and tricks, by all means share them in the comments section.
Good Explanation
Brilliant, very helpful on one of the most powerful -yet strangely undocumented- features of Magento.
Thank you!
Super*
Good Explanation ….Thanks a lot for your hard work.. well done and keep continue knowledge sharing..:)
Thank you Tatiana, well explained.
would you please tell me the difference between addItem and addcss for a stylesheet? is the additem just more general that can use js and css types or they have more important difference?