将产品添加到购物篮时，切换下拉式迷你购物车 [英] Toggle dropdown mini-cart when product added to basket
问题描述
我在Magento商店的标头中放置了一个jQuery下拉式迷你购物车.当您的购物车"链接悬停时，菜单下拉菜单显示最近添加的项目.
I have a jQuery dropdown mini cart placed in the header of my Magento store. When the "Your Cart" link is hovered the menu dropsdown to display recently added items.
我现在集成了Ajax添加到购物车扩展程序，该扩展程序允许客户添加到购物车而无需刷新页面.我现在遇到的问题是，添加产品后，如果不徘徊在您的购物车"链接上，就无法说出话来.
I have now integrated the Ajax add to cart extension which allows customers to add to cart without refreshing the page. The problem I have now is that when products are added there is no way of telling without hoevering over the "Your Cart" link.
我希望能够在添加产品时自动将微型购物车放下，但是我不确定该怎么做?
I would like to be able to have the mini-cart drop down automatically when a product is added but I am not sure how to do this?
有人可以给我一些建议吗?
Could somebody give me some advice please?
提前谢谢！
用于Ajax的代码添加到购物车:
Code for Ajax add to cart:
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
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');
}
url = url.replace("checkout/cart","ajax/index"); // New Code
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').show();
//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);
}
}
});
} catch (e) {
}
// End of our new ajax code
this.form.action = oldUrl;
if (e) {
throw e;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>
And code for Mini-Cart:
function slideUp()
{
jQuery('#topCartContent:visible').slideUp(1000);
jQuery('.top-link-cart').addClass('mini-cart-layer-up');
jQuery('.top-link-cart').removeClass('mini-cart-layer-down');
}
function slideDown()
{
jQuery('#topCartContent:hidden').slideDown(1000);
/*startTimer()*/ /* optional*/
jQuery('.top-link-cart').addClass('mini-cart-layer-down');
jQuery('.top-link-cart').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('.top-link-cart').mouseover(function(){
toggleTopCart();
});
jQuery('.top-link-cart').mouseover(function(){
clearTimeout(timer);
}).mouseout(function(){
startTimer();
});
jQuery("#topCartContent").mouseover(function() {
clearTimeout(timer);
}).mouseout(function(){
startTimer();
});
});
推荐答案
这非常简单，但是我在浪费了几个小时(实际上并没有浪费)之后才学到了
This is amazingly simple, but I learn this after wasting a few of my hours (they were not waste actually)
创建观察者以观察将产品添加到购物车的时间.
Create an observer to observe when a product is added to cart.
Config.xml
Config.xml
<events>
<checkout_cart_product_add_after>
<observers>
<namespace_triggerevent>
<type>singleton</type>
<class>NameSpace_TriggerEvent_Model_Observer</class>
<method>opencartafteradd</method>
</namespace_triggerevent>
</observers>
</checkout_cart_product_add_after>
</events>
现在，Observer.php
Now, Observer.php
<?php
class NameSpace_TriggerEvent_Model_Observer
{
public function opencartafteradd($observer) {
$event = $observer->getEvent();
$product = $event->getProduct();
Mage::getSingleton('core/session')->setOpenMinicart('ON');
}
}
请注意，我们只是将会话变量设置为ON.在剩下的部分之后，最好使用header.phtml或footer.phtml上的少量javascript处理(可用于站点:P上的每个页面).我只是将迷你购物车的内容部分调低，然后在几秒钟后再次调高
Note that we are just setting a session variable ON. After this rest part would be handled using a small amount of javascript on preferably header.phtml or footer.phtml (available to every single page on site :P). I just toggle down the mini cart contents part and toggle up again after few seconds
<script type="text/javascript">
var $k = jQuery.noConflict();
$k(document).ready(function() {
var screen_width = $k(window).width();
var openminicart = '<?php echo Mage::getSingleton('core/session')->getOpenMinicart();?>';
if (screen_width > 780) {
if (openminicart == 'ON') {
jQuery("#header-cart").slideToggle('slow');
jQuery("#header-cart").addClass('skip-active');
setTimeout(function() {
jQuery("#header-cart").slideUp('fast');
$k('#header-cart').removeClass('skip-active');
}, 4000);
<?php Mage::getSingleton('core/session')->unsOpenMinicart();?>
}
}
});
</script>
这篇关于将产品添加到购物篮时，切换下拉式迷你购物车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
