[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Magento shopping basket

Posted on 2012-08-20
5
Medium Priority
?
742 Views
Last Modified: 2012-08-26
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
0
Comment
Question by:rafique12
  • 4
5 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 38313545
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
 

Author Comment

by:rafique12
ID: 38313966
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
 

Author Comment

by:rafique12
ID: 38314739
I've got it showing but need to do the styling... have you managed to get it working?
0
 

Accepted Solution

by:
rafique12 earned 0 total points
ID: 38316115
Thanks for your time dude - I've managed to get it working.

All the best x
0
 

Author Closing Comment

by:rafique12
ID: 38333780
Works perfect!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
It’s a season to be thankful, and we’re thankful for users like you who engage on site, solve technology problems, and network with others in the industry. What tech are we most thankful for? Keep reading.
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses
Course of the Month19 days, 5 hours left to enroll

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question