如何在滚动上关闭 Shopify Ajax 购物车

Question

我已经成功地设置了 Shopify Ajax 购物车 使用 Timber 框架，所以目前如果您单击购物车外的任何地方（或使用关闭按钮），我的购物车就会关闭。

我想知道如果用户在将商品添加到购物车后开始滚动，是否可以关闭购物车。我找到了另一个主题 - Beatnik - 它实现了这个目标，但 JS 不是很好，我不确定从哪里开始。

我已经意识到，当购物车打开时，网站的其余部分是不可滚动的，所以我想知道这是否是我无法滚动它的原因？

我当前的一些代码如下，请参阅与我的相同设置的 Timber 框架：

主题液体 -

{% 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的溢出被设置为"溢出：隐藏"，因此，不再滚动工作。您需要找到代码，单击购物车按钮时，带有"溢出隐藏"的类将添加到您的 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");
    }
}