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的scroll事件。

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

编辑：你的html的溢出被设置为＆＃34;溢出：隐藏＆＃34;，因此，没有滚动工作了。你需要找到代码，点击购物车按钮的地方，带有＆＃34;溢出隐藏＆＃34;被添加到您的html标记中。然后，您可以使用上述功能为滚动事件设置动画。

注意：点击事件是您的按钮＆＃34;添加到卡＆＃34;被点击了。

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购物车？

2 个答案: