제품이 바구니에 추가되었을 때 드롭 다운 미니 카트 켜기

Question

jQuery 드롭 다운 미니 카트가 Magento 매장의 머리글에 있습니다. "장바구니"링크를 클릭하면 메뉴가 드롭 다운되어 최근에 추가 된 항목이 표시됩니다.

이제 고객이 페이지를 새로 고치지 않고 장바구니에 추가 할 수있는 장바구니 확장에 추가 된 Ajax를 통합했습니다. 지금 내가 가진 문제는 제품을 추가 할 때 "장바구니"링크를 누르지 않고도 말할 수있는 방법이 없다는 것입니다.

제품을 추가 할 때 자동으로 미니 카트를 드롭 다운하고 싶지만 어떻게해야할지 모르겠습니까?

누군가 내게 약간의 조언을 주실 수 있습니까?

미리 감사드립니다. 아약스 장바구니에 추가에 대한

코드 :

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

Answer 1

이 놀라 울 정도로 간단하지만, 난 내 시간의 몇 낭비 후이 내용 (그들이 있었다 실제로 낭비되지 않음)

카트가 제품을 추가 할 때 관찰자를 생성하십시오. 우리가 ON 세션 변수를 설정하는

의 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'); 
} 
} 

참고. 이 나머지 부분은 header.phtml 또는 footer.phtml (site : P의 모든 단일 페이지에서 사용 가능)에서 소량의 Java 스크립트를 사용하여 처리됩니다. 난 그냥 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> 

Answer 2

당신이 말하는 '... 제품은 "장바구니"링크를 통해 hoevering없이 말하는 방법이 없습니다 추가 될 때.'. 방법이 있어야합니다. 장바구니의 '드롭 다운'동작을 트리거하는 코드는 무엇입니까?

대부분 jQuery.sliedeDown 또는 유사합니다. 귀하의 아약스 호출 성공 함수에서, 당신은 같은 것을 실행해야합니다. 또는 자바 스크립트 이벤트를 프로그래밍 방식으로 트리거 할 수 있습니다. 성공 함수 : $ ('# cart'). mouseover().

Answer 3

jQuery slideDown(), - Up() 또는 -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(); 
} 

희망이 당신에게 도움이 더 ;-)