Багатоетапна каса

Модуль ділить касу на чотири кроки: адреса, доставка, оплата та підсумок. Клієнт бачить панель прогресу та проходить послідовно через кожен крок.

Кроки каси

Багатоетапна каса складається з чотирьох кроків:

Крок	Назва за замовчуванням	Вміст
1	Адреса	Форма білінгових даних та адреси доставки
2	Доставка	Вибір способу доставки та опцій відправлення
3	Оплата	Вибір способу оплати та платіжні дані
4	Підсумок	Перегляд замовлення, правові чекбокси, кнопка “Купую та плачу”

Клієнт може повертатися до попередніх кроків без втрати введених даних. Перехід до наступного кроку вимагає правильного заповнення поточної форми.

Налаштування

Перейдіть до WooCommerce > Налаштування > Polski > Модулі PRO > Каса.

Увімкнення модуля

Багатоетапна каса контролюється опцією:

polski_pro_checkout[multistep_enabled]

Значення 1 вмикає багатоетапний макет, 0 повертає стандартну касу WooCommerce.

Назви кроків

Назви кроків за замовчуванням можна змінити в налаштуваннях:

Параметр	Значення за замовчуванням
Заголовок кроку 1	Адреса
Заголовок кроку 2	Доставка
Заголовок кроку 3	Оплата
Заголовок кроку 4	Підсумок

Назви кроків відображаються в панелі прогресу над формою каси.

Валідація між кроками

Плагін валідує дані після кожного кроку перед дозволом на перехід до наступного:

Крок 1 (Адреса) - обов’язкові поля: ім’я, прізвище, адреса, місто, поштовий індекс, телефон, електронна пошта
Крок 2 (Доставка) - обов’язковий вибір способу доставки
Крок 3 (Оплата) - обов’язковий вибір способу оплати
Крок 4 (Підсумок) - обов’язкове відмічання обов’язкових правових чекбоксів

Повідомлення валідації з’являються inline під відповідним полем.

Технічна реалізація

WooCommerce Checkout Blocks (React)

Для магазинів, що використовують WooCommerce Checkout Blocks (блоковий редактор), модуль використовує React для рендерингу кроків. Компоненти інтегруються з WooCommerce Store API та зберігають повну сумісність із розширеннями Checkout Blocks.

Рендеринг відбувається на стороні клієнта. Плагін реєструється як розширення Checkout Blocks та модифікує макет форми без втручання в логіку WooCommerce.

Класичний фолбек (shortcode)

Для магазинів, що використовують класичну касу (shortcode [woocommerce_checkout]), модуль забезпечує фолбек на JavaScript. Скрипт ділить наявну форму на секції та додає навігацію між ними.

Класичний фолбек:

не вимагає React
працює з наявними темами та кастомізаціями каси
підтримує ті самі чотири кроки, що й версія Blocks
використовує jQuery для маніпуляції DOM

Визначення режиму

Плагін автоматично визначає, чи каса використовує Checkout Blocks чи класичний shortcode, та завантажує відповідну реалізацію. Ручне налаштування режиму не потрібне.

Стилізація

CSS-клас body

Коли багатоетапна каса активна, до елемента <body> додається клас:

polski-multistep-checkout

Це дає змогу спрямовувати CSS-стилі виключно на сторінки з багатоетапною касою:

body.polski-multistep-checkout .woocommerce-checkout {
    max-width: 720px;
    margin: 0 auto;
}

Класи кроків

Кожний крок отримує власний CSS-клас:

.polski-checkout-step { /* спільні стилі кроків */ }
.polski-checkout-step--active { /* активний крок */ }
.polski-checkout-step--completed { /* завершений крок */ }
.polski-checkout-step--address { /* крок адреси */ }
.polski-checkout-step--shipping { /* крок доставки */ }
.polski-checkout-step--payment { /* крок оплати */ }
.polski-checkout-step--review { /* крок підсумку */ }

Панель прогресу

Панель прогресу рендериться як елемент <ol> із класом .polski-checkout-progress. Кожний елемент списку відповідає одному кроку:

.polski-checkout-progress { /* контейнер панелі */ }
.polski-checkout-progress__step { /* окремий крок у панелі */ }
.polski-checkout-progress__step--active { /* активний крок у панелі */ }
.polski-checkout-progress__step--done { /* завершений крок у панелі */ }

Сумісність з іншими модулями

Правові чекбокси

Правові чекбокси з безкоштовної версії Polski for WooCommerce автоматично переносяться до кроку 4 (Підсумок). Клієнт повинен їх відмітити перед оформленням замовлення.

Поле NIP

Поле NIP відображається в кроці 1 (Адреса) відповідно до конфігурації умовного відображення з модуля NIP.

Нестандартні поля

Поля, додані іншими плагінами (наприклад, через хук woocommerce_checkout_fields), автоматично призначаються до відповідного кроку на основі їхньої секції:

billing_* - крок 1
shipping_* - крок 2
order_* - крок 4

Багатоетапна каса підтримує:

навігацію клавіатурою (Tab, Enter, Escape)
атрибути ARIA (aria-current, aria-label, role="tablist")
оголошення змін кроків екранними зчитувачами
видимий фокус на інтерактивних елементах

Продуктивність

Модуль завантажує скрипти та стилі лише на сторінці каси. На інших сторінках магазину ніяких ресурсів не додається. Скрипти завантажуються з атрибутом defer, щоб не блокувати рендеринг сторінки.

Найпоширеніші проблеми

Каса не ділиться на кроки

Перевірте, чи опція polski_pro_checkout[multistep_enabled] встановлена на 1
Очистіть кеш (плагіни кешування, CDN, кеш браузера)
Перевірте консоль браузера на наявність помилок JavaScript
Перевірте, чи немає конфлікту з іншими плагінами, що модифікують касу

Форма не переходить до наступного кроку

Перевірте, чи всі обов’язкові поля заповнені
Перевірте повідомлення валідації під полями
Перевірте консоль браузера - помилки AJAX можуть блокувати валідацію

Стилі не працюють правильно

Перевірте, чи клас polski-multistep-checkout присутній на елементі <body>
Перевірте, чи стилі плагіна не перезаписуються темою (використайте інспектор)
Додайте власні стилі з вищою специфічністю селекторів

Пов’язані ресурси

Ця сторінка має виключно інформаційний характер і не є юридичною консультацією. Перед впровадженням зверніться до юриста. Polski for WooCommerce - це програмне забезпечення з відкритим кодом (GPLv2), що надається без гарантій.