Корзина - оформления заказа

Особенности

  1. Вставка текста "Согласие с политикой персональных данных" после полей.
  2. Добавление кнопки "Вернуться в корзину".
  3. Преименование кнопки "Отправить" в "Продолжить".
  4. Добавление заголовка "Укажите ваши контактные данные" перед полями.
  5. Добавление текста описания перед полями.
  6. Добавление строки "Количество товара" в шт.
  7. Добавление кнопки "Посмотреть заказ".
  8. Сворачивание и разворачивание списка товаров по кнопке "Посмотреть заказ".
  9. Переименование текста на "На сумму".
  10. Добавление маски к полю с телефоном.
  11. Перемещение текстового поля с почтой к основным полям.
    По умолчанию поле находится в отдельной группе от основных полей. После перемещения можно спокойно стилизовать как и другие поля.
  12. Валидация полей.
    Подключаем свою нормальную валидацию вместо дефолтной проверки браузером.
JS
Код
      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();