如何关闭滚动的 Shopify Ajax 购物车？

Question

我已经使用 Timber framework 成功设置了 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 的滚动事件。

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

编辑：您的 html 的溢出设置为 "overflow: hidden"，因此，滚动不再有效。您需要找到代码，在点击购物车按钮时，class 和 "overflow-hidden" 被添加到您的 html 标签中。然后你可以使用上面的函数来为你的滚动事件设置动画。

注意：点击事件是您的按钮 "add to card" 被点击的地方。

Answer 2

你也可以模拟抽屉关闭按钮的点击事件。

正如其他答案中所指出的，如果您使用的是基于 Timber 的主题，则需要将其删除；

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

从 assets/timber.scss.liquid 开始，以便完全滚动。

我已经使用 this answer 添加了一个计时器来停止滚动事件一直触发并影响性能。

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

如何关闭滚动的 Shopify Ajax 购物车？

How to close a Shopify Ajax Cart on scroll?

javascript

jquery

shopify