如何關閉滾動上的Shopify Ajax購物車？

Question

我已經使用Timber框架成功設置了Shopify Ajax購物車，因此，如果您單擊購物車外的任何位置（或使用關閉按鈕），則當前我的購物車將關閉。

我想知道是否有可能在用戶將商品添加到購物車后開始滾動來關閉購物車。 我發現了另一個主題-Beatnik-實現了這一目標，但對於JS來說效果不佳，我不確定從哪里開始。

我已經意識到，當購物車打開時，網站的其余部分將無法滾動，因此我想知道這是否就是為什么我無法使其滾動？

我當前的一些代碼如下，請參見與我的設置相同的Timber框架：

theme.liquid-

{% comment %}
Ajaxify your cart with this plugin.
Documentation:
    - http://shopify.com/timber#ajax-cart
{% endcomment %}
{% if settings.ajax_cart_enable %}
  {{ 'handlebars.min.js' | asset_url | script_tag }}
  {% include 'ajax-cart-template' %}
  {{ 'ajax-cart.js' | asset_url | script_tag }}
  <script>
    jQuery(function($) {
      ajaxCart.init({
        formSelector: '#AddToCartForm',
        cartContainer: '#CartContainer',
        addToCartSelector: '#AddToCart',
        cartCountSelector: '#CartCount',
        cartCostSelector: '#CartCost',
        moneyFormat: {{ shop.money_format | json }}
      });
    });

    jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) {
      // Bind to 'ajaxCart.afterCartLoad' to run any javascript after the cart has loaded in the DOM

      timber.RightDrawer.open();
    });

//Something I have tried...

    $(window).on('scroll', function() {
    // when timer is triggered:
    timber.rightDrawer.close();
    });
</script>
{% endif %}

任何幫助將非常感激！

Answer 1

您可以為此使用jQuery的scroll事件。

$(window).on('click', function(){
    $('.cart').animate({height: '50px'}, function(){
       $(window).on('scroll', function(){
           $('.cart').animate({height: '0'});
           $(window).off('scroll');
        }); 
    }); 
});

編輯：您的html的溢出被設置為“溢出：隱藏”，因此，不再有滾動工作了。 您需要找到代碼，在單擊購物車按鈕的位置上，帶有“ overflow-hidden”的類將添加到您的html標記中。 然后，您可以使用上面的功能為滾動事件設置動畫。

注意：單擊事件是單擊“添加到卡”按鈕的位置。

Answer 2

您也可以在抽屜關閉按鈕上模擬單擊事件。

正如其他答案所指出的那樣，如果您使用的是基於Timber的主題，則需要刪除該主題；

.js-drawer-open {
  overflow: hidden;
}

從assets/timber.scss.liquid ，以便完全進行滾動操作。

我已經使用此答案添加了一個計時器，以停止滾動事件一直觸發並影響性能。

var scrollTimer = null;
$(window).scroll(function () {
    if (scrollTimer) {
        clearTimeout(scrollTimer);   // clear any previous pending timer
    }
    scrollTimer = setTimeout(handleScroll, 100);   // set new timer
});

function handleScroll() {
    scrollTimer = null;
    if ($('body').hasClass("js-drawer-open")) {
        $(".js-drawer-close").trigger("click");
    }
}