如何关闭滚动上的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");
    }
}