Багатоетапне оформлення замовлення
Модуль ділить оформлення замовлення на чотири кроки: адреса, доставка, оплата та підсумок. Клієнт бачить індикатор прогресу та послідовно проходить кожен крок.
Кроки оформлення замовлення
Section titled “Кроки оформлення замовлення”Багатоетапне оформлення складається з чотирьох кроків:
| Крок | Назва за замовчуванням | Вміст |
|---|---|---|
| 1 | Адреса | Форма платіжних даних та адреси доставки |
| 2 | Доставка | Вибір способу доставки та опцій відправлення |
| 3 | Оплата | Вибір способу оплати та платіжні дані |
| 4 | Підсумок | Огляд замовлення, правові чекбокси, кнопка “Купую і плачу” |
Клієнт може повертатися назад без втрати даних. Перехід далі вимагає правильного заповнення поточної форми.
Налаштування
Section titled “Налаштування”Перейдіть до WooCommerce > Налаштування > Polski > Модулі PRO > Оформлення замовлення.
Увімкнення модуля
Section titled “Увімкнення модуля”Багатоетапне оформлення контролює опція:
polski_pro_checkout[multistep_enabled]Значення 1 вмикає багатоетапний макет, 0 повертає стандартне оформлення WooCommerce.
Назви кроків
Section titled “Назви кроків”Стандартні назви кроків можна змінити в налаштуваннях:
| Налаштування | Значення за замовчуванням |
|---|---|
| Заголовок кроку 1 | Адреса |
| Заголовок кроку 2 | Доставка |
| Заголовок кроку 3 | Оплата |
| Заголовок кроку 4 | Підсумок |
Назви кроків відображаються в індикаторі прогресу над формою оформлення.
Валідація між кроками
Section titled “Валідація між кроками”Плагін перевіряє дані після кожного кроку перед переходом далі:
- Крок 1 (Адреса) - обов’язкові поля: ім’я, прізвище, адреса, місто, поштовий індекс, телефон, e-mail
- Крок 2 (Доставка) - обов’язковий вибір способу доставки
- Крок 3 (Оплата) - обов’язковий вибір способу оплати
- Крок 4 (Підсумок) - обов’язкове позначення обов’язкових правових чекбоксів
Повідомлення про помилки з’являються під полями.
Технічна реалізація
Section titled “Технічна реалізація”WooCommerce Checkout Blocks (React)
Section titled “WooCommerce Checkout Blocks (React)”Для магазинів з WooCommerce Checkout Blocks модуль використовує React. Він інтегрується з WooCommerce Store API і не втручається в логіку WooCommerce.
Класичний резервний режим (shortcode)
Section titled “Класичний резервний режим (shortcode)”Для класичного оформлення (shortcode [woocommerce_checkout]) модуль використовує резервний режим JavaScript - ділить форму на секції та додає навігацію.
Класичний резервний режим:
- не вимагає React
- працює з наявними темами та кастомізаціями оформлення
- підтримує ті самі чотири кроки, що й версія Blocks
- використовує jQuery для маніпуляції DOM
Виявлення режиму
Section titled “Виявлення режиму”Плагін сам виявляє тип оформлення (Blocks чи shortcode) і завантажує відповідну версію. Нічого не потрібно налаштовувати вручну.
Стилізація
Section titled “Стилізація”CSS-клас body
Section titled “CSS-клас body”Коли багатоетапне оформлення активне, <body> отримує клас:
polski-multistep-checkoutЗавдяки цьому CSS націлюється лише на сторінки з багатоетапним оформленням:
body.polski-multistep-checkout .woocommerce-checkout { max-width: 720px; margin: 0 auto;}Класи кроків
Section titled “Класи кроків”Кожен крок отримує власний CSS-клас:
.polski-checkout-step { /* wspólne style kroków */ }.polski-checkout-step--active { /* aktywny krok */ }.polski-checkout-step--completed { /* ukończony krok */ }.polski-checkout-step--address { /* krok adresowy */ }.polski-checkout-step--shipping { /* krok dostawy */ }.polski-checkout-step--payment { /* krok płatności */ }.polski-checkout-step--review { /* krok podsumowania */ }Індикатор прогресу
Section titled “Індикатор прогресу”Індикатор прогресу це елемент <ol> з класом .polski-checkout-progress:
.polski-checkout-progress { /* kontener paska */ }.polski-checkout-progress__step { /* pojedynczy krok w pasku */ }.polski-checkout-progress__step--active { /* aktywny krok w pasku */ }.polski-checkout-progress__step--done { /* ukończony krok w pasku */ }Сумісність з іншими модулями
Section titled “Сумісність з іншими модулями”Правові чекбокси
Section titled “Правові чекбокси”Правові чекбокси з безкоштовної версії потрапляють до кроку 4 (Підсумок). Клієнт позначає їх перед розміщенням замовлення.
Поле NIP
Section titled “Поле NIP”Поле NIP відображається на кроці 1 (Адреса), відповідно до налаштувань модуля NIP.
Нестандартні поля
Section titled “Нестандартні поля”Поля, додані іншими плагінами (напр. хук woocommerce_checkout_fields), потрапляють до кроків на основі секції:
billing_*- крок 1shipping_*- крок 2order_*- крок 4
Доступність (a11y)
Section titled “Доступність (a11y)”Багатоетапне оформлення підтримує:
- навігацію клавіатурою (Tab, Enter, Escape)
- атрибути ARIA (
aria-current,aria-label,role="tablist") - оголошення змін кроків програмами зчитування екрана
- видимий фокус на інтерактивних елементах
Продуктивність
Section titled “Продуктивність”Скрипти та стилі завантажуються лише на сторінці оформлення замовлення. На інших сторінках модуль не додає ресурсів. Скрипти мають атрибут defer і не блокують рендеринг.
Найчастіші проблеми
Section titled “Найчастіші проблеми”Оформлення не ділиться на кроки
Section titled “Оформлення не ділиться на кроки”- Перевірте, чи опція
polski_pro_checkout[multistep_enabled]встановлена на1 - Очистіть кеш (плагіни кешування, CDN, кеш браузера)
- Перевірте консоль браузера на наявність помилок JavaScript
- Перевірте, чи немає конфлікту з іншими плагінами, що модифікують оформлення
Форма не переходить до наступного кроку
Section titled “Форма не переходить до наступного кроку”- Перевірте, чи всі обов’язкові поля заповнені
- Перевірте повідомлення валідації під полями
- Перевірте консоль браузера - помилки AJAX можуть блокувати валідацію
Стилі працюють неправильно
Section titled “Стилі працюють неправильно”- Перевірте, чи клас
polski-multistep-checkoutприсутній на елементі<body> - Перевірте, чи стилі плагіна не перекриваються темою (скористайтеся інспектором)
- Додайте власні стилі з вищою специфічністю селекторів