Inside Magento : sidebar shopping cart explained

Described by multiple elements, the shopping cart display that appears on the right column in Magento's default layout is a complex issue. BAsically it is a good example of how blocks, layouts and templates work together to render the appropriate context sensitive information on the screen. The sidebar shopping cart display uses shopping cart information from PHP, and displays user cart content after a few conditionnal checks that occur in the template :

  • PHP class is defined  in magento/app/code/core/Mage/Checkout/Block/Cart/Sidebar.php
    Mage_Checkout_Block_Cart_Sidebar extends Mage_Checkout_Block_Cart_Abstract
  • HTML template is in app/design/frontend/default/default/template/checkout/cart/sidebar.phtml
  • position within the right sidebar is defined in the checkout.xml
    default\layout\checkout.xml

how to : move the shopping cart from sidebar to header

start off in layout/checkout.xml, replace the reference to a right column by a reference to the header

Display shopping cart in right column

<reference name="right">
<block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">
<action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
</block>
</reference>

code : display shopping cart in header

<reference name="top.menu">
<block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml" before="-">
<action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
<action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
</block>
</reference>

Note that the reference above to the sidebar.phtml can be changed to another new phtml file

anyway to finish off, place the following code in your page/header.phtml


< ?php echo $this->getChildHtml('shoppingCartLight') ?>

1 reply
  1. koen
    koen says:

    He thanks for the simple but good tips. I can't seem to insert the shoppingcarLight in the right place in the header. It just turns up after row-header div. What am I doing wrong? thanks

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *