1

No one seems to have the answer to this. I literally just want to move my cart from the default header position in the RWD theme into my navigation instead. How can this be done? thank you

2 Answers 2

2

You will need to do a bit of restyling with CSS and possibly make HTML changes to the cart template but here is how you can move the cart to the end of the navigation in Magento RWD theme.

In your theme's layout file add the following:

<default>
    <reference name="header">
        <action method="unsetChild">
            <name>minicart_head</name>
        </action>
    </reference>
    <reference name="catalog.topnav">
        <action method="insert">
            <name>minicart_head</name>
        </action>
    </reference>
</default>

This will move the block from the header block into the navigation block. You then need to copy the template "page/html/topmenu.phtml" into your theme and output the "minicart_head" child block within an li.

<?php $_menu = $this->getHtml('level-top') ?>

<?php if($_menu): ?>
    <nav id="nav">
        <ol class="nav-primary">
            <?php echo $_menu ?>
            <li class="header-minicart">
                <?php echo $this->getChildHtml('minicart_head'); ?>
            </li>
        </ol>
    </nav>
<?php endif ?>

See below screenshot of it working in RWD. As mentioned you will need to make some CSS changes.

enter image description here

9
  • Everything is working fine but I was wondering you you could recommend any css. Heres how my nav looked before: dl.dropboxusercontent.com/u/171478031/… And here it is after moving the cart: dl.dropboxusercontent.com/u/171478031/… I just want it to sit all the way on the right at the same width and height as all of the other nav items as seen in the first image. Thanks
    – Oli Tuck
    Commented Mar 24, 2016 at 10:46
  • Well without seeing the page I am gonna have a rough guess. You would need to style .header-minicart element and remove the background colour. You would also need to set label colour to white and possibly fix the line height. You might also want to check on mobile. Commented Mar 24, 2016 at 12:56
  • dl.dropboxusercontent.com/u/171478031/… I ended up getting this. I didnt have to change line height though for some reason as soon as i did float:right it went over to the right and changed into the correct height
    – Oli Tuck
    Commented Mar 24, 2016 at 13:24
  • So its working ? :) Commented Mar 24, 2016 at 13:32
  • 1
    What you need to do is edit the CSS where the #nav element is hidden and do something like #nav li:(not:.header-mini-cart) { display: none; } Commented Mar 24, 2016 at 17:42
0

Put below code in your catalog.xml layout file where navigation layout is defined or wherever you want to show the header cart details.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.