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

cartview-demoCartview 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

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

  1. wayne sagt:

    I run 1.7.0.2 and I dont have local.xml in the directory as you say edit!

    /app/design/frontend/default/your_skin/layout/local.xml: ?????

  2. Mirah sagt:

    I created new local.xml and uploaded into mentioned directory (/app/design/frontend/default/your_skin/layout/).
    It works for me.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: