| | |
| | | }, config); |
| | | |
| | | |
| | | |
| | | this.stepMultiplier = 1; |
| | | |
| | | this.cache = new window.jvbCache('cart', {TTL: 8.64e+7}); |
| | |
| | | |
| | | this.initElements(); |
| | | this.bindEvents(); |
| | | |
| | | this.popup = new window.jvbPopup({ |
| | | popup: this.checkout, |
| | | toggle: this.toggle, |
| | | name: 'Cart', |
| | | onOpen: this.maybeAddEmptyState.bind(this), |
| | | }); |
| | | this.init(); |
| | | |
| | | this.toggle.hidden = false; |
| | |
| | | } |
| | | } |
| | | handleClick(e) { |
| | | if (window.targetCheck(e, '.toggle-cart')) { |
| | | let toggle = window.targetCheck(e, '.toggle-cart'); |
| | | console.log('Toggle found. Toggling cart'); |
| | | this.toggleCart(); |
| | | } else if (window.targetCheck(e, 'button') && window.targetCheck(e, 'div.quantity')) { |
| | | if (window.targetCheck(e, 'button') && window.targetCheck(e, 'div.quantity')) { |
| | | let quantity = window.targetCheck(e, 'div.quantity'); |
| | | this.handleNumberClick(e, quantity); |
| | | }else if (window.targetCheck(e, '[data-add-to-cart]')) { |
| | |
| | | this.handleRemoveFromCart(remove); |
| | | } else if (window.targetCheck(e, '[data-clear-cart]')) { |
| | | this.clearCart(); |
| | | } else if (this.checkout.classList.contains('expanded') && |
| | | !this.checkout.contains(e.target) && |
| | | e.target !== this.toggle) { |
| | | this.closeCart(); |
| | | } |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | toggleCart() { |
| | | if (!this.checkout.classList.contains('expanded')) { |
| | | this.openCart(); |
| | | } else { |
| | | this.closeCart(); |
| | | } |
| | | } |
| | | openCart(message = 'Opened Cart') { |
| | | this.checkout.classList.add('expanded'); |
| | | this.toggle.title = 'Hide cart'; |
| | | this.toggle.ariaExpanded = true; |
| | | this.toggle.querySelector('span').textContent = 'Close Cart'; |
| | | this.a11y.announce(message); |
| | | this.maybeAddEmptyState(); |
| | | document.addEventListener('keydown', this.keyHandler); |
| | | } |
| | | maybeAddEmptyState() { |
| | | let empty = this.itemsList.querySelector('.empty'); |
| | | if(empty) { |
| | |
| | | this.checkoutPanel.title = 'Checkout'; |
| | | } |
| | | } |
| | | closeCart(message = 'Closed Cart') { |
| | | this.checkout.classList.remove('expanded'); |
| | | this.toggle.title = 'Show Cart'; |
| | | this.toggle.ariaExpanded = false; |
| | | |
| | | this.toggle.querySelector('span').textContent = ''; |
| | | this.a11y.announce(message); |
| | | document.removeEventListener('keydown', this.keyHandler); |
| | | } |
| | | handleEscape(e) { |
| | | if (e.key === 'Escape') { |
| | | this.closeCart('Closed Cart with escape key'); |
| | | this.stepMultiplier = 1; |
| | | } else if (e.ctrlKey && e.shiftKey) { |
| | | this.stepMultiplier = Math.max(parseInt(this.stepMultiplier) * 100, 1000); |