Trolley for Your Magento Theme
Among the hottest
plug-ins for Magento is the AJAX Quick Cart, a useful e-commerce adsmanager extensions function that allows customers
in order to rapidly add a product
for their cart without reloading the actual page or getting rerouted to the checkout. In this guide I am going to show you
how you candevelop your own
AJAX trolleyfrom the beginning
. To see it for, take a look at our premium Magento one 6 theme.
Notice: This particular tutorial requires
the particular Quick View popup through our previous DIY Magento article - Create a Fast View for Your Magento Concept
To be able to build an AJAX Fast Cart for Magento, we have to do the following:
Setup our cart extension as well as override the checkout
wagon controller.
Create the basket dropdown template which will calendar extension demonstrate trolley products in a dropdown.
Update our frontend design (local. xml) to add the cart dropdown prevent to the store header.
Up-date header. phtml to add the actual cart dropdown
obstruct towards the store header
.
Utilize jQuery to make an AJAX article call after
clicking on the “Add to Cart” button in the Quick See popup.
Use jQuery to install the hover event
towards the header cart link.
Make use of CSS to style the AJAX cart dropdown.
Create increasing daylight savings time
The very first thing we need to do
is placedin the folder structure
for the extension. The actual screenshot
beneath through adding the folders
and also files to your /app/code/local directory site:
Extension File Structure
Right now let’s override the google shopping cart cart controller. We’re doing 3 things:
Override typically thecatalog action to load
often the AJAX cart dropdown only when we make an AJAX demand.
Upon saving the wheeled, we want to redirect to the AJAX cart dropdown when making a good AJAX request: _goBack().
Develop a new function to return the exact AJAX cart dropdown wedge: _sendSideCartHtml().
/app/code/local/FastDivision/QuickCart/controllers/Checkout/CartController. php
<? php
require_once('Mage/Checkout/controllers/CartController. php');
course FastDivision_QuickCart_Checkout_CartController extends Mage_Checkout_CartController
{
/**
* Shopping cart display action
*/
public function indexAction()
$cart = $this-> _getCart();
if ($cart-> getQuote()-> getItemsCount())
$cart-> init();
$cart-> save();
if (!$this-> _getQuote()-> validateMinimumAmount())
$warning = Mage::getStoreConfig('sales/minimum_order/description');
$cart-> getCheckoutSession()-> addNotice($warning);
foreach ($cart-> getQuote()-> getMessages() as $message)
if ($message)
$cart-> getCheckoutSession()-> addMessage($message);
/**
* if customer enteres shopping cart we should mark quote
* as modified bc he can has checkout page in another window.
*/
$this-> _getSession()-> setCartWasUpdated(true);
// Quick Cart: If AJAX call, then return the cart dropdown HTML
if ($this-> getRequest()-> isXmlHttpRequest())
$this-> _sendSideCartHtml();
else
Varien_Profiler::start(__METHOD__ . 'cart_display');
$this
-> loadLayout()
-> _initLayoutMessages('checkout/session')
-> _initLayoutMessages('catalog/session')
-> getLayout()-> getBlock('head')-> setTitle($this-> __('Shopping Cart'));
$this-> renderLayout();
Varien_Profiler::stop(__METHOD__ . 'cart_display');
/**
* Set back redirect url to response
*
* @return Mage_Checkout_CartController
*/
protected function _goBack()
// Quick Cart: If AJAX call, then return the cart dropdown HTML
if ($this-> getRequest()-> isXmlHttpRequest())
$this-> _sendSideCartHtml();
else
$returnUrl = $this-> getRequest()-> getParam('return_url');
if ($returnUrl)
// clear layout messages in case of external url redirect
if ($this-> _isUrlInternal($returnUrl))
$this-> _getSession()-> getMessages(true);
$this-> getResponse()-> setRedirect($returnUrl);
elseif (!Mage::getStoreConfig('checkout/cart/redirect_to_cart')
&& !$this-> getRequest()-> getParam('in_cart')
&& $backUrl = $this-> _getRefererUrl()
)
$this-> getResponse()-> setRedirect($backUrl);
else
if (($this-> getRequest()-> getActionName() == 'add') && !$this-> getRequest()-> getParam('in_cart'))
$this-> _getSession()-> setContinueShoppingUrl($this-> _getRefererUrl());
$this-> _redirect('checkout/cart');
return $this;
protected function _sendSideCartHtml()
{
// Return the Quick Cart's dropdown block
$this-> loadLayout();
$output = $this-> getLayout()-> getBlock('quickcart')-> toHtml();
$this-> getResponse()-> setBody($output);
}
}
Next we just need to modify the /etc/config. xml document. We’re simply overriding the very /checkout frontend route within Magento to hit our control before accessing the actions passed down from the Mage_Checkout_CartController.
/app/code/local/FastDivision/QuickCart/etc/config. xml
<? xml version="1. 0"? >
<config>
<modules>
<FastDivision_QuickCart>
<version> 0. 1 . 0 </version>
</FastDivision_QuickCart>
</modules>
<frontend>
<routers>
<checkout>
<args>
<modules>
<FastDivision_QuickCart before="Mage_Checkout"> FastDivision_QuickCart_Checkout </FastDivision_QuickCart>
</modules>
</args>
</checkout>
</routers>
</frontend>
</config>
Create the Cart Dropdown Block
The actual cart dropdown block displays a list of
items in the customer’s cart whenever mousing over the header carry link.
/app/design/frontend/YOUR_THEME/template/checkout/cart/header. phtml
<? php if ($this-> getIsNeedToDisplaySideBar()):? >
<? php $_cartQty = $this-> getSummaryCount()? >
<li class="cart">
<a href=" <? php echo $this-> getUrl('checkout/cart')? > " class="cart-link"> <? php echo $this-> __('My Cart')? > ( <? php print out (! empty($_cartQty))? $_cartQty: '0';? > ) </a>
<div class="quickcart">
<div class="quickcart-container">
<? php
$_items sama dengan $this-> getRecentItems($_cartQty);
if(count($_items)):
? >
<table>
<? php foreach($_items as $_item):? >
<? php replicate $this-> getItemHtml($_item)? >
<? php endforeach;? >
</table>
<div class="quickcart-checkout">
<a href=" <? php replicate $this-> getCheckoutUrl()? > "> <span> <? php replicate $this-> __('Proceed to Checkout')? > </span> </a>
</div>
<? php otherwise:? >
<p class="no-items-in-cart"> <? php echo $this-> __('You have no items in your cart. ')? > </p>
<? php endif? >
</div>
</div>
</li>
<? php endif? >
Remodel your Magento Theme’s Local. xml
So that you can display the
transport dropdown in the header we have to edit the local. xml apply for your theme. We’re additionally going to remove the existing trolley link to make way for the brand new cart link in our mass. If you don’t have a local. xml in your theme’s /layout directory website,you can find out more about local. xml documents here
.
/app/design/frontend/YOUR_THEME/layout/local. xml
<? xml version="1. 0"? >
<layout version="0. one 0">
<default>
<reference name="header">
<! -- Quick Cart Dropdown -->
<block type="checkout/cart_sidebar" name="quickcart" template="checkout/cart/header. phtml">
<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>
</reference>
<reference name="top. links">
<remove name="checkout_cart_link"/>
</reference>
</default>
</layout>
Remodel your Magento Theme’s
Shop Header Template
After including the cart dropdown prohibit to your local. xml record we’ll need to render this in your theme’s header. phtml template file:
/app/design/frontend/base/YOUR_THEME/template/page/html/header. phtml
1
<? php replicate $this-> getChildHtml('quickcart')? >
Include this line directly below <? php replicate $this-> getChildHtml('topLinks')? > .
Create an AJAX Post Request Clicking “Add to Cart” in the Quick View
In case you followed our Quick Look at tutorial you should already have jQuery included in your Magento concept. We’re going to edit the actual Quick View block by adding some code to the productAddToCartForm submit event:
/app/design/frontend/YOUR_THEME/template/catalog/ajax/product/view. phtml
var productAddToCartForm = brand new VarienForm('order-form');
productAddToCartForm. submit sama dengan function(button, url)
if (this.validator.validate())
var form = this.form;
var oldUrl = form.action;
if (url)
form.action = url;
var e = null;
try
$jQ.post(' <?php echo $this-> helper('checkout/cart')-> getAddUrl($_product, array()) ?> ', $jQ('#order-form').serialize(), function(data)
// Close quick view
$jQ('.quick-view').trigger('close');
// Update quick cart
$jQ('.header .cart').remove();
$jQ('.header .links').append(data);
initQuickCart();
// Show quick cart temporarily to customer signifying cart addition
$jQ('html, body').animate( 'scrollTop': $jQ('.header .links').scrollTop() , 500);
$jQ('.header .cart').addClass('cart-active');
var showCartToUser = setTimeout(function()
$jQ('.header .cart').removeClass('cart-active');
, 5000);
);
catch (e)
throw e;
this.form.action = oldUrl;
if (e)
throw e;
if (button && button != 'undefined')
button.disabled = true;
return false;
. bind(productAddToCartForm);
function initQuickCart()
if($jQ('.quickcart').length && !$jQ('.no-items-in-cart').length)
$jQ('.cart').unbind().hoverIntent(
interval: 20,
over: function() $jQ(this).addClass('cart-active').find('.quickcart').show(); ,
out: function() $jQ(this).removeClass('cart-active').find('.quickcart').hide();
);
$jQ. post makes an AJAX post to the product increase cart URL. It transmits the form parameters from the Speedy View order form. The actual post callback returns the particular quick cart dropdown corner from /checkout/cart/header. phtml. All of us append the block to the Magento theme’s account menus and display the dropdown for 5 seconds to leave the customer know that we additional their product to the wagon.
Cart Dropdown jQuery Float Event
Now that we’ve a new way to add products for the cart via AJAX, constructed the dropdown block, along with tied the Quick Trolley and Quick View with menu extension in magento each other, we need a way to show the dropdown after mousing over the basket link. I recommend creating a primary. js file and the initQuickCart() function available sitewide:
/js/YOUR_THEME/main. js
$jQ(document). ready(function()
function initQuickCart()
if($jQ('.quickcart').length && !$jQ('.no-items-in-cart').length)
$jQ('.cart').hoverIntent(
interval: 20,
over: function() $jQ(this).addClass('cart-active').find('.quickcart').show(); ,
out: function() $jQ(this).removeClass('cart-active').find('.quickcart').hide();
);
);
For the floatoccasion Im using hoverIntent
with regard to jQuery
. Include hoverIntent to your Magento theme’s JavaScript directory and then masse jquery. hoverIntent
. minified. js in addition to main. js in your nearby. xml file (preferably at the endof the “head” reference
right after loading jQuery):
<? xml version="1. 0"? >
<layout>
<default>
<reference name="head">
<action method="addJs"> <script> YOUR_THEME/jquery. hoverIntent. minified. js </script> </action>
<action method="addJs"> <script> YOUR_THEME/main. js </script> </action>
</reference>
</default>
</layout>
Style the AJAX Wagon Dropdown
The last thing we need to perform is style our Rapid Cart dropdown with CSS. Add this code for your theme’s stylesheet and modify as you see fit:
. quickcart display: none; position: absolute; z-index: 9999; top: 36px; right: 0; padding: 0 0 4px 4px; background: #fff;
. cart-active. quickcart display: block;
. quickcart-container width: 380px; padding: 10px; font-size: 12px; font-weight: normal; text-transform: none; line-height: 1.3em;
. quickcart-checkout margin: 10px 0 0 0; padding: 16px 0 8px 0;
. quickcart td margin: 0 6px 0 0; padding: 10px 0 10px 0; color: #333; vertical-align: middle;
You should will have a functional Quick Cart dropdown which allows customers to purchase
goods via the Quick Watch popup without going to the item page. If you have any queries or run into issues keep a comment.
Oğuz Çelikdemir
Thanks so much, I have been
searching for a while such a solution.
You are welcome! Allow me to know
for those who have any questions.
Rbloodworth
Thank you for posting. We are having a
problem with getting the drop down (hoverIntent) to fireside. The cart is being developed as well as product list
included as expected. The “My Cart” is added to the header as expected, just do not have any impact on hover or roll more thanfrom the element
. Using Magento 1 . 6. 2 Any kind of suggestions?
Jake Johnson
Hello, sorry for the delay. Would you get any JavaScript mistakes in your browser? Please statement them and I’ll attempt to assist you further.
Eirik
Already been trying to get this to work nevertheless I am getting a js mistake
Error: initQuickCart is not described
Source File: http://www.localhost.com/new-jh/js/quickview/jquery-1.6.4.js
Collection: 634
I worked the method through the instructions
three times but still encountering the same problem. The files are all packed, not sure what might be the issue. Performs this extension require a config document inside the app
/etc/modules?
http://fastdivision.com/ Jake Johnson
Hi Eirik, good patience. Can you
attempt copying the initQuickCart functionality over to /app/design/frontend/YOUR_THEME/template/catalog/ajax/product/view. phtml? Odds are the AJAX Quick Perspective isn’t finding the initQuickCart perform. Throw it over there too and it should fix which problem.
http://fastdivision.com/ Jake Manley
We updated the article
to be able to reflect this fix.
Me personally Kremil
it’s also occur to me……and haven’t any remedy yetttt…. pufff
Pingback: DO IT YOURSELF Magento: Create AJAX Sign in & Registration Forms for the Magento Theme - Quick Division
Me Kremil
eroor javascript in.. whyy…
jquery. hoverIntent. minified. js
$jQ is not defined
return this particular. bind(‘mouseenter’, handleHover). bind(‘mouseleave’, handleHover)}})(jQuery);
main. js
$jQ is not really defined
$jQ(document). ready(function()
thank you for great article..
Make sure that your jQuery has the jQ namespace
to avoid issues with Prototype
(the default JS library utilized by Magento). Place this collection at the bottom of your jQuery data file:
var $jQ = jQuery. noConflict();
Or you can add that immediately after including jQuery such as so:
var $jQ sama dengan jQuery. noConflict();
Me Kremil
in this case I only one best link cart hoverintent…thanks..
Vivek Shingala
many thanks very much…
helped me…
r patel
this really is gaurbag there is no efect within magento
Brilliant article
Natacha Beaugeais
This is a wonderful article. I had most of my own working, except for a few last small things - upgrading the block programmatically through the cart controller, as well as the wagon hover functionality
. Your own post helped me fill in typically the blanks. Kudos to you attempting toassist others too
!
Alice Bryony
Hi Thanks for spreading an amazing Blog, It will be really encouraging and helpful for Magento Users who have an idea associated with development (coding), Well we are a basic level of Magento consumer currently using a paid Component along with following url
Great had availed this wonderful chance of installing Ajax add to Basket component from this blog
. I had formed a great Experience with this
fantastic blog.
0 comments:
Post a Comment