How to close a Shopify Ajax Cart on scroll?

Question

I've successfully set up the Shopify Ajax Cart using the Timber framework so currently my cart closes if you click anywhere outside of the cart (or using the close button).

I was wondering if it was possible to have the cart close should the user start to scroll after they have added an item to the cart. I found another theme - Beatnik - which achieves this but not being great with JS, I'm not sure where to begin.

I've realised that when the cart is open the rest of the site isn't scrollable so I'm wondering if this is why I'm having trouble getting it to scroll?

Some of my current code as follows, see Timber framework for same setup as mine:

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 %}

Any help would be really appreciated!

Frederik Witte · Accepted Answer · 2015-04-17T09:41:07.867

2

You can use the scroll event by jQuery for this.

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

Edit: The overflow of your html is being set to "overflow: hidden", hence, no scrolling is working anymore. You need to find the code, where on click of the cart button, the class with "overflow-hidden" is added to your html tag. Then you can use the function above to animate your scroll event.

Note: The click event is where your button "add to card" is being clicked.

edited Apr 17 '15 at 09:41

answered Apr 17 '15 at 09:10

Frederik Witte

1,167
2
11
35

Hi, thanks for your response, I don't need the cart to slide up I need it to close when the user scrolls on the body. Where you have put '//let the cart slide up' is this where I would put some sort of trigger to close the cart? Also where would this code need to go? Inside my theme.liquid file? Many thanks! – user2498890 Apr 17 '15 at 09:18
This just seems to animate the cart further to the left? Do you have any idea why this might be? – user2498890 Apr 17 '15 at 09:41
Of course you would need to adjust the animate function to your needs. Keep in mind that this forum is for help for getting the right start, not for sharing the complete solution. You should be able to get find the right animation values by yourself :) – Frederik Witte Apr 17 '15 at 09:45
I did adjust the classes and animation settings to my needs but nothing seems to be working am I right in positioning this code snippet inside my closing tag? – user2498890 Apr 17 '15 at 09:48
No, it's not. You should look into the source code of the timber framework. There you need to disable that the body gets set to "overflow: hidden". Then you need to find the "add-card" button click event and put the scroll function inside there. – Frederik Witte Apr 17 '15 at 09:50
1

I realised after that I needed to disable the overflow:scroll. I can take it from here, thanks for your direction so far. – user2498890 Apr 17 '15 at 09:56
Please note, that if you add the function into the click event, you will have a better performance, as the scroll trigger will only be active after you have clicked it. Otherwise you have a scroll trigger triggering all the time, which is using unnecessary resources. – Frederik Witte Apr 17 '15 at 10:01

McNab · Answer 2 · 2019-01-09T19:08:10.117

You can also simulate a click event on the drawer close button.

As pointed out in other answers, if you are using a theme based on Timber you need to remove;

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

From assets/timber.scss.liquid in order to get scrolling working at all.

I've used this answer to add a timer to stop the scroll event firing all the time and affecting performance.

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

How to close a Shopify Ajax Cart on scroll?

2 Answers2