3

GOAL: Add a SHOPPING CART ICON to Magento 1.8.1 - Ideal Cart will look like this: http://www.cctvhotdeals.com/ And contain the features such as # of items, mouseover to show items, etc.

To Clarify the goal:Currently my Sidebar.phtml code is:

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

I want the subtotal, order details, and checkout buttons to show in another block when MOUSEOVER the shopping cart: Current code showing in the cart block:

       <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; ?>
      </p>
   </div>
  <ol id="cart-sidebar" class="mini-products-list">
    <?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>
   </div>
   <?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>

I've found another post regarding this but cannot understand Jquery or what they are talking about: https://stackoverflow.com/questions/6344838/jquery-hover-and-stay-until-mouse-out

Please help!

1

Step1: Create local.xml at

app/design/frontend/yourpackage/yourTemplate/layout/

add this code at this file:

<?xml version="1.0"?>
<layout version="0.1.0">
    <default>
        <reference name="header">
            <block type="checkout/cart_sidebar" name="cart_sidebar_header" template="checkout/cart/sidebar.phtml" before="-">
                <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/sidebar/default.phtml</template></action>
                <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>
        </reference>
    </default>
</layout>

This code is call cart side bar to header section.

Step2: on header.phtml call this cart sidebar using below code :

<?php echo $this->getChildHtml('cart_sidebar_header');?>

then rest of you need to put your logic

[Update] I have update code for sidebar

<?php 
$count=0;
if (Mage::helper('core')->isModuleOutputEnabled('Mage_Checkout')) {
    $count = $this->helper('checkout/cart')->getSummaryCount();
    if ($count >= 1) { $text = $this->__('Cart (%s)', $count); } 
    elseif ($count > 0) {$text = $this->__('Cart (%s)', $count); }
    else { $text = $this->__('Cart (0)'); }

}?>
<div class="i_cart" onMouseOver="show_sidebar()" onMouseOut="hide_sidebar()">
    <p class="item">MY CART</p>
    <p class="cart_digit">
        <?php echo $count; ?>
    </p>
</div>
<script type="text/javascript">
function show_sidebar()
{
document.getElementById('headsidebar').style.display="block";
}

function hide_sidebar()
{
document.getElementById('headsidebar').style.display="noone";
}
</script>

<?php if ($this->getIsNeedToDisplaySideBar()):?>
<div class="block block-cart" id="headsidebar">
    <?php $_cartQty = $this->getSummaryCount() ?>
    <div class="block-title">
        <strong><span><?php echo $this->__('My Cart') ?></span></strong>
    </div>
    <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; ?>
            </p>
        </div>
    <?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>
    </div>
    <?php endif ?>
    <?php $_items = $this->getRecentItems() ?>
    <?php if(count($_items)): ?>
        <p class="block-subtitle"><?php echo $this->__('Recently added item(s)') ?></p>
        <ol id="cart-sidebar" class="mini-products-list">
        <?php foreach($_items as $_item): ?>
            <?php echo $this->getItemHtml($_item) ?>
        <?php endforeach; ?>
        </ol>
        <script type="text/javascript">decorateList('cart-sidebar', 'none-recursive')</script>
    <?php else: ?>
        <p class="empty"><?php echo $this->__('You have no items in your shopping cart.') ?></p>
    <?php endif ?>
    </div>
</div>
<?php endif;?>
  • I used to have the sidebar cart at the header - but it doesn't show the "Icon" for a shopping cart can you please explain how I can make it look and function like: cctvhotdeals.com (but different color for my website) ? Thank you for the help – JasonC91 Jan 8 '15 at 15:49
  • The Sidebar.phtml code you provided made the website turn into blank page, how do I add a shopping cart icon and link it to the cart is my question? – JasonC91 Jan 8 '15 at 16:28
  • just remove it... – Amit Bera Jan 8 '15 at 16:44
  • ya i did, still want to know how to make cart with icon in header, I successfully moved the sidebar cart to header through the help previous posts: magento.stackexchange.com/questions/40869/… , AND magento.stackexchange.com/questions/40430/… – JasonC91 Jan 8 '15 at 16:54
  • Please ckd.. code is update – Amit Bera Jan 9 '15 at 6:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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