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

我目前的一些代码如下，请参阅与我相同设置的Timber框架：

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将时间设置为5s

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

  timber.RightDrawer.open();

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

将产品添加到购物车后，添加计时器以关闭Ajax Quick Cart（Shopify）？

1 个答案: