document.getElementById('cart-form').addEventListener('submit',(event)=>{
if(event.submitter) event.submitter.classList.add('loading');
})
class CartRemoveButton extends HTMLElement {
constructor() {
super();
this.addEventListener('click', (event) => {
event.preventDefault();
this.closest('.cart-item__quantity').querySelector('.quantity__input').value = 0
this.closest('cart-items').updateQuantity(this.dataset.index, 0);
});
}
}
customElements.define('cart-remove-button', CartRemoveButton);
class DiscountInput extends HTMLElement {
constructor() {
super();
this.input = this.querySelector('input');
this.button = this.querySelector('button');
this.button.addEventListener('click', this.onButtonClick.bind(this))
this.input.addEventListener('keypress', (event)=>{
if (event.key == 'Enter' || event.keyCode == 13){
event.preventDefault()
this.onButtonClick(event)
}
this.hideErrorMsg()
})
}
onButtonClick(event) {
event.preventDefault();
this.hideErrorMsg();
if(this.input.value != ''){
this.button.classList.add('loading')
EasyStore.Action.updateVoucher("create",this.input.value,(cart)=>{
this.button.classList.remove('loading')
if(cart.error && cart.error.message) {
this.renderErrorMsg(cart.error.message)
}else{
if(document.querySelector('vouchers-modal')) document.querySelector('vouchers-modal').close()
}
if(cart.cart_content) document.querySelector('#cart-template').innerHTML = cart.cart_content
})
}
}
renderErrorMsg(html){
this.querySelector('.form__message').classList.remove('hidden')
this.querySelector('.js-error-content').innerHTML = html
}
hideErrorMsg(){
this.querySelector('.form__message').classList.add('hidden')
}
}
customElements.define('discount-input', DiscountInput);
class DiscountRemoveButton extends HTMLElement {
constructor() {
super();
this.button = this.querySelector('a');
this.button.addEventListener('click', this.onButtonClick.bind(this))
}
onButtonClick(event) {
event.preventDefault();
this.enableLoading()
EasyStore.Action.updateVoucher("remove",this.button.dataset.discount_id,(cart)=>{
if(cart.cart_content) document.querySelector('#cart-template').innerHTML = cart.cart_content
})
}
enableLoading() {
this.closest('.totals').classList.add('cart__items--disabled');
this.closest('.totals').querySelector('.loading-overlay').classList.remove('hidden');
document.activeElement.blur();
}
disableLoading() {
this.closest('.totals').classList.remove('cart__items--disabled');
this.closest('.totals').querySelector('.loading-overlay').classList.add('hidden');
}
}
customElements.define('discount-remove-button', DiscountRemoveButton);
class CartItems extends HTMLElement {
constructor() {
super();
this.currentItemCount = Array.from(this.querySelectorAll('[name="updates[]"]'))
.reduce((total, quantityInput) => total + parseInt(quantityInput.value), 0);
this.debouncedOnChange = debounce((event) => {
this.onChange(event);
}, 300);
this.addEventListener('change', this.debouncedOnChange.bind(this));
}
onChange(event) {
this.updateQuantity(event.target.dataset.index, event.target.value, document.activeElement.getAttribute('name'));
}
updateQuantity(line, quantity, name) {
this.enableLoading(line);
this.hideErrorMsg();
let body = JSON.parse(serializeForm(document.getElementById('cart-form')));
console.log('body',body);
EasyStore.Action.updateCart(body,(cart)=>{
this.classList.toggle('is-empty', cart.item_count === 0);
let cartFooter = document.getElementById('main-cart-footer');
if (cartFooter) cartFooter.classList.toggle('is-empty', cart.item_count === 0);
this.disableLoading();
if(cart.error && cart.error.message) {
this.renderErrorMsg(cart.error.message)
this.disableLoading(line);
}
if(cart.cart_content) document.querySelector('#cart-template').innerHTML = cart.cart_content
if(window.EasyStore != undefined && window.EasyStore.Promotion != undefined && window.EasyStore.Promotion.updateCartPromotion != undefined) window.EasyStore.Promotion.updateCartPromotion()
})
}
renderErrorMsg(html){
this.querySelector('.cart_form__error').classList.remove('hidden')
this.querySelector('.cart_form__error .js-error-content').innerHTML = html
window.scrollTo(0, 0)
}
hideErrorMsg(){
this.querySelector('.cart_form__error').classList.add('hidden')
}
enableLoading(line) {
document.getElementById('main-cart-items').classList.add('cart__items--disabled');
this.querySelectorAll(`#CartItem-${line} .loading-overlay`).forEach((overlay) => overlay.classList.remove('hidden'));
document.activeElement.blur();
}
disableLoading() {
document.getElementById('main-cart-items').classList.remove('cart__items--disabled');
this.querySelectorAll('.loading-overlay').forEach((overlay) => overlay.classList.add('hidden'));
}
}
customElements.define('cart-items', CartItems);