When you plan out a new theme for your Magento store, you begin designing it by using the default theme as your base. Very rarely would you create a new theme from the scratch. The reason being the default theme brings with it most of the elements like standard features, that are required by the phtml and layout files.
While this is a simple way of designing your new theme, there will be certain elements in the phtml that you would not want to use. You may want to customize the layout files to suit your design and theme requirements. What if, the theme is updated, after you have made the layout changes? You will need to fit the customizations to these new updates as well. That's why it is considered better to make the necessary changes in the local.xml file. Here the original files remain unchanged, and the modifications are stored within a single file, which is an added advantage. Creating and storing the necessary modifications in the local.xml file is similar to modifying the layout directly
Here is the root element layout for local.xml file
Here are five tips that might help you work with local.xml file in a better way
Adding/Removing JS and CSS Files
There will be certain scripting or styling files, added with the 3rd party extensions, that you won't need in your website. You may want to add your own scripting files. In order to add the functionalities that suit your design needs, you may add the scripting and styling files needed by the module, instead of the default ones. The module specific layout XML file will take care of the customizations you have created, but it is the layout specific XML that will account for a theme specific scripting. When you are adding an arbitrary file, you need to know whether to include it along all pages of the website, or just add it to a few elements on the website.
For example you want to add the scripting file my_js.js and styling file my_styles.css to every page with the handles. Targeting the "head" block with the addItem action, you can add the necessary files to the theme specific layout
You can use removeItem method to remove the scripting and styling files
In the above mentioned code, the second removeItem usage concerns with removing scripting file that was added by an extension to the JS folder and not the theme specific folder.
Google CDN instead of Local jQuery
You can even replace the locally added jQuery file with the same file added from Google CDN. The main aim of doing this is to improve the performance of your website. Here is how you can programmatically achieve this
Let's understand what is happening here. The jQuery.noconflict() was called at the end of the code so that there is no conflict between the jQuery files and Magento prototype library. Also, JS is excluded in this code, so addItem() function cannot be used within the code.
In order to avoid including these functions, and ensuring no conflict occurs, a block core/text has been added where the script is included as text node. CDATA is the default output of this block.
Modifying the Block Parameters
If you want to modify some of the block parameters like number of upsell/crosssell products, or the number of columns within the category grid, then here is how you can do it.
First you will need to change the category grid using the following code
Here's how you can modify upsell in the product view
In the root element code, we have already seen that the local.xml file is called towards the end. This simply means that whatever values are set in the other XML file layout will be overridden by the local.xml towards the end.
Logged vs. Not Logged Customers
Let's change the theme layout for the logged vs. the not logged customers. You can play the appearance and include/exclude elements, thus making the theme appear differently for both the handles. With this you can use the layout block to create different content for the different handles.
If you consider the stock alert functionality of Magento, you will see that while it offers notifications to the logged in customer about availability of a product, or when a product is back in stock, it redirects the ones who are not logged in to the Log in page. With a little change in content, this functionality and discomfort can be eased out for both handles.
This new phtml block will be shown in place of the default. This block will be displayed in place of the "add to cart" button
Let's introduce a custom phtml template to the following path template/magebase/productalert.phtml. Paste the following code to this path
Replace with custom blocks
You may also like
With these five tips, you can easily bring modifications at a very local level. In case your theme is updated, you don't need to customize or include the changes once again. As you have included it at a local level, it will be automatically taken in by the theme, thus making it convenient for you.