magento ajax加入购物车

发表于

引入jquery

如果是通站引用jquery,可以在default标签下加以上代码，如果只是针对商品浏览页面这里应该是catalog_product_view

1
2
3
<reference name="head">
    <action method="addItem"><type>js</type><name>jquery/jquery.min.js</name></action>
</reference>

接下来是解决jquery和prototype的冲突

一般我是把jQuery.noConflict();这句代码放到jquery源文件的最后，这样就不必在每次写jquery代码时写一遍

商品浏览页修改

接下来需要对商品浏览页的代码做一些修改，代码位置为app/design/frontend/Your Theme/Your Template/template/catalog/product/view.phtml,如果没有此文件，从base里面复制一份

原来代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
productAddToCartForm.submit = function(button, url) {
    if (this.validator.validate()) {
        var form = this.form;
        var oldUrl = form.action;
        if (url) {
           form.action = url;
        }
        var e = null;
        try {
            this.form.submit();
        } catch (e) {
        }
        this.form.action = oldUrl;
        if (e) {
            throw e;
        }
        if (button && button != 'undefined') {
            button.disabled = true;
        }
    }
}.bind(productAddToCartForm);

改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
productAddToCartForm.submit = function(button, url) {
    if (this.validator.validate()) {
        var form = this.form;
        var oldUrl = form.action;
        if (url) {
           form.action = url;
        }
        var e = null;
        //Start of our new ajax code
        if(!url){
            url = jQuery('#product_addtocart_form').attr('action');
        }
        var data = jQuery('#product_addtocart_form').serialize();
        data += '&isAjax=1';
        jQuery('#ajax_loader').show();
        try {
            jQuery.ajax({
               url: url,
               dataType: 'json',
               type : 'post',
               data: data,
               success: function(data){
                   jQuery('#ajax_loader').hide();
                   alert(data.status + ": " + data.message);
               }
            });
        } catch (e) {
        }
        //End of our new ajax code
        this.form.action = oldUrl;
        if (e) {
            throw e;
        }
    }
}.bind(productAddToCartForm);

接下来需要对catalog/product/view/addtocart.phtml文件做一些修改

原来代码：

1
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>

改成：

1
2
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
<span id='ajax_loader' style='display:none'><img src='<?php echo $this->getSkinUrl('images/opc-ajax-loader.gif')?>'/></span>

这里加上了一个简单的loading效果

加入购物车动作修改

现在我们需要对加入购物车动作做一些修改也就是CartController.php的addAction，一般是采用复写的方式而不是直接修改magento源码，这里还是采用直接修改核心代码的方法演示

在addAction里面可能看到有$params = $this->getRequest()->getParams();这一行，在这行的下面加上我们自己的逻辑，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
if($params['isAjax'] == 1){
    $response = array();
    try {
        if (isset($params['qty'])) {
            $filter = new Zend_Filter_LocalizedToNormalized(
            array('locale' => Mage::app()->getLocale()->getLocaleCode())
            );
            $params['qty'] = $filter->filter($params['qty']);
        }
        $product = $this->_initProduct();
        $related = $this->getRequest()->getParam('related_product');
        /**
         * Check product availability
         */
        if (!$product) {
            $response['status'] = 'ERROR';
            $response['message'] = $this->__('Unable to find Product ID');
        }
        $cart->addProduct($product, $params);
        if (!empty($related)) {
            $cart->addProductsByIds(explode(',', $related));
        }
        $cart->save();
        $this->_getSession()->setCartWasUpdated(true);
        /**
         * @todo remove wishlist observer processAddToCart
         */
        Mage::dispatchEvent('checkout_cart_add_product_complete',
            array('product' => $product, 'request' => $this->getRequest(), 'response' => $this->getResponse())
        );
        if (!$this->_getSession()->getNoCartRedirect(true)) {
            if (!$cart->getQuote()->getHasError()){
                $message = $this->__('%s was added to your shopping cart.',                      Mage::helper('core')->htmlEscape($product->getName()));
                $response['status'] = 'SUCCESS';
                $response['message'] = $message;
            }
        }
    } catch (Mage_Core_Exception $e) {
        $msg = "";
        if ($this->_getSession()->getUseNotice(true)) {
            $msg = $e->getMessage();
        } else {
            $messages = array_unique(explode("\n", $e->getMessage()));
            foreach ($messages as $message) {
                $msg .= $message.'<br/>';
            }
        }
        $response['status'] = 'ERROR';
        $response['message'] = $msg;
    } catch (Exception $e) {
        $response['status'] = 'ERROR';
        $response['message'] = $this->__('Cannot add the item to shopping cart.');
        Mage::logException($e);
    }
    $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
    return;
}

正常情况完成上面的代码ajax加入购物车可以生效了，点击注册详情页加入购物车按钮，看到一个loading图，然后出现一个包含成功信息的警告框

更新头部导航链接和迷你购物车

上面弹出警告框的做法显然不够友好，比较好的做法是加入购物车成功后更新头部导航链接和迷你购物车，下面的代码告诉你怎么完成这个

把刚才view.phtml中ajax请求相关的代码改成

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery.ajax({
    url: url,
    dataType: 'json',
    type : 'post',
    data: data,
    success: function(data){
        jQuery('#ajax_loader').hide();
        //alert(data.status + ": " + data.message);
        if(jQuery('.block-cart')){
            jQuery('.block-cart').replaceWith(data.sidebar);
        }
        if(jQuery('.header .links')){
            jQuery('.header .links').replaceWith(data.toplink);
        }
    }
});

对就的addAction改成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
if($params['isAjax'] == 1){
    $response = array();
    try {
        if (isset($params['qty'])) {
            $filter = new Zend_Filter_LocalizedToNormalized(
            array('locale' => Mage::app()->getLocale()->getLocaleCode())
            );
            $params['qty'] = $filter->filter($params['qty']);
        }
        $product = $this->_initProduct();
        $related = $this->getRequest()->getParam('related_product');
        /**
         * Check product availability
         */
        if (!$product) {
            $response['status'] = 'ERROR';
            $response['message'] = $this->__('Unable to find Product ID');
        }
        $cart->addProduct($product, $params);
        if (!empty($related)) {
            $cart->addProductsByIds(explode(',', $related));
        }
        $cart->save();
        $this->_getSession()->setCartWasUpdated(true);
        /**
         * @todo remove wishlist observer processAddToCart
         */
        Mage::dispatchEvent('checkout_cart_add_product_complete',
            array('product' => $product, 'request' => $this->getRequest(), 'response' => $this->getResponse())
        );
        if (!$this->_getSession()->getNoCartRedirect(true)) {
            if (!$cart->getQuote()->getHasError()){
                $message = $this->__('%s was added to your shopping cart.', Mage::helper('core')->htmlEscape($product->getName()));
                $response['status'] = 'SUCCESS';
                $response['message'] = $message;
                //New Code Here
                $this->loadLayout();
                $toplink = $this->getLayout()->getBlock('top.links')->toHtml();
                $sidebar = $this->getLayout()->getBlock('cart_sidebar')->toHtml();
                $response['toplink'] = $toplink;
                $response['sidebar'] = $sidebar;
            }
        }
    } catch (Mage_Core_Exception $e) {
        $msg = "";
        if ($this->_getSession()->getUseNotice(true)) {
            $msg = $e->getMessage();
        } else {
            $messages = array_unique(explode("\n", $e->getMessage()));
            foreach ($messages as $message) {
                $msg .= $message.'<br/>';
            }
        }
        $response['status'] = 'ERROR';
        $response['message'] = $msg;
    } catch (Exception $e) {
        $response['status'] = 'ERROR';
        $response['message'] = $this->__('Cannot add the item to shopping cart.');
        Mage::logException($e);
    }
    $this->getResponse()->setBody(Mage::helper('core')->jsonEncode($response));
    return;
}

现在当点击加入购物车，加入购物车成功后头部导航链接和迷你购物车部分会更新，而不是弹出一个警告框。

至此，ajax加入购物相关的代码已经完毕，如果想要更新的效果，可以结合jquery fancybox做一个popup，popup内容类似于上面的javascript警告框架

原文:http://excellencemagentoblog.com/magento-add-product-to-cart-ajax