如何關閉滾動的Shopify Ajax購物車？

我已使用Timber framework成功設置了Shopify Ajax購物車，因此，如果您點擊購物車以外的任何地方（或使用關閉按鈕），我的購物車就會關閉。如何關閉滾動的Shopify Ajax購物車？

我在想，如果用戶在將商品添加到購物車後開始滾動，是否可以關閉購物車。我發現了另一個主題 - Beatnik - 它實現了這一點，但對JS不太好，我不知道從哪裏開始。

我意識到，當購物車被打開時，網站的其他部分是不可滾動的，所以我想知道這是爲什麼我很難讓它滾動？

我的一些當前的代碼如下，請參閱木材框架相同的設置我的：

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

任何幫助將非常感激！

來源

2015-04-17 user2498890

您可以通過jQuery使用滾動事件。

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

編輯：您的html溢出被設置爲「overflow：hidden」，因此，不再滾動工作。你需要找到代碼，在點擊購物車按鈕的地方，帶有「溢出隱藏」的類被添加到你的html標籤中。然後你可以使用上面的函數來動畫你的滾動事件。

注意：點擊事件是點擊「添加到卡片」按鈕的位置。

來源

2015-04-17 09:10:58

嗨，感謝您的回覆，我不需要購物車向上滑動，我需要它在用戶滾動身體時關閉。如果你把'//讓購物車向上滑動'，我會在哪裏放置某種觸發器來關閉購物車？此外，代碼需要去哪裏？在我的theme.liquid文件裏面？非常感謝！ – user2498890

這似乎只是將購物車進一步放置在左側？你有什麼想法，爲什麼這可能是？ – user2498890

當然，您需要根據需要調整動畫功能。請記住，此論壇旨在幫助您獲得正確的開始，而不是分享完整的解決方案。你應該能夠自己找到正確的動畫值:) –

如何關閉滾動的Shopify Ajax購物車？

回答

相關問題