Завдання

Створити преміальний мінімалістичний інтернет-магазин меблів на основі FLSStart, перенести frontend у зручну для керування WordPress-архітектуру та зберегти art-directed композицію на desktop і mobile. Рішення мало охопити editorial-розділ Rooms, повноцінний каталог WooCommerce, сторінки товарів, кошик, checkout і зрозумілий демонстраційний сценарій доставки.

Що реалізовано

Frontend: адаптивні FLSStart/SCSS-компоненти, семантичні шаблони та єдина дизайн-система перетворені на кастомну WordPress-тему. WordPress-архітектура: Rooms керуються як окремий тип контенту з полями SCF, а товари, категорії, залишки, кошик, checkout і замовлення — через WooCommerce.

Commerce і delivery: реалізовані та перевірені фільтрація за категоріями, зміна кількості, контроль залишків, cart drawer, checkout і підтвердження замовлення. Вибір відділення або поштомата Nova Poshta подано як чітко позначений demo-flow. Motion: IntersectionObserver керує поетапними Y/X-reveal, stagger карток та image reveal; наявний FLS parallax використовується лише в hero Home і Single Room, із підтримкою prefers-reduced-motion.

Основні складнощі

Головним викликом було поєднати editorial-motion із комерційним інтерфейсом, не уповільнюючи пошук товарів і checkout. Великі вихідні зображення спочатку збільшували mobile LCP до 31,5 с, а сторінку — приблизно до 40 МБ; фінальний етап зменшив обсяг візуальних ресурсів до приблизно 1,9 МБ і підняв mobile Lighthouse Performance до 93, LCP — 2,7 с, CLS — 0.

Проєкт також вимагав чіткого розділення кастомного контенту та даних WooCommerce, стабільної адаптивності від 390 до 1920 px і надійної production-міграції в ізольовану WordPress-інсталяцію та окрему базу даних.

Результат

Готовий до production адаптивний demo-магазин розгорнуто на solve.mike-dev.com.ua. Home, Rooms, Single Room, Shop, сторінки товарів, Cart, Checkout і Order Received вручну перевірені на 390 / 768 / 1440 / 1920 px: без горизонтального overflow, битих зображень і помилок у консолі. Build, wpbuild і git diff-check проходять успішно.

Межі demo: реальні платежі не виконуються. Cash on Delivery використовується лише для тестових замовлень. “Nova Poshta delivery UX is implemented in demo mode. Production API integration requires merchant credentials.”