Magento Extension: Cart items preview on mouseover (English version)

Cartview is a free Magento extension which shows the customers cart in a styleable container. It can be used as a replacement for the ‚My Cart‘ link in the header or as an individual block element. The extension uses the sidebar cart for rendering. Everything can be easily styled by css. Tested with default, modern and custom themes.

The extension can be downloaded via Magento Connect. It will not overwrite any core, template or css files. The javascript effect uses prototype which is part of magento. No other framework is needed.

Installation instructions for ‚My Cart‘ replacement

To replace the built-in ‚My Cart‘ link edit /app/design/frontend/default/your_skin/layout/local.xml:

<?xml version="1.0" ?>
<layout>
    <default>
        [...]
        <reference name="header">
            <reference name="top.links">
                <remove name="checkout_cart_link"/>
                <block type="cartview/view" name="cartview_toplink" template="cartview/toplink.phtml" >
                    <block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/sidebar.phtml"/>
                </block>
                <action method="addLinkBlock"><blockName>cartview_toplink</blockName></action>
                <block type="checkout/links" name="checkout_cart_link_cartview">
                    <action method="addCheckoutLink"></action>
                </block>
            </reference>
        </reference>
        [...]
    </default>
</layout>

Installation instructions for other elements

If you wish to use it for any other html element, edit /app/design/frontend/default/your_skin/layout/local.xml

<?xml version="1.0" ?>
<layout>
    <default>
        [...]
        <reference name="the_structural_block">
            <block type="cartview/view" name="cartview_link" template="cartview/link.phtml" >
                <block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/sidebar.phtml"/>
            </block>
        </reference>
        [...]
    </default>
</layout>

And in the corresponding template.phtml:

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

Configuration

System -> Configuration -> Checkout -> Shopping Cart Sidebar

Changelog

1.0.4
– Fix dirname
– Update installaton instructions

1.0.3
– Fix for Magento < 1.4.2.0
– Update installaton instructions

1.0.2
– Add missing files

1.0.1
– Initial release