Magento

Bewildered by the local.xml file? I once was as well. Take a visit to the article know when to properly use local.xml. to learn more.

Local.xml is the bottom line for placing elements and ordering them in your theme. Let me take a step back and explain how this works. Please note that I couldn’t rebuild Magento from the ground up and don’t know every detail. I speak from a granular level on how this works, because that is what you need to know to get started.

While creating a module is different than editing modules that are already in place by Magento, they are all contained in the same place. If you do a quick visit in your website’s admin at System -> Configuration -> Advanced (this is near the bottom under the Advanced tab), you will see a huge list of the modules. The first thing to note is that Mage_ is the Magento prefix for their self-created modules. I’m not going to go into a ton of detail, as creating modules will be a new tutorial but I want you to scroll down and you will notice Mage_Paypal. If you look at the Blank theme or visit the Mage demo you will notice the PayPal logo in the bottom right. You can disable it here to make it go away on your default, or main store. BUT – there is a better way, which brings us to the local.xml file.

Local.xml is found in

apps/design/frontend/default/underscrub/layout/local.xml

If you didn’t know, underscrub is my theme for this demonstration. You would use your theme in this case. For instructions on setting up your own theme, visit Setting Up Magento. Here you should notice the directory that the local.xml file is in – Layout. That’s a hint. Your templates folder is going to handle your templates while your layout folder is going to handle the placement and content of the objects and modules.

If you don’t have a local.xml file, go ahead and create it. Let’s dive into some code examples so you can see what it does and how to use it.


<?xml version="1.0"?> <!-- this sucker just opens the doc -->
<layout> <!-- everything goes in here -->
  <default> <!-- this container tells you what your default layout is. like 'header' and 'footer' -->
    <!-- code goes here -->
  </default>
</layout>


There are two types of elements in Magento: blocks and references. Here, we will be talking about references. References are your header, footer, left, right, and content elements. Graphic borrowed from Inchoo.Customizing-Magento-Local

Okay, cool. So how do I get rid of this stuff I don’t want? Well, here is my list. It goes right in the default.


    <!-- Removals -->
    <remove name="catalog.compare.sidebar" />
    <remove name="right.permanent.callout" />
    <remove name="left.permanent.callout" />
    <remove name="left.newsletter" />
    <remove name="right.reports.product.viewed" />
    <remove name="paypal.partner.right.logo" />
    <remove name="right.poll" />
    <remove name="cart_sidebar" />
    <remove name="checkout_cart_link" />
    <remove name="catalog.compare.list" />

Next, we’ll want to add some CSS and a JS file to the head tag. Let’s reference the “head” and add the following:


<reference name="head">
  <action method="addCss"><stylesheet>css/new_stylesheet.css>/stylesheet<</action>
  <action method="addJs"><script>jquery/jquery.js</script></action>
</reference>

Here, we added a new CSS file (although I perfer to use the default style.css and we added the jQuery library. Adding the jQuery library to Magento is nice. It uses Prototype and Scriptaclus by default but all we have to do is create a directory in the root js folder (the folder directly inside our project, equal to apps and skin), call it what you like, in this case jQuery, and then add the library inside. We link to it using the action method addJs. Anything we want to go inside the head tag would go in this reference.

We’ll go into more detail, but outside of the default handle, we can manipulate other pages by accessing their handles as well. For instance, is the handle for the individual product detail page. A full list of handles can be found here.