I want to put the shopping cart at the right side of of my horizontal checkout.
Something like this
5 Answers
When I wanted to show the cart on the sidebar, my first instinct was to use the existing checkout/cart_sidebar
block in Magento, but I have found a better solution which uses the checkout/onepage_review_info
block instead.
Here's what it looks like:
Just add this to your local.xml:
<checkout_onepage_index>
<!-- This sets the template to 2column-right.phtml. -->
<update handle="page_two_columns_right"/>
<reference name="right">
<block type="checkout/onepage_review_info" name="checkout_review_sidebar" output="toHtml" before="-" template="checkout/onepage/review/info.phtml">
<action method="addItemRender"><type>default</type><block>checkout/cart_item_renderer</block><template>checkout/onepage/review/item.phtml</template></action>
<action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/onepage/review/item.phtml</template></action>
<action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/onepage/review/item.phtml</template></action>
<block type="checkout/cart_totals" name="checkout.onepage.review.info.totals" as="totals" template="checkout/onepage/review/totals.phtml"/>
<block type="core/text_list" name="checkout.onepage.review.info.items.before" as="items_before" translate="label">
<label>Items Before</label>
</block>
<block type="core/text_list" name="checkout.onepage.review.info.items.after" as="items_after" translate="label">
<label>Items After</label>
</block>
<block type="checkout/agreements" name="checkout.onepage.agreements" as="agreements" template="checkout/onepage/agreements.phtml"/>
<!-- This block is only for information; we don't want the "Place Order" button showing.
<block type="core/template" name="checkout.onepage.review.button" as="button" template="checkout/onepage/review/button.phtml"/>
-->
</block>
</reference>
</checkout_onepage_index>
1St:first change this page layout 2columns-left.phtml to 2columns-right.phtml
Chekout how to change page layout:http://www.amitbera.com/how-to-change-page-layout-in-magento/
2nd:create local.xml under app/design/frontend/your package/your template/layout/
put this code:
<layout version="0.1.0">
<default>
<reference name="right">
<block type="checkout/cart_sidebar" name="cart_sidebar_ri" 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 type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
<label>Shopping Cart Sidebar Extra Actions</label>
</block>
</block>
</reference>
</default>
</layout>
<?xml version="1.0"?>
<layout version="0.1.0">
<default>
<reference name="right">
<block type="checkout/cart" name="checkout.cart">
<action method="setCartTemplate"><value>checkout/cart.phtml</value></action>
<action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action>
<action method="chooseTemplate"/>
<action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/item/default.phtml</template></action>
<action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/item/default.phtml</template></action>
<action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/item/default.phtml</template></action>
</block>
</reference>
</default>
</layout>
Paste this code in your local.xml.
It display cart in right side bar. but, for perfection you have to resize your right sidebar and edit dependent phtml files in above code.
<?xml version="1.0"?> <layout version="0.1.0"> <default> <reference name="right"> <block type="checkout/cart" name="checkout.cart"> <action method="setCartTemplate"><value>checkout/cart.phtml</value></action> <action method="setEmptyTemplate"><value>checkout/cart/noItems.phtml</value></action> <action method="chooseTemplate"/> <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/item/default.phtml</template></action> <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/item/default.phtml</template></action> <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/item/default.phtml</template></action> </block> </reference> </default> </layout>
Paste this code in your local.xml. It display cart in right side bar. but, for perfection you have to resize your right sidebar size and (dependent phtml files in above code)
Before apply the above codes Go to admin panel click on "System->Configuration->sales->Checkout". Under the Shopping Cart Sidebar section, choose "yes" in "Display Shopping Cart Sidebar" dropdown box.