Topic: Want to Jquery a mouseover cart that shows cart details ONLY when MouseOver-ing the Cart Block. (Magento 1.8.1)

As of Right Now: Cart Block is in Header-Right, shows cart details without mouseover, no mouseover functions embedded.

Problem: Don't know which file to add the following code: From this Post

hovered = false;

jQuery('#cart-links .links .first a').mouseover(function(){
  if(!hovered) {
  }}, 250);

hovered = true;
hovered = false;
jQuery('#cart-links .links .first a').trigger("mouseout");

Previous Posts for Cart Edits:

Moved Cart from Sidebar to Header-Right - Edited Sidebar.Phtml and other files (Local.xml not functioning)

Question regarding Mouseover Cart



<?php if ($this->getIsNeedToDisplaySideBar()):?>
<div class="block block-cart">
<?php $_cartQty = $this->getSummaryCount() ?>
<div class="block-title">
<strong><span><?php echo $this->__('My Cart') ?></span></strong>
<div class="block-content">
<?php if ($_cartQty>0): ?>
   <div class="summary">

   <?php if ($_cartQty==1): ?>
       <p class="amount"><?php echo $this->__('There is <a href="%s">1 item</a> >in your cart.', $this->getUrl('checkout/cart')) ?></p>
   <?php else: ?>
       <p class="amount"><?php echo $this->__('There are <a href="%s">%s >items</a> in your cart.', $this->getUrl('checkout/cart'), $_cartQty) ?></p>
   <?php endif ?>
       <p class="subtotal">
       <?php if ($this->canApplyMsrp()): ?>
           <span class="map-cart-sidebar-total"><?php echo $this->__('ORDER >TOTAL WILL BE DISPLAYED BEFORE YOU SUBMIT THE ORDER'); ?></span>
       <?php else: ?>
           <span class="label"><?php echo $this->__('Cart Subtotal:') ?></span> ><?php echo Mage::helper('checkout')->formatPrice($this->getSubtotal()) ?>
           <?php if ($_subtotalInclTax = $this->getSubtotalInclTax()): ?>
               <br />(<?php echo Mage::helper('checkout')->formatPrice($_subtotalInclTax) ?> <?php echo Mage::helper('tax')->getIncExcText(true) ?>)
           <?php endif; ?>
       <?php endif; ?>

<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
       <div class="actions">
      <?php echo $this->getChildHtml('extra_actions') ?>
       <button type="button" title="<?php echo $this->__('Checkout') ?>"     
class="button" >onclick="setLocation('<?php echo $this->getCheckoutUrl()    
    ?>')"><span><span><?php echo >$this->__('Checkout') ?></span></span></button>

   <?php endif ?>
  <?php $_items = $this->getRecentItems() ?>
   <?php if(count($_items)): ?>

  <?php else: ?>
      <p class="empty"><?php echo $this->__('You have no items in your shopping >cart.') ?></p>

4 Answers 4


You could try adding it to Miscellaneous HTML in System > General > Design > Footer. That would get loaded on every page but your jQuery selector should prevent it from firing where it shouldn't. You should probably use the jQuery ready() method though.


  • Hi, I input the code at the Footer in Magento Backend. The website showed no changes at all. I used the ready() method, starting with: $(function() { . Which file do I add the Google jQuery API SRC=? Please help me understand how this all works!
    – JasonC91
    Commented Feb 8, 2015 at 5:43
  • When you view source do you see the JS you added? Commented Feb 12, 2015 at 20:02
  • Hi, I would prefer to add it to the .phtml - Could you provide an example of how the code would look like?
    – JasonC91
    Commented Feb 13, 2015 at 13:29
  • If you are trying to add this globally on your site I would recommend @Turpachull approach. As for adding it to a specific phtml file, this would very much depend on what theme you are using. You could try adding it to app/design/frontend/base/default/template/page/html/footer.phtml Commented Feb 13, 2015 at 19:06

A good place for extra javascript is the /js directory. This is where the layout method "addJs" will look when specifying js to include. For example, the following layout/local.xml in your active theme (or base/default) would include the file /js/custom/my.js in the head of every page of your store:

<?xml version="1.0" encoding="UTF-8"?>
    <reference name="head">
      <action method="addJs"><script>custom/my.js</script></action>

You can achieve the same result by pasting in the script in the admin configuration as Daniel Smith mentions but it quickly turns into a mess when you start putting multiple scripts in there like analytics, retargeting pixels and all that junk. Using the layout makes it a bit easier to maintain.

An extra advantage is that you can also specify which parts of the store to include a script, for example replacing <default> with <cms_index_index> in the example above will make the layout include the script only on the homepage, e.g. for a fancy slider or something.

  • Hi, thank you for the help, but my local.xml is not working with my Magento
    – JasonC91
    Commented Feb 13, 2015 at 13:28

I think you are trying to build a mini-cart for the website. To do so follow below steps

Step 1: Include jQuery in your Magento website. You can do it adding the below code either in local.xml or in page.xml file of your layout folder. Enter the js in the js directory on the root folder

<reference name="head">
      <action method="addJs"><script>jquery.js</script></action>

step 2: Create a copy of template file sidebar.phtml and call it on the website. Add jQuery and perform other modifications in the file. I wrote a blog post regarding it. You can refer it Shopping Cart Mini

Hope it helps

  • I followed all the steps and the website turned blank. Please explain why this happened?
    – JasonC91
    Commented Feb 17, 2015 at 14:29
  • Could you please let me know what exactly have you done. If possible paste the screenshot..
    – Dexter
    Commented Feb 18, 2015 at 4:50
  • Hi thank you, I followed all the steps, I posted the detailed step by step on your blog
    – JasonC91
    Commented Feb 18, 2015 at 21:19

I usually put jQuery code in to that particular phtml file where the html code is. You can also try to put it on some new file, you can make your own .js file, put it inside skin/frontend/your_package/your_theme/js' and then call it from corresponding XML, so it is included. Something like that:

<div class="header-minicart">
  <div class="block block-cart skip-content" id="header-cart" style="display: none;">

  • Hi anitr - Thank you for your answer. The code of the cart is in sidebar.phtml (I would love to add Jquery in the .phtml file) - Could you clarify in your answer how I can make the Jquery show cart details only on hover? Thank you!
    – JasonC91
    Commented Feb 13, 2015 at 13:28
  • No problem, just copy html code please so that I can write exact code.
    – anitr
    Commented Feb 16, 2015 at 7:26
  • I added the code in my answer - you can still send me yours to show you how to do it with your code. Note that #header-cart should be child element of .header-minicart for this to work correctly.
    – anitr
    Commented Feb 16, 2015 at 12:30
  • Hi thank you, please see I have updated question with Sidebar.PHTML code - Also available here
    – JasonC91
    Commented Feb 16, 2015 at 22:43

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.