Magento shopping basket

I am trying to move the magento shopping basket to the top right hand side of my page that displays number of products.

This is the exact example that I am trying to recreate: http://www.jmldirect.com/ 

Can anyone give me some advice about which files to edit please?

I've trying try to get this done allday...?!?!?!?

Many thanks
rafique12Asked:
Who is Participating?
 
rafique12Connect With a Mentor Author Commented:
Thanks for your time dude - I've managed to get it working.

All the best x
0
 
GaryCommented:
Where is it now?
Would be better if you attach the catalog.xml file in the layout folder so we know your layout positioning.
0
 
rafique12Author Commented:
Ive managed to implement this. However, I'm still in a bit of trouble.

1. The product descriptions, price and image thumbnail won't display for some reason.

2. I think the CSS styling is being overidden as I cannot change any of the styl elements.

Here's the code:

app\design\frontend\your-package\your-template\layout\checkout.xml
<reference name="header">
	<block type="checkout/cart_sidebar" name="cart_cartheader" template="checkout/cart/cartheader.phtml" before="-">
    	<action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/cartheader/default.phtml</template></action>
        <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/cartheader/default.phtml</template></action>
        <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/cartheader/default.phtml</template></action>

        <block type="core/text_list" name="cart_cartheader.extra_actions" as="extra_actions" translate="label" module="checkout">
        	<label>Shopping Cart Cartheader Extra Actions</label>
    	</block>
	</block>
</reference>

Open in new window


app\design\frontend\your-package\your-template\template\checkout\cart\cartheader.phtml

<div class="mini-cart-layer">
	<?php if ($this->getIsNeedToDisplaySideBar()):?>
		<div class="top-cart">
			<?php $_cartQty = $this->getSummaryCount() ?>
			<?php if ($_cartQty > 0): ?>
				<?php $_myCart = $this->__('Shopping Cart (%s items)', $_cartQty) ?>
			<?php else: ?>
				<?php $_myCart = $this->__('Shopping Cart (0 item)') ?>
			<?php endif ?>
			
			<?php if ($this->getIsLinkMode() || !$this->getIsNeedToDisplaySideBar()):?>
				<div class="block-title no-items">
					<ul class="links cart-link">
						<li ><a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $_myCart ?></a></li>
					</ul>
				</div>
			<?php else:?>
				<div class="block-title<?php if(!$_cartQty) { echo (' no-items'); } ?>">
					<span id="cartHeader"><?php echo $_myCart ?></span>
				</div>
				<div id="topCartContent" class="block-content" style="display:none">
					<div class="inner-wrapper"><?php /*extra div to smooth slideUp and slideDown*/ ?>
						<?php $_items = $this->getRecentItems() ?>
						<?php if(count($_items)): ?>
							<p class="block-subtitle">
								<span onclick="toggleTopCart();" class="close-btn"><?php echo $this->__('Close'); ?></span>
								<?php echo $this->__('Recently added item(s)') ?>
							</p>
							<ol id="mini-cart" class="mini-products-list">
								<?php foreach($_items as $_item): ?>
									<?php echo $this->getItemHtml($_item) ?>
								<?php endforeach; ?>
							</ol>
							<script type="text/javascript">decorateList('mini-cart', 'none-recursive')</script>
						<?php else: ?>
							<p class="block-subtitle">
								<span onclick="toggleTopCart()" class="close-btn"><?php echo $this->__('Close'); ?></span>
									<?php echo $this->__('Recently added item(s)') ?>
							</p>
							<p class="cart-empty">
								<?php echo $this->__('You have no items in your shopping cart.') ?>
							</p>
						<?php endif ?>
						<?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?>
							<div class="actions">
								<a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $this->__('Go to Shopping Cart') ?></a>
								<button class="button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button>
							</div>
						<?php endif ?>
					</div>
				</div>
			<?php endif;?>
		</div>
	<?php endif;?>
</div>

Open in new window


app\design\frontend\your-package\your-template\template\checkout\cart\cartheader\default.phtml

<?php
$_item = $this->getItem();
$isVisibleProduct = $_item->getProduct()->isVisibleInSiteVisibility();
//$canApplyMsrp = Mage::helper('catalog')->canApplyMsrp($_item->getProduct(), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type::TYPE_BEFORE_ORDER_CONFIRM);
?>
<li class="item">
	<?php if ($this->hasProductUrl()): ?>
		<a href="<?php echo $this->getProductUrl()?>" title="<?php echo $this->htmlEscape($this->getProductName()) ?>" class="product-image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></a>
	<?php else: ?>
		<span class="product-image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></span>
	<?php endif; ?>
	<div class="product-details">
		<p class="product-name">
			<?php if ($this->hasProductUrl()): ?>
				<a href="<?php echo $this->getProductUrl() ?>">
			<?php endif; ?>
				<?php echo $this->htmlEscape($this->getProductName()) ?>
			<?php if ($this->hasProductUrl()): ?>
				</a>
			<?php endif; ?>
		</p>
		<a href="<?php echo $this->getDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>');" class="top-btn-remove">
			<?php echo $this->__('Remove This Item') ?>
		</a>
	</div>
</li>

Open in new window



//on the page/html/header.phtml, add below
<?php echo $this->getChildHtml('cart_cartheader') ?>

Open in new window


skin\frontend\your-package\your-template\js\cf.js

/**
 * Author: damodar.bashyal
 * Date: 5/10/11
 * Time: 12:26 PM
 */
function slideUp()
{
	jQuery('#topCartContent:visible').slideUp(1000);
	jQuery('.mini-cart-layer').addClass('mini-cart-layer-up');
	jQuery('.mini-cart-layer').removeClass('mini-cart-layer-down');
}

function slideDown()
{
	jQuery('#topCartContent:hidden').slideDown(1000);
	/*startTimer()*/ /* optional*/
	jQuery('.mini-cart-layer').addClass('mini-cart-layer-down');
	jQuery('.mini-cart-layer').removeClass('mini-cart-layer-up');
}

function toggleTopCart()
{
	if(jQuery('#topCartContent').is(':visible'))
	{
		slideUp();
	} else {
		slideDown();
	}
}

var timer;
function startTimer()
{
	timer = setTimeout(function(){
		slideUp();
	}, 5000);
}

jQuery(document).ready(function(){
	jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').click(function(){
		toggleTopCart();
	});

	jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').mouseover(function(){
		clearTimeout(timer);
	}).mouseout(function(){
		startTimer();
	});

	jQuery("#topCartContent").mouseover(function() {
		clearTimeout(timer);
	}).mouseout(function(){
		startTimer();
	});
});

Open in new window


app\design\frontend\your-package\your-template\layout\page.xml

<action method="addItem"><type>skin_js</type><name>js/jquery.js</name><params/></action>
<action method="addItem"><type>skin_js</type><name>js/cf.js</name><params/></action>

Open in new window


//CSS styling which is just plain and basic

/*---*/
.clear:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
div.mini-cart-layer {
    background: url("../images/view_shopping_cart.jpg") no-repeat scroll 0 0 transparent;
    height: 26px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 9px;
    width: 165px;
    z-index: 99;
}
.top-cart .top-btn-remove {
    background: url("../images/btn_remove.gif") no-repeat scroll 0 0 transparent;
    display: block;
    font-size: 11px;
    height: 15px;
    line-height: 11px;
    margin: 0 0 3px;
    overflow: hidden;
    padding: 0 0 0 15px;
}
div.mini-cart-layer-up{}
div.mini-cart-layer-down{background-position: 0 bottom;}
.mini-cart-layer span#cartHeader {
    display: block;
    height: 26px;
    overflow: hidden;
    text-align: left;
    text-indent: -99999px;
    width: 165px;
}
.top-cart {
    float: left;
    position: relative;
}
.top-cart .block-title {
    white-space: nowrap;
    cursor: pointer;
}
.top-cart .block-title.expanded {
    background-position: 0 3px !important;
}
.top-cart .block-title.expanded span {
    background-position: 100% -126px !important;
}
.top-cart .block-content {
    background: none repeat scroll 0 0 #FDFDFD;
    font-size: 11px;
    position: absolute;
    right: 0;
    text-align: left;
    top: 20px;
    width: 267px;
}
.top-cart .block-content ol {
    margin: 0;
    padding: 0;
    list-style: none outside none;
}
.top-cart .inner-wrapper {
    border: 4px solid #DB4C6A;
}
.top-cart .block-content .block-subtitle {
    background: #DB4C6A;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    line-height: 12px;
    padding: 3px 10px 4px;
}
.top-cart .block-content .block-subtitle .close-btn {
    float: right;
    width: 13px;
    height: 0;
    padding-top: 12px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    background: url(../images/btn_remove.gif) no-repeat 0 0;
    position: relative;
    z-index: 1;
}
.top-cart .cart-empty .close-btn {
    float: right;
    width: 13px;
    height: 0;
    padding-top: 12px;
    text-align: left;
    overflow: hidden;
    cursor: pointer;
    background: url(../images/btn_remove.gif) no-repeat 0 0;
    position: relative;
    z-index: 1;
}
.top-cart .cart-empty {
    padding: 10px 10px 10px 20px;
    color: #666;
}
.top-cart .block-content .item {
    padding: 8px 5px 8px 11px;
    border-bottom: 1px solid #DDD;
    margin: 0 5px;
}
.top-cart .block-content .last {
    border-bottom: none;
}
.top-cart .block-content .item .product-name {
    font-size: 11px;
    height: 30px;
    line-height: 14px;
    margin: 0 0 5px;
    overflow: hidden;
}
.top-cart .block-content .item .product-name a {
    font-size: 11px;
    text-decoration: none;
    color: #444;
}
.top-cart .block-content table {
    margin: 5px 0 0 0;
}
.top-cart .block-content table th {
    padding: 1px 8px;
    color: #8f8f8f;
    text-align: right;
}
.top-cart .block-content table td {
    text-align: left;
    padding: 1px 0;
}
.top-cart .block-content .subtotal {
    padding: 2px 5px;
    text-align: center;
    color: #666;
}
.top-cart .actions {
    background-color: #DB4C6A;
    color: #FFFFFF;
    padding: 5px 11px;
    text-align: right;
    z-index: 999;
}
.top-cart .actions a {
    float: left;
    line-height: 23px;
}
.top-cart .actions button {
    float: none;
    color: #FFF;
    padding-top: 3px;
}
div.top-cart {
    float: none;
}
div.top-cart .block-title {
    color: #000000;
    display: block;
    float: none;
    font-family: arial;
    font-size: 12px;
    font-weight: bold;
    padding: 0;
}
div.top-cart .block-content {
    top: 26px;
}
div.top-cart .block-content ol li {
    display: block;
    float: none;
}

Open in new window


Hope this helps as its the complete code for implementation...!
Good luck x
0
 
rafique12Author Commented:
I've got it showing but need to do the styling... have you managed to get it working?
0
 
rafique12Author Commented:
Works perfect!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.