Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Drop down menu and cart feature
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

I am still in the process of building a site for a client but I wanted to share the progress that’s been done already, specifically on two features.

http://balancedaquarium.com/home

Although at the time I am writing this I am still not done putting the links in the menu and there are tons of other holes in the site, I wanted to point out the menu and more importantly the shopping cart total and quantity feature.  I want to share the code because it hasn’t been fully shared on the site before.  I do want to thank the other posts that I garnered most of the information from:

http://www.magentocommerce.com/boards/viewthread/13046/
http://www.magentocommerce.com/boards/viewthread/26443/

My site combines the menu and cart feature in the same row on the website.  For the menu, please look at my thread for my old site (which is currently not online):

http://www.magentocommerce.com/boards/viewthread/21872/

Look at the above post for the menu itself.  The content of that menu is different but you only need to change the static block to change the look of the drop downs.

The shopping cart info feature is the one that took me most of my day yesterday.  First, after lot’s of work, I got it working, and later I was able to move it inline with the menu.  I’ll try to share as much of the code here as possible.

First, open up page.xml in the layout folder.  You need to move sidebar cart block into the header area of the layout.  Add this line in the header wherever you need it to be.

<block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/sidebar.phtml"/>

Here’s my code:

<block type="page/html_header" name="header" as="header">
                <
block type="page/template_links" name="top.links" as="topLinks"/>
                <
block type="cms/block" name="top-nav" as="topNav">
                    <
action method="setBlockId"><block_id>top-nav</block_id></action>
                </
block>
                <
block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/sidebar.phtml"/>
            </
block>

I can’t remember where the cart block was before but you’ll need to find it and delete it so that it’s no longer appearing in the right column.  There’s no need, at least in my opinion, to show the cart twice (although I did decide to leave the link at the top of the header.  You’ll notice the “as=’topcart” in the code.  You can change this part to whatever you want but you’ll have to change the “topcart” code in the rest of this post as well to match it.

Next open up template/page/html/header.phtml.  I’ll post all of the code for that here and you can move stuff or rename div’s as you need to.

<?php

?>

<div class="header-top-container">
    <
div class="header-top">
        <
h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <
class="no-display"><a href="#main"><strong><?php echo $this->__('Skip to Main Content'?> &raquo;</strong></a></p>
        <
div class="quick-access">
            <
div class="shop-access">
                
<?php echo $this->getChildHtml('topLinks'?>
            
</div>
            
<?php echo $this->getChildHtml('topSearch'?>
        
</div>
    </
div>
<
div class="header-nav-container">
    <
div class="nav-container">
        <
div class="nav-top">
            
<?php echo $this->getChildHtml('topNav'?>
        
</div>
        <
div class="cart-box">
            
<?php echo $this->getChildHtml('topcart')?>
        
</div>
    </
div>
</
div>
</
div>

Continued in the next reply…

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Next you need to update the cart output.

Open up ../template/checkout/cart/sidebar.phtml.  Here’s my complete code for the file.

<?php
/**
 * Shoping cart sidebar
 *
 * @see Mage_Checkout_Block_Cart_Sidebar
 */
?>
        <?php $_cartQty 
= ($this->getSummaryCount())?$this->getSummaryCount():0?>
                <?php 
echo $this->__('Total:'?> <total><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?></total>
                
<?php if ($_subtotalInclTax $this->getSubtotalInclTax()): ?>
                    
<br />(<strong><?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax?></strong<?php echo Mage::helper('tax')->getIncExcText(true?>)
                
<?php endif; ?>
                <?php 
echo $this->__('<a href="%s"><strong>(%s items)</strong></a>'$this->getUrl('checkout/cart'), $_cartQty?>
                
<a href="/checkout"><input type="image" src="<?php echo $this->getSkinUrl('images/cart.png') ?>" alt="<?php echo $this->__('Checkout') ?>" /></a>

<!-- 
[ends] .cart-sidebar // -->

The last thing to do is edit your css.  Here’s the css I have for my site:

.nav-container { z-index:999width:960pxheight:44px}
.nav-top { float:leftwidth:667px;
    
text-align:right;}
.cart-box {
    background
url(../images/cart_bg.pngno-repeat;
    
width:293px;
    
height:44px;
    
float:right;
    
margin:0px 0px 0px 0px;
    
padding:12px 0px 0px 0px;
    
text-align:right;
    
display:inline;
    
font-size:18px;
    
color#666;
}
.cart-box a {
    font
-size:17px;
    
color#3f6a96;
    
text-decoration:none;
}
.cart-box total {
    font
-size:17px;
    
color#999;
}

Make sure if you use my menu you adjust the width of the menu in menu.css found on the other thread.  You need to do this so that it will fit on the same line as the menu.

Hope this helps someone.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

I’m sure there will be questions so feel free to ask.  I have my own questions first:

Before you add anything to the cart it only says “Total: $0.00 ( items)”.  How can I make it always have at least a zero before items instead of being blank?  Any help would be great.

PS- I am still working on the rest of the site so no need to point out errors just yet.  But please tell me about any errors you find in the menu or cart feature.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ben Marks
Guru
 
Avatar
Total Posts:  452
Joined:  2008-10-09
Isle of Palms, SC
 

You need a test to see if there are any items in the cart, which is available in $_cartQty variable.  It seems that $_cartQty doesn’t return 0 when there are no items, which means that you can just do this:

replace

$_cartQty $this->getSummaryCount()

with

$_cartQty = ( $this->getSummaryCount() ) ? $this->getSummaryCount() : 0;

HTH

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Awesome, that worked great.  I am really weak with PHP so this helps a lot.

I’ll update the code.

 
Magento Community Magento Community
Magento Community
Magento Community
 
dan_w
Sr. Member
 
Total Posts:  290
Joined:  2008-01-04
 

Thanks for the tips...I’m sure they’ll come in handy. I’m just curious, what jQuery menu are you using for the main nav? I’m guessing that since you’re calling a static block, that the menu generation is not dynamic?

Thanks again,
Dan

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrjohnnycake
Member
 
Avatar
Total Posts:  35
Joined:  2007-10-28
Arcata, CA. USA
 

Look at the thread I linked to above.  It explains the menu and includes the jQuery file as well.  I had to modify jQuery because it didn’t like Magento.

No, it’s not dynamic.  A little extra time to add menu items but not too much.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Shahzad Jameel
Jr. Member
 
Total Posts:  4
Joined:  2009-03-01
 

Hi Guys,

When i did the mentioned change \\\"<block type=\\\"checkout/cart_sidebar\\\" name=\\\"cart_sidebar\\\" as=\\\"topcart\\\" template=\\\"checkout/cart/sidebar.phtml\\\">\\\" in page.xml, it showed me white page instead of my default Magento Theme.

Can you please help me regarding this?

Thank you in advance for it.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ecommerceoffice
Member
 
Avatar
Total Posts:  51
Joined:  2011-08-20
Russia
 

Check this menus! in 99 percents they meets all our clients requirements
Magento megamenu
Magento tabbed megamenu

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mage Solution
Sr. Member
 
Avatar
Total Posts:  179
Joined:  2013-11-12
 

Have a look at Magento Mega Menu extension to solve your problems with drop down menu. Promisable features help you to show all informations such as: categories, products, text contents, images, video, forms… on main navigation of a Magento website.
More reference : http://www.magentocommerce.com/magento-connect/mgs-mega-menu.html

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top