Розробка інтернет-магазину та перенесення сайту з одного хостингу на інший – це завжди виклик, особливо коли клієнт хоче позбутися російських сервісів і водночас зберегти функціональність бізнесу.
У цьому кейсі ми розповімо, як наша команда допомогла українському бренду SMTH Underwear оновити їхній онлайн-магазин, перенести його з Tilda на WordPress і переїхати на український хостинг. Що з цього вийшло? Читайте далі, щоб дізнатися про всі етапи роботи та результати, яких ми досягли.
Євген Гуменюк, CEO & Founder в NML
Інформація про клієнта
SMTH Underwear – український інтернет-магазин, який спеціалізується на продажі стильної та комфортної спідньої білизни. Компанія працює на ринку вже кілька років і має лояльну аудиторію. Однак із початком повномасштабної війни в Україні у 2022 році перед клієнтом постала проблема: їхній сайт розміщувався на російському хостингу, а сама платформа була побудована на Tilda – конструкторі, який перестав відповідати потребам бізнесу в умовах нових реалій. Основні труднощі клієнта:
- Залежність від російських сервісів. Через вторгнення клієнт вирішив повністю відмовитися від російського хостингу.
- Обмеження Tilda. Платформа не дозволяла реалізувати складніші функції інтернет-магазину, такі як інтеграція зі складським обліком чи гнучка платіжна система.
- Технічні проблеми. Старий сайт потребував оновлення структури та контенту для зручності користувачів.
Клієнт звернувся до NML Digital із чітким запитом: перенести сайт на WordPress, розмістити його на українському хостингу та зберегти дизайн із мінімальними змінами. Для нас це був цікавий виклик, адже потрібно було не просто «переїхати», а й оптимізувати сайт для подальшого розвитку.
Результати нашої роботи
Ми успішно виконали всі поставлені завдання, а сайт SMTH Underwear отримав нове життя. Ось чого ми досягли:
Клієнт отримав повністю автономний, сучасний і зручний у користуванні онлайн-магазин, який відповідає технічним вимогам, цінностям бренду та готовий до подальшого розвитку. Ось як виглядає головна сторінка оновленого сайту:
Процес роботи
Наша команда підійшла до проєкту системно, розбивши його на кілька етапів. Над проєктом працював один розробник, що дозволило оптимізувати витрати та прискорити процес. Ось як ми працювали:
1. Складання технічного завдання (ТЗ)
Першим кроком стало детальне обговорення з клієнтом. Ми з’ясували, які функції потрібно зберегти, а які додати. ТЗ включало структуру сайту, вимоги до хостингу та інтеграцій. Цей етап зайняв 3 дні, адже важливо було врахувати всі побажання клієнта, зокрема збереження дизайну.
2. Оновлення структури та допрацювання контенту
Ми проаналізували старий сайт і запропонували оновити меню для зручності користувачів. Наприклад, додали фільтри за розмірами та категоріями товарів, що спростило пошук. Контент (описи товарів, фото) перенесли вручну, зберігши SEO-оптимізацію. Цей етап зайняв 7 днів.
3. Розробка сайту
Розробка сайту на WordPress стала центральним етапом проєкту і тривала 15 днів. Ми використали стек технологій PHP, JavaScript і HTML, щоб створити функціональний інтернет-магазин із збереженням дизайну, але з покращеною продуктивністю.
Завдяки використанню WordPress у поєднанні з PHP, JavaScript, HTML/CSS і плагінною екосистемою, сайт став не лише швидким і надійним, а й легко масштабованим. Наприклад, із можливістю додавання багатомовності, блогу чи CRM-інтеграцій без кардинальних змін у коді. З якими труднощами ми стикнулися?
Кастомні слайдери з унікальними ефектами переходів
На Tilda сайт SMTH Underwear мав слайдер на головній сторінці з нестандартними анімаціями: елементи (зображення товарів, текст) з’являлися з різних боків із затримкою та ефектом “fade-in”. У WordPress стандартний функціонал (наприклад, плагіни типу MetaSlider чи базові блоки Gutenberg) не підтримує такі складні ефекти «з коробки».
Ми інтегрували плагін Slider Revolution, який дозволяє створювати кастомні слайдери. Розробник вручну налаштував анімацію для кожного шару (зображення, текст), використовуючи JavaScript для точного відтворення ефектів із Tilda.
Кастомні віджети із «нульовими блоками»
Tilda дозволяє створювати так звані «нульові блоки» – повністю кастомізовані секції з унікальним дизайном (наприклад, асиметричний банер із текстом і кнопкою, що частково виходить за межі контейнера). У WordPress таких аналогів немає, адже редактор Gutenberg працює з фіксованими блоками, а більшість тем мають обмеження контейнерів.
Ми створили кастомний блок через HTML і CSS, використавши функцію register_block_type у PHP для інтеграції в WordPress.
4. Інтеграція складського обліку та платіжної системи Wayforpay
Для забезпечення зручних онлайн-платежів ми інтегрували українську платіжну систему Wayforpay. Це вимагало:
- Встановлення офіційного плагіна Wayforpay для WooCommerce.
- Налаштування API-ключів, отриманих від клієнта, для зв’язку сайту з платіжною системою.
- Додавання кастомного коду на PHP для обробки статусів транзакцій (успішна оплата, помилка, повернення). Наприклад, ми використали woocommerce_payment_complete для автоматичного оновлення статусу замовлення після оплати.
- Оптимізацію сторінки оплати для швидкого завантаження. Ми зменшили кількість запитів до сервера, прибравши зайві скрипти, що дало приріст швидкості на 50%.
У результаті реалізованих кроків платіжна система працює стабільно й безпечно, забезпечуючи користувачам зручний процес оплати, а власникам бізнесу — своєчасне отримання інформації про транзакції. З якими труднощами ми стикнулися?
- Несумісність форматів даних між старою системою клієнта та WooCommerce змусила нас витратити додатковий день на написання скрипта для конвертації.
- Під час тестування виявили помилку в кодуванні символів (українські літери відображалися некоректно). Спеціалісти NML Digital це виправили, додавши UTF-8 у скрипт.
- Український хостинг мав обмеження на певні PHP-модулі, необхідні для стабільної роботи API Wayforpay (наприклад, curl). Ми звернулися до техпідтримки хостингу, щоб активувати ці модулі.
Так виглядає інтегрована сторінка оплати з Wayforpay:
5. Тестування та запуск
Перед запуском ми протестували сайт на помилки, перевірили швидкість завантаження та коректність роботи всіх функцій. Після цього перенесли сайт на український хостинг і запустили його в роботу. Тестування та запуск зайняли 5 днів, а простій сайту склав менше 2 годин.
Маєте схожий запит або шукаєте рішення для свого бізнесу? Фахівці NML Digital завжди готові допомогти вам!
Особливості кейса
Цей проєкт вирізнявся кількома моментами. По-перше, це стислі терміни. Завершити все за місяць із урахуванням перенесення та інтеграцій – непросте завдання для одного розробника. Ще одна особливість – мінімальні зміни дизайну.
Збереження старого вигляду сайту вимагало точної адаптації під WordPress, що ускладнило розробку.
Спідня білизна – конкурентна сфера, де зручність сайту критично впливає на продажі. Ми врахували це, оптимізувавши структуру. На весь проєкт ми витратили 30 днів і вклалися в бюджет, який був комфортним для клієнта (точну суму не розкриваємо за угодою). Зараз сайт SMTH Underwear працює стабільно, а команда NML продовжує його підтримувати. Перевіряємо працездатність раз на місяць або за запитом клієнта, виправляємо баги та оновлюємо систему.
