Using Jquery Ajax in Magento + Ajax Header Sidebar

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #php #json #ViewUI

php 同时被 2 个专栏收录

129 篇文章

订阅专栏

Magento

127 篇文章

订阅专栏

本文介绍如何在Magento中使用JavaScript和PHP实现购物车头部计数功能，包括通过AJAX加载Header部分的Sidebar，并展示了如何创建block及设置不同的模板。

在topmenu.phtml文件里。增加以下JS.

(function($){  
    $.ajax({  
        url: "<?php echo $this->getUrl('checkout/cart/headcount');?>",  
        type: "POST",  
        dataType:"json",  
        success: function(data) {  
            $('.cart_header').html(data['html']);
        }  
    });  
    $('.cart_header').live('mouseenter',function(){
        $('.block-content').show();
    });
    $('.cart_header').live('mouseleave',function(){
        $('.block-content').hide();
    });   
})(jQuery);

顺便贡献下如果要用AJAX来加载Header部分的SIdebar可以用以下方法

    public function headcountAction() {
    	$html = 'hello';
    	$block = $this->getLayout()->createBlock('checkout/cart_sidebar');
    	$block->setTemplate('checkout/cart/sidebar_header.phtml')
    	->addItemRender('simple','checkout/cart_item_renderer','checkout/cart/sidebar/default.phtml')
    	->addItemRender('grouped','checkout/cart_item_renderer_grouped','checkout/cart/sidebar/default.phtml')
    	->addItemRender('configurable','checkout/cart_item_renderer_configurable','checkout/cart/sidebar/default.phtml');
    	$html = $block->toHtml();
    	$arr = array('html'=>$html);
    	echo json_encode($arr);
    	return;
    }

上面用php创建block并使用各种方法的代码是按照核心的layout翻译得到，这段layout在事后应该注释掉

                    	<block type="checkout/cart_sidebar" name="cart_header" template="checkout/cart/sidebar_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 type="core/text_list" name="cart_sidebar.extra_actions" as="extra_actions" translate="label" module="checkout">
		                        <label>Shopping Cart Sidebar Extra Actions</label>
		                    </block>
		         </block>