添加计时器以在产品加入购物车后关闭Ajax快速购物车（Shopify）？

Question

我已经使用Timber framework成功设置了Shopify Ajax购物车，因此，如果您点击购物车以外的任何地方（或使用关闭按钮），我的购物车就会关闭。

我希望能够创建一个计时器，以便在将产品添加到购物车后，打开ajax快速购物车后，在5秒后关闭，以便用户可以继续购物。如果他们想要查看购物车的时间更长，他们可以点击购物车按钮重新打开，然后点击链接到完整的购物车页面。

有人建议我可以用timber.RightDrawer.close（）关闭购物车;我应该把它设置在一个像下面这样的监听器中，但是对于JS来说是新的，我正努力从哪里开始。

jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) { 
    // start timer function 

    // when timer is triggered: 
    timber.rightDrawer.close(); 
}); 

我试过以下，但我真的只是猜测......

jQuery('body').on('ajaxCart.afterCartLoad', function(evt, cart) { 
    // start timer function 
    $('#AddToCart').on('click', function(){ 
     setTimeout(function(){ 
     // when timer is triggered: 
     timber.rightDrawer.close(); 
     },500); 
    }); 
}); 

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

theme.liquid JS：

{% 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(); 
}); 
</script> 
{% endif %} 

timber.js.liquid：

timber.drawersInit = function() { 
    timber.LeftDrawer = new timber.Drawers('NavDrawer', 'left'); 
    timber.RightDrawer = new timber.Drawers('CartDrawer', 'right', 
    'onDrawerOpen': ajaxCart.load 
    }); 
}; 

timber.Drawers = (function() { 
    var Drawer = function (id, position, options) { 
    var defaults = { 
    close: '.js-drawer-close', 
    open: '.js-drawer-open-' + position, 
    openClass: 'js-drawer-open', 
    dirOpenClass: 'js-drawer-open-' + position 
}; 

this.$nodes = { 
    parent: $('body, html'), 
    page: $('#PageContainer'), 
    moved: $('.is-moved-by-drawer') 
}; 

this.config = $.extend(defaults, options); 
this.position = position; 

this.$drawer = $('#' + id); 

if (!this.$drawer.length) { 
    return false; 
} 

this.drawerIsOpen = false; 
this.init(); 
    }; 

Drawer.prototype.init = function() { 
$(this.config.open).on('click', $.proxy(this.open, this)); 
this.$drawer.find(this.config.close).on('click', $.proxy(this.close, this)); 
}; 

    Drawer.prototype.open = function (evt) { 
// Keep track if drawer was opened from a click, or called by another function 
var externalCall = false; 

// Prevent following href if link is clicked 
if (evt) { 
    evt.preventDefault(); 
} else { 
    externalCall = true; 
} 

// Without this, the drawer opens, the click event bubbles up to $nodes.page 
// which closes the drawer. 
if (evt && evt.stopPropagation) { 
    evt.stopPropagation(); 
    // save the source of the click, we'll focus to this on close 
    this.$activeSource = $(evt.currentTarget); 
} 

if (this.drawerIsOpen && !externalCall) { 
    return this.close(); 
} 

// Add is-transitioning class to moved elements on open so drawer can have 
// transition for close animation 
this.$nodes.moved.addClass('is-transitioning'); 
this.$drawer.prepareTransition(); 

this.$nodes.parent.addClass(this.config.openClass + ' ' + this.config.dirOpenClass); 
this.drawerIsOpen = true; 

// Run function when draw opens if set 
if (this.config.onDrawerOpen && typeof(this.config.onDrawerOpen) == 'function') { 
    if (!externalCall) { 
    this.config.onDrawerOpen(); 
    } 
} 

if (this.$activeSource && this.$activeSource.attr('aria-expanded')) { 
    this.$activeSource.attr('aria-expanded', 'true'); 
} 

// Lock scrolling on mobile 
this.$nodes.page.on('touchmove.drawer', function() { 
    return false; 
}); 

this.$nodes.page.on('click.drawer', $.proxy(function() { 
    this.close(); 
    return false; 
}, this)); 
    }; 

    Drawer.prototype.close = function() { 
if (!this.drawerIsOpen) { // don't close a closed drawer 
    return; 
} 

// deselect any focused form elements 
$(document.activeElement).trigger('blur'); 

// Ensure closing transition is applied to moved elements, like the nav 
this.$nodes.moved.prepareTransition({ disableExisting: true }); 
this.$drawer.prepareTransition({ disableExisting: true }); 

this.$nodes.parent.removeClass(this.config.dirOpenClass + ' ' + this.config.openClass); 

this.drawerIsOpen = false; 

this.$nodes.page.off('.drawer'); 
    }; 

    return Drawer; 
})(); 

// Initialize Timber's JS on docready 
$(timber.init); 

Answer 1

用setInterval来设置时间为5秒

 jQuery('body').on('click','#AddToCart', function(evt, cart) { 

    timber.RightDrawer.open(); 

     var myVar = setInterval(function(){ 
     timber.RightDrawer.close(); 
     clearInterval(myVar); 
     }, 5000); 
});