How to use local.xml to modify specific pages of Magento

Posted by Unknown Labels: pages at February 19, 2018

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
<div style="text-align: center;">
 </div>
Sometimes you may want to modify specific views of you store, instead of making changes to 
all of your store views. You will mostly likely us this approach to load custom css and js, instead of loading unnecessary files on all your pages. 
 
A. Loading style sheet and Javascript on specific view. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
<?xml version="1.0"?><layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; font-family: "dejavu sans mono"; font-size: 11.3pt;"><pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <catalog_category_default> </pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <reference name="head"> </pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <action method="addCss"> </pre>
<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"> <stylesheet>css/bootstrap.css</stylesheet></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </action> </pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </reference></pre>
<pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </catalog_category_default></pre>

<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"></pre>

<pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"></layout></pre>

</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<div>
 </div>
This will tell magento to add bootstrap.css on the <head> of the category catalog view. You may to read <a href="http://theming-magento.blogspot.co.za/2018/02/how-to-use-boostrap-in-your-magento.html">How to use Bootstrap on Magento</a>. 
 
B. Remove block on specific views of your store. 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
<?xml version="1.0"?></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"><layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
 <catalog_category_default></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <remove name="footer.newsletter"/> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> </catalog_category_default>
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"></layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: "DejaVu Sans Mono"; font-size: 11.3pt;">
</pre>
<div>
 </div>
This will tell Magento to remove the "footer.newsletter" block only on the category catalog view. 
 
Wait! What if you want to add custom style sheet and javascript only to specific CMS pages? [<a href="http://theming-magento.blogspot.co.za/2018/02/how-custom-js-and-css-to-specific-cms.html">VIEW SOLUTION HERE</a>]. 
 
Magento is a heavy system, so do your best to use as little recourse as possible. to boost the 
over roll performance of your store.  I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back.

Sometimes you may want to modify specific views of you store, instead of making changes to all of your store views. You will mostly lik...

How to use Boostrap in your Magento store

Posted by Unknown Labels: local.xml at February 19, 2018

In this article I will show you how to add Boostrap files in Magento using local.xml, ( if you not sure what is local.xml, you will nee...

local.xml for Beginners

Posted by Unknown Labels: local.xml at February 19, 2018

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="210" data-original-width="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmhVgqgncgIjXAKlcYz_VVOBUR0TNOeTXfOmC_f4M8XJ9LksVd0YLCkWao5zKsrF9YzrUIyTuAGpu37WjBu-3VqUV9MP26CZvvFGrluIwe_ha7uPVA1LbNXApprmBpXhgF0svaX2lMqhv9/s1600/theming-magento-icon.png" /></a></div>
 
What is local.xml? 
local.xml is a file that helps you control how blocks are places on your pages. 
 
What is it used for? 
local.xml is mostly used to move and removing blocks around your page. It's also used to pull in your Styling sheet and JavaScript files. 
 
How to creating local.xml file? 
Always create the local.xml file inside your Theme's Layout folder. 
 
File path: app/design/frontend/package_name/theme_name/layout/local.xml 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><?xml version="1.0"?></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><div class="line number2 index1 alt1">
</div>
<layout></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <default></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> //add all your code here</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><pre style="color: #a9b7c6; font-family: "dejavu sans mono"; font-size: 11.3pt;"></pre>
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><pre style="font-family: "DejaVu Sans Mono"; font-size: 11.3pt;"> </default>
</layout></pre>
</pre>
 
Local.xml basic modification? 
Before adding anything, first include this xml code inside your local.xml, basically this tells Magento to apply or overwrite these modifications on all pages, hence the default tag <default> 
 
1. How to add a CSS file? 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><reference name="head"> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <action method="addCss"> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <stylesheet>css/style.css</stylesheet> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> </action></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> </reference></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
 
 
2. How to add a Javascript file? 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><reference name="head"> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <action method="addItem"> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <type>skin_js</type> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <name>js/jquery.js</name> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> <params/> </pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> </action></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"> </reference></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
 
3. How to remove a block? 
 
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;"><remove name="paypal.partner.right.logo"/></pre>
<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'DejaVu Sans Mono'; font-size: 11.3pt;">
</pre>
 
Next we will talk about how to move a block to a difference location and <a href="http://theming-magento.blogspot.co.za/2018/02/how-to-use-localxml-to-modify-specific.html">How to apply changes to specific views</a>. 
 
I hope this article was helpful to you, please leave your question/s on the comments section below and I will do my best to answer back.

What is local.xml? local.xml is a file that helps you control how blocks are places on your pages. What is it used for? local.xml is ...