magento minicart

Question

I've been trying to add a minicart based on the example from Magento 1.9 Demo. When i clicked on the text, nothing happen. I was hoping to get a div drop down on click but after several attempts. It didn't work. Any advice? i'm stucked...

NOTE: I also copied minicart.phtml, items.phtml, default.phtml to the respective folders.

Checkout.xml

<reference name="header">
    <block type="checkout/cart_minicart" name="minicart_head" template="checkout/cart/minicart.phtml" before="-">
        <block type="checkout/cart_sidebar" name="minicart_content" template="checkout/cart/minicart/items.phtml">
            <action method="addItemRender"><type>default</type><block>checkout/cart_item_renderer</block><template>checkout/cart/minicart/default.phtml</template></action>
            <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/minicart/default.phtml</template></action>
            <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/minicart/default.phtml</template></action>
            <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/minicart/default.phtml</template></action>

            <block type="core/text_list" name="cart_sidebar.cart_promotion" as="cart_promotion" translate="label" module="checkout">
                <label>Mini-cart promotion block</label>
            </block>
            <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>
    </block>
</reference>

Page.xml

<action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>

Header.phtml

            <!-- Cart -->

        <div class="header-minicart">
            <?php echo $this->getChildHtml('minicart_head'); ?>
        </div>

CSS

I also overwrite all the attribute needed. Still can't work.

Answer 1

You are missing the skin/frontend/rwd/default/js/app.js file from your custom mini-cart implementation. In the default RWD install, all the logic for the mini-cart is in the skin/frontend/rwd/default/js/minicart.js but the control for the skip links in the header all happen in app.js:

$j('#header-cart').on('click', '.skip-link-close', function(e) {
    var parent = $j(this).parents('.skip-content');
    var link = parent.siblings('.skip-link');

    parent.removeClass('skip-active');
    link.removeClass('skip-active');

    e.preventDefault();
});

If you look at the DOM for the mini-cart elements, you will see this:

Where data-target-element="#header-cart" is the element that the skip links JS code links into.

Answer 2

you need to add the part from app.js that handles the skip-link part.