Wagon for Your Magento Theme
One of many hottest
exts for Magento is the AJAX Quick Cart, a useful internet commerce extension event characteristic that allows customers
for you to swiftly add a product
with their cart without reloading often the page or getting sent straight to the checkout. In this training I will going to show you
the way tomake your own
AJAX wheeledfrom day one
. To see it intended for, have a look at our premium Magento 1 ) 6 theme.
Take note: This specific tutorial requires
the exact Quick View popup coming from our previous DIY Magento article - Create a Easy View for Your Magento Style
So as to build an AJAX Speedy Cart for Magento, we must do the following:
Create our cart extension plus override the checkout
carry controller.
Create the transport dropdown template which will demonstrate banner in magento basket products in a dropdown.
Update our frontend structure (local. xml) to add the cart dropdown prevent to the store header.
Upgrade header. phtml to add the particular cart dropdown
obstruct for the store header
.
Employ jQuery to make an AJAX publish call after
hitting the “Add to Cart” button in the Quick Check out popup.
Use jQuery to connect any hover event
on the header cart link.
Work with CSS to style the AJAX cart dropdown.
Create recognized
First thing we need to do
is definedthe folder structure
for the extension. Stick to the screenshot
under through adding the folders
and even files to your /app/code/local website directory:
Extension File Structure
Today let’s override the see cart controller. We’re doing 3 things:
Override the verylist action to load
the actual AJAX cart dropdown as long as we make an AJAX ask for.
Upon saving the trolley, we want to redirect to the AJAX cart dropdown when making a great AJAX request: _goBack().
Produce a new function to return the particular AJAX cart dropdown wedge: _sendSideCartHtml().
/app/code/local/FastDivision/QuickCart/controllers/Checkout/CartController. php
<? php
require_once('Mage/Checkout/controllers/CartController. php');
elegance 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 change the /etc/config. xml data. We’re simply overriding typically the /checkout frontend route inside Magento to hit our operator before accessing the actions handed 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 particular cart dropdown block reveals a list of
merchandise in the customer’s cart while mousing over the header wagon 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 publications (! 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 reveal $this-> getItemHtml($_item)? >
<? php endforeach;? >
</table>
<div class="quickcart-checkout">
<a href=" <? php reveal $this-> getCheckoutUrl()? > "> <span> <? php reveal $this-> __('Proceed to Checkout')? > </span> </a>
</div>
<? php as well:? >
<p class="no-items-in-cart"> <? php echo $this-> __('You have no items in your shopping cart software package. ')? > </p>
<? php endif? >
</div>
</div>
</li>
<? php endif? >
Keep track of Magento Theme’s Local. xml
As a way to display the
basket dropdown in the header we must edit the local. xml register for your theme. We’re furthermore going to remove the existing wheeled link to make way for the newest cart link in our mass. If you don’t have a local. xml in your theme’s /layout listing,you can find out more about local. xml data files here
.
/app/design/frontend/YOUR_THEME/layout/local. xml
<? xml version="1. 0"? >
<layout version="0. - 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>
Keep track of Magento Theme’s
Retail outlet Header Template
After incorporating the cart dropdown prohibit to your local. xml report we’ll need to render the idea in your theme’s header. phtml template file:
/app/design/frontend/base/YOUR_THEME/template/page/html/header. phtml
1
<? php reveal $this-> getChildHtml('quickcart')? >
Put this line directly beneath <? php reveal $this-> getChildHtml('topLinks')? > .
Compose an AJAX Post Require Clicking “Add to Cart” in the Quick View
Should you followed our Quick Viewpoint tutorial you should already have jQuery included in your Magento style. We’re going to edit often the 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 = fresh 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 help to increase cart URL. It directs the form parameters from the Effective View order form. The particular post callback returns the exact quick cart dropdown corner from /checkout/cart/header. phtml. We all append the block to your Magento theme’s account food selection and display the dropdown for 5 seconds to leave the customer know that we extra their product to the carry.
Cart Dropdown jQuery Are positioned Event
Now that we’ve crafted a way to add products into the cart via AJAX, designed the dropdown block, as well as tied the Quick Wheeled and Quick View collectively, we need a way to show the dropdown after mousing over the transport link. I recommend creating a major. js file and which makes 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 are positionedfunction We are using hoverIntent
regarding jQuery
. Put hoverIntent to your Magento theme’s JavaScript directory and then fill up jquery. hoverIntent
. minified. js and also main. js in your regional. xml file (preferably in the bottomof your respective “head” reference
following 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 Carry Dropdown
The last thing we need to carry out is style our Swift Cart dropdown with CSS. Add this code in your theme’s stylesheet and replace 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 surely have a functioning Quick Cart dropdown that enables customers to purchase
solutions via the Quick See popup without going to the product or service page. If you have any concerns or run into issues depart a comment.
Oğuz Çelikdemir
Thanks a lot so much, I have been
buying while such a solution.
Youre welcome! I want to know
in case you have any questions.
Rbloodworth
Appreciate your sharing posting. Me having a
problem with getting the drop down (hoverIntent) to fireplace. The cart is being created and also product list
added in as expected. The “My Cart” is added to the header as expected, just do not have any influence on hover or roll abovein the element
. Using Magento 1 . 6. 2 Virtually any suggestions?
Jake Johnson
Hi there, sorry for the delay. Can you get any JavaScript problems in your browser? Please review them and I’ll make an effort to assist you further.
Eirik
Recently been trying to get this to work nonetheless I am getting a js problem
Error: initQuickCart is not identified
Source File: http://www.localhost.com/new-jh/js/quickview/jquery-1.6.4.js
Series: 634
I worked our approach through the instructions
thrice but still encountering the same concern. The files are all crammed, not sure what might be the situation. Performs this extension require a config record inside the app
/etc/modules?
http://fastdivision.com/ Jake Johnson
Hi Eirik, great patience. Can you
try out copying the initQuickCart purpose over to /app/design/frontend/YOUR_THEME/template/catalog/ajax/product/view. phtml? It’s likely the AJAX Quick Look at isn’t finding the initQuickCart feature. Throw it over there also and it should fix that will problem.
http://fastdivision.com/ Jake Nicholson
I actually updated the article
to help reflect this fix.
Myself Kremil
it’s also affect me……and haven’t any option yetttt…. pufff
Pingback: BUILD-IT-YOURSELF Magento: Create AJAX Logon & Registration Forms to your Magento Theme - Quickly Division
Me Kremil
eroor javascript in.. whyy…
jquery. hoverIntent. minified. js
$jQ is not defined
return this specific. bind(‘mouseenter’, handleHover). bind(‘mouseleave’, handleHover)}})(jQuery);
main. js
$jQ is just not defined
$jQ(document). ready(function()
appreciate your sharing great article..
Make sure that your jQuery has the jQ namespace
to stop clashes with Prototype
(the default JS library employed by Magento). Place this series at the bottom of your jQuery submit:
var $jQ = jQuery. noConflict();
Or you can add the item immediately after including jQuery just like so:
var $jQ sama dengan jQuery. noConflict();
Me Kremil
in this case I only one leading link cart hoverintent…thanks..
Vivek Shingala
thank you very much…
helped me…
r patel
this is certainly gaurbag there is no efect inside magento
Brilliant course
Natacha Beaugeais
This is a amazing article. I had most of my very own working, except for a few ultimate small things - changing the block programmatically by way of the cart controller, in addition to the wheeled hover functionality
. Your current post helped me fill in the very blanks. Kudos to you wanting toaid others too
!
Alice Bryony
Hi Thanks for discussing an amazing Blog, It will be extremely encouraging and helpful for Magento Users who have an idea regarding development (coding), Well me a basic level of Magento customer currently using a paid Element together with following url
These days had availed this wonderful possibility of installing Ajax add to Transport element from this blog
. I had developed an excellent Experience with this
amazing blog.
0 comments:
Post a Comment