javascript - 添加计时器以在将产品添加到购物车后关闭 Ajax Quick Cart (Shopify)？

Question

我已使用 Timber framework 成功设置了 Shopify Ajax 购物车因此，目前如果您单击购物车外部的任何位置(或使用关闭按钮)，我的购物车就会关闭。

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

有人建议我可以用 wood.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);
    });
});

我当前的一些代码如下，请参阅 Timber 框架以进行与我相同的设置:

主题.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设置时间为5s

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

  timber.RightDrawer.open();

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