How can I use a different theme for checkout?

Question

I am having to work with a site that has quite a poor theme that really needs to be redone completely. I am not able to do that now but I do need to make the checkout and customer areas fully functional and visually appealing. The default rwd theme is a better starting point than the rubbish theme the site has.

Therefore, how can I change the layout of large parts of the site, e.g. the secure areas, to be a different design package/theme that only inherits from the built in themes?

If I could make just the checkout page work from the base themes/package that would be great.

Answer 1

In fact, the node in your config.xml file doesn't do an "update". As a matter of fact, I think you have done that in your config.xml :

<config>
    <frontend>
        <layout>
             <updates>
                  <checkout>
                        <file>mylayout.xml</file>
                  </checkout>
             </updates>
        </layout>
    </frontend>
</config>

and you have done your modifications in mylayout.xml.

In fact, you have to do :

<config>
    <frontend>
        <layout>
             <updates>
                  <mymodule>
                        <file>mylayout.xml</file>
                  </mymodule>
             </updates>
        </layout>
    </frontend>
</config>

And then, in mylayout.xml :

       <reference name="content">
            <reference name="checkout.cart">
                <block type="mymodule/myblock" name="checkout.mymodule.myblock"></block>
            </reference>
        </reference>
</checkout_cart_index>

By looking at my code and comparing the files to each other, you will understand better how it works.

In fact, don't forget that all xml files are concatenated in magento. So that, all nodes in all config files, respecting the same order, will be concataneted.

For example, in our case, the config.xml files of magento will be concatenated, and the result is ONE file containing :

<config>
<!-- some nodes... -->
<!-- some nodes... -->
<!-- some nodes... -->
    <frontend>
        <layout>
             <updates>
                  <mymodule>
                        <file>mylayout.xml</file>
                  </mymodule>
                  <checkout> <!-- this is the node from the config.xml of the Checkout Module-->
                        <file>checkout.xml</file>
                  </checkout>
                  <!-- some layout updates nodes from other config files... -->
             </updates>
        </layout>
    </frontend>
<!-- some nodes... -->
<!-- some nodes... -->
</config>

If you had replaced <mymodule> by <checkout> the resulting file would have looked :

<config>
<!-- some nodes... -->
<!-- some nodes... -->
<!-- some nodes... -->
    <frontend>
        <layout>
             <updates>
                  <checkout>
                        <file>mylayout.xml</file>
                  </checkout>
                  <!-- some layout updates nodes from other config files... -->
             </updates>
        </layout>
    </frontend>
<!-- some nodes... -->
<!-- some nodes... -->
</config>

Note the mylayout.xml. This is the reason why the original layout file is completely replaced by your own layout :)

Hope that's clear, in french it would have been easier for me to explain ;)

Original Source:

• https://stackoverflow.com/a/2946191/158325