2012-12-12 47 views
2

切换下拉微型车我已经把我的Magento商店的头一个jQuery下拉小型车。当“您的购物车”链接悬停时,菜单下拉菜单以显示最近添加的项目。当产品添加到购物篮

我现在已经集成了阿贾克斯添加到购物车扩展,它允许客户添加到购物车无需刷新页面。我现在面临的问题是,当添加产品时,如果没有通过“您的购物车”链接就无法告诉。

我希望能够有当添加一个产品是微型车自动降下来,但我不知道如何做到这一点?

请问有人能给我一些建议吗?

在此先感谢!

代码阿贾克斯添加到购物车:

<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(); 
    }); 
}); 

回答

3

这是非常简单的,但我学这个浪费几个我小时后(他们是实际上没有浪费)

创建一个观察者,当产品被添加到购物车观察。

的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

<?php 

class NameSpace_TriggerEvent_Model_Observer 
{ 
public function opencartafteradd($observer) { 
    $event = $observer->getEvent(); 
    $product = $event->getProduct(); 
    Mage::getSingleton('core/session')->setOpenMinicart('ON'); 
} 
} 

注意,我们只设置一个会话变量ON。在这部分剩余部分将使用少量的java脚本处理,最好是header.phtml或footer.phtml(可用于站点上的每个页面:P)。我只需拨动下来minicart部分内容,并几秒钟

<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> 
1

你说“......当产品被添加没有不hoevering在‘您的购物车’的链接,告诉的方式。”。一定有办法。触发您购物车“下拉”动作的代码是什么?

它最有可能是jQuery.sliedeDown或相似。在你的ajax调用的成功函数中,你需要执行相同的操作。或者,你可以以编程方式触发JavaScript事件,例如在成功函数中:$('#cart')。mouseover()。

+0

我已经加入购物车的minicart-下拉以上^ – user1704524

4

如果你使用jQuery了slideDown(), - 向上()或-Toggle(),你会发现一个动画毛刺(又名为秒的垂直移动层)。

所以我所做的就是仅简单地:

if ($('.messages .success-msg').length) { 

    $('.messages').css('display','none'); // 'disable' default messages on top of content 

    function showCartForASecOrThreeAndAHalf() { 
     $('#mini-cart .menu').css('display','block'); 
     setTimeout(function() { $('#mini-cart .menu').css('display',''); }, 3500); // display:'' to restore previous settings 
     } 

     showCartForASecOrThreeAndAHalf(); 
} 

希望这有助于你进一步;-)

+0

由于有很多帮助后,再次拨动了! – user1704524

+0

谢谢,炒锅很好 –

相关问题