const appCartCheckoutPage = (function () {
const form = document.querySelector('.uc-cart-checkout-form');
return {
init: function() {
if (form) {
this.addTitleForm();
this.addFieldMarkup();
this.addFieldPrivacyPolicy();
this.addButtonReturnBack();
this.renameButtonContinue();
this.changeTableOrderInformation();
this.addMaskToFieldPhone();
this.movingFieldEmail();
this.focusedField();
this.selectionOfficials();
this.validate();
}
},
addFieldPrivacyPolicy: function() {
form.insertAdjacentHTML('beforeend',`<div class="uc-cart-checkout-form__privacy-policy">Отправляя форму вы подтверждаете согласие с <a href="/privacy-policy" target="_blank">политикой обработки персональных данных.</a></div>`);
},
addButtonReturnBack: function() {
const actions = form.querySelector(".form-actions");
actions.insertAdjacentHTML('beforeend', `<a href="/cart" class="btn btn-return-back">Вернуться в корзину</a>`);
},
renameButtonContinue: function() {
form.querySelector(".form-actions #edit-continue").innerHTML = 'Продолжить';
},
addTitleForm: function() {
form.insertAdjacentHTML('beforeend',`<h3 class="uc-cart-checkout-form__title">Укажите ваши контактные данные!</h3>`);
},
addFieldMarkup: function() {
form.insertAdjacentHTML('beforeend',`<p class="uc-cart-checkout-form__markup">После оформления заказа мы свяжемся с вами и уточним информацию по доставке и оплате</p>`);
},
changeTableOrderInformation: function() {
const table = form.querySelector(".cart-review");
const tbody = table.querySelector('tbody');
const tfoot = table.querySelector('tfoot');
// добавляем строку "количества" в таблицу
let count = document.querySelector('.header__cart .count').textContent;
tfoot.insertAdjacentHTML('afterbegin',`<tr><td>Количество</td><td>${count} шт</td></tr>`);
// добавляем кнопку "Посмотреть заказ" в таблицу
tfoot.insertAdjacentHTML('beforeend',`<tr class="buttons"><td colspan="2"><a href="javascript://" class="btn btn-secondary">Посмотреть заказ</a></td></tr>`);
// добавляем событие клика на разворачивание спска товаров
tfoot.querySelector(".buttons .btn").addEventListener("click", e => {
e.preventDefault();
if (tbody.classList.contains("is-open")) {
tbody.classList.remove("is-open");
e.currentTarget.textContent = "Посмотреть заказ";
} else {
tbody.classList.add("is-open");
e.currentTarget.textContent = "Свернуть заказ";
}
});
// переименовываем текст на "На сумму"
tfoot.querySelector('.subtotal-title').textContent = 'На сумму';
},
addMaskToFieldPhone: function() {
form.querySelectorAll('[type="tel"]').forEach(item => {
item.setAttribute('type', 'text');
jQuery(item).inputmask({
alias: "+7##########",
"placeholder": "_",
clearMaskOnLostFocus: true,
showMaskOnHover: false,
showMaskOnFocus: true
});
});
},
movingFieldEmail: function () {
let detail = form.querySelector('#customer-pane div');
detail.classList.add('form-item');
detail.classList.add('form-item-customer-email');
const delivery = form.querySelector('#edit-panes-delivery');
delivery.prepend(detail.cloneNode(true));
detail.remove();
},
focusedField: function () {
const input = jQuery(".form-item textarea, input[type='text'], input[type='email'], input[type='tel'], input[name='phone'], input[name='password'], input[name='pass'], input[name='email'], input[name='number'], input[name='name']");
input.each(function () {
if (jQuery(this).val() !== "") {
jQuery(this).parents(".form-item").find("label").addClass("focused");
}
if (jQuery(this).hasClass("error")) {
jQuery(this).parents(".form-item").find("label").addClass("error");
}
});
input.on("focus", function() {
jQuery(this).parents(".form-item").find("label").addClass("focus");
});
input.on("blur", function () {
let thisInput = jQuery(this);
thisInput.parents(".form-item").find("label").removeClass("focused").removeClass("focus");
if (thisInput.val() !== "") {
thisInput.parents(".form-item").find("label").addClass("focused");
}
setTimeout(function () {
// console.log(thisInput.hasClass("error"));
if (thisInput.hasClass("error")) {
thisInput.parents(".form-item").find("label").addClass("error");
}
}, 100);
});
},
selectionOfficials: function () {
if (form.querySelector('#edit-customer-profile--wrapper')) {
// задаем значения по умолчанию
form.querySelector('#edit-customer-profile--wrapper #edit-customer-profile-legal').setAttribute('checked', 'checked');
form.querySelector('.form-item-panes-delivery-company').style.display = 'block';
// добавляем событие клика по переключателям
form.querySelectorAll('#edit-customer-profile--wrapper .form-item input').forEach(item => {
item.addEventListener('click', e => {
e.currentTarget.checked = true;
if (e.currentTarget.getAttribute('id') === 'edit-customer-profile-legal') {
form.querySelector('.form-item-panes-delivery-company').style.display = 'block';
} else {
form.querySelector('.form-item-panes-delivery-company').style.display = 'none';
}
});
})
}
},
validate: function () {
jQuery("#uc-cart-checkout-form").validate({
rules: {
'panes[delivery][company]': {
// required: true,
digits: true,
pattern: /^(\d{10}|\d{12})$/i,
},
},
messages: {
'panes[delivery][company]': {
pattern: "ИНН может состоять только из 10 или 12 цифр",
},
},
});
document.querySelector("#uc-cart-checkout-form #edit-continue").addEventListener('click', e => {
if (jQuery("#uc-cart-checkout-form").valid()) {
// console.log("ФОРМА ВАЛИДНА");
} else {
// console.log("ФОРМА НЕ ВАЛИДНА");
e.preventDefault();
}
});
},
}
})();
appCartCheckoutPage.init();