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

Put Cart into Header? 
 
gadgetplay
Jr. Member
 
Avatar
Total Posts:  30
Joined:  2008-05-03
Basingstoke, UK
 

Hi,

I’m really struggling to achieve something which is probably quite simple for most experienced Magento users…

What I’m trying to do is put my Shopping Cart box which is in the right hand column by default into the header where the Mini Search Box is.

Any ideas on how to do this please?

Many Thanks

Tim

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

one easier way of doing it is using absolute positioning in CSS. Not very semantical but save you lots of headache.

something like this:

.mini-cart {position:absolute; top: 0; right:0; margin-right: 25px;z-index: 1000;width: 300px;} /* set top to 0, and set left or right to 0, then use margins to control positions */

to prevent the block fall sout of the flow of your layout, you probably want to add

div.wrapper {position: relative} if it’s not already declared in the default Magento

 
Magento Community Magento Community
Magento Community
Magento Community
 
gadgetplay
Jr. Member
 
Avatar
Total Posts:  30
Joined:  2008-05-03
Basingstoke, UK
 

Hi Thanks for the response.

I’ve managed to get the Cart to where I need it to be in the header with the method you provided.

Is there a file for the cart that I can edit to have a play around with it?

 
Magento Community Magento Community
Magento Community
Magento Community
 
magento-marie
Member
 
Avatar
Total Posts:  37
Joined:  2008-06-01
France
 

Hello Gadgetplay,

I’m also trying to put the cartbox in the header, and would like to avoid using CSS absolute positioning.

If you activate the template path hints from the admin, you’ll see that the cart template is located in checkout/cart/sidebar.phtml. Here is the PHTML file you can play around with to modify the cart’s core structure.
The template path also means that your cart box is declared in the checkout.xml file.

Here is what I found :

<reference name="right">
            <
block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml"/>
</
reference>

I tried to change the reference name (which allocates your block to a parent block) .
I looked into page.xml to see in whick main block I’ll need to put my cart.
I found “header”, where the top links are also located, to go like this :

<reference name="header">
            <
block type="checkout/cart_sidebar" name="cart_sidebar" template="checkout/cart/sidebar.phtml"/>
</
reference>

but nothing has happened yet. I’ll keep you updated if I find something new.

 
Magento Community Magento Community
Magento Community
Magento Community
 
nikefido
Guru
 
Avatar
Total Posts:  481
Joined:  2008-07-11
New Haven, CT
 

Hi guys - I just played around with it and came up with a solution!

1) Copy the the block for the cart side bar:

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

2) Open up app\design\frontend\default\default\layout\page.xml (assuming you are using the default design or didn’t create a new page.xml file in your own templates)
Find the code :

<block type="page/html_header" name="header" as="header"//near line 58
Within that block, you will see other sub-blocks.
Paste your new block in there. Add the “as” attribute and set it to “topcart” — final result:
<block type="page/html_header" name="header" as="header">
                <
block type="page/template_links" name="top.links" as="topLinks"/>
                <
block type="page/switch" name="store_language" as="store_language" template="page/switch/languages.phtml"/>
                <
block type="core/text_list" name="top.menu" as="topMenu"/>
        <!--new 
block -->
        <
block type="checkout/cart_sidebar" name="cart_sidebar" as="topcart" template="checkout/cart/sidebar.phtml"/>
            </
block>

3) Finally, go into app\design\frontend\default\default\template\page\html\header.phtm (again, assuming your using default theme) and add the code:

//place this where ever you want the cart to show up.
<?php echo $this->getChildHtml('topcart')?>

That should do it! Worked for me, using Magento ver. 1.0.19870.4 (altho version shouldn’t matter too much for this customization)

 
Magento Community Magento Community
Magento Community
Magento Community
 
leetaylordoes
Sr. Member
 
Total Posts:  227
Joined:  2008-02-05
San Diego, CA
 

A very useful tutorial @nikefido,

Much appreciated.

- Lee

 
Magento Community Magento Community
Magento Community
Magento Community
 
Jelmo
Jr. Member
 
Total Posts:  28
Joined:  2008-08-15
 

Thanks a lot, got it to work.

And i agree, the theming for magento is over complicated and usually for changing one thing you have several options of places you can change this in.
For instance, i was looking into changing the layout for the frontpage from 2 colum-right layout to 1 column layout. Rad the Tutorials, watched the screencasts, and went ahead and changed page.xml, to no avail. You know why ? because in the admin can actually overwrite sttings set in the xml! And they NEVER EVER mention this in any of the tutorials. I mean, who ever thought of that ? sure make it easier for the store ownsers to change things, but let the changes in XML alsways overwrite these options.

Well, sorry for the rant, but i’m getting very frustrated with Magento a.t.m. but thanks to this topic, one more item i can cross off my list smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
xgabo
Member
 
Total Posts:  40
Joined:  2008-09-11
 

Im using the newest version of magento and I did what you said. This didnt work for me. nothing ever showed up in the header. Am I missing something else that you did but didnt say? css? code?

 
Magento Community Magento Community
Magento Community
Magento Community
 
TomC
Sr. Member
 
Total Posts:  191
Joined:  2007-12-01
 

Can anyone whom this worked for post a link to their site where we can see a working example ??

I am particularly interested in examples baased off the Modern Theme.

 
Magento Community Magento Community
Magento Community
Magento Community
 
marcfalk
Sr. Member
 
Total Posts:  87
Joined:  2008-11-22
 

World like to know if anyone has a solution for this problem as well… thanks you.

 
Magento Community Magento Community
Magento Community
Magento Community
 
marcfalk
Sr. Member
 
Total Posts:  87
Joined:  2008-11-22
 

Found a solution to some of the issues..

Take a look here: http://www.magentocommerce.com/boards/viewthread/26443/

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

Here’s what I came up with.

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

Thanks for all the help.

 
Magento Community Magento Community
Magento Community
Magento Community
 
frozensage
Jr. Member
 
Total Posts:  2
Joined:  2009-03-17
 

Hi guys,

I actually only just need the line “Shopping Cart (1 item) | checkout” to be displayed at the top right corner of my site”, so instead of using sidebar.phtml and changing/removing all of it’s code, I just added this:

<block type="page/html_header" name="header" as="header">
<
block type="checkout/cart_sidebar" name="cart_topbar" as="topCart" template="checkout/cart/topbar.phtml"/>
</
block>

to the page.xml instead of:

<block type="page/html_header" name="header" as="header">
<
block type="checkout/cart_sidebar" name="cart_topbar" as="topCart" template="checkout/cart/sidebar.phtml"/>
</
block>

Then in the folder /template/checkout/ I created a new file called topbar.phtml which all it has is:

<?php $_cartQty $this->getSummaryCount() ?>

<div class="block block-mini-cart">    
  <
strong><?php echo $this->__('Shopping Cart')?>:</strong>
    
  
    
<?php if ($_cartQty>0): ?>
        <?php 
echo $this->__('now in your cart ')?>
      
        <?php 
if ($_cartQty==1): ?>
            <?php 
echo $this->__('<a href="%s">1 item</a>'$this->getUrl('checkout/cart'), $_cartQty?>      
      <?php 
else: ?>
          <?php 
echo $this->__('<a href="%s">%s items</a>'$this->getUrl('checkout/cart'), $_cartQty?>      
      <?php 
endif ?>
  <?php 
else: ?>
      <?php 
echo $this->__('your cart is empty.')?>        
    <?php 
endif ?>
</div>

I figure this way if I still need to use sidebar somewhere else on the site/page I could.

Still very new to Magento, only been looking at it for the past week so maybe what I’m doing is actually really bad way to do it, please let me know rasberry

 
Magento Community Magento Community
Magento Community
Magento Community
 
rin george
Jr. Member
 
Total Posts:  2
Joined:  2009-04-01
 

hi nikefido very nice idea !!! that helped me very much .I thinks it would help many of them
smirk Thank u nikefido

 
Magento Community Magento Community
Magento Community
Magento Community
 
panticz.de
Jr. Member
 
Total Posts:  19
Joined:  2009-01-16
Germany
 

Hi, you can find here a script how to easly move the Magento Cart to haeder:

http://www.panticz.de/Magento-move-Cart-to-haeder

Cheers!

 
Magento Community Magento Community
Magento Community
Magento Community
 
hkpatel201
Jr. Member
 
Total Posts:  25
Joined:  2013-03-31
 

Try this with clear instruction.
http://hkpatel201.blogspot.in/2012/09/moving-magento-mini-cart-to-header.html

May be help someone else.
Thanks.

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