Milamay — каталог розкішної білизни на WooCommerce, Лондон

Огляд проєкту

Milamay — лондонський бренд білизни: бюстгальтери, трусики, пояси для панчіх, сукні та купальники в невеликих іменних колекціях — Poppy Sparkle, Gold Sparkle, Grace, Belle, Green Jade. Бренд продає через живе спілкування, а не через кошик: покупці обирають модель, питають про посадку й замовляють одним повідомленням.

Тож сайт — це каталог, який поводиться як бутик. WooCommerce зберігає 33 товари з кольорами, розмірами й цінами у фунтах, але онлайн-оформлення замовлення вимкнене: кожна сторінка товару закінчується запитом у WhatsApp або на e-mail, де вже вказані модель, ціна й посилання. Навколо — редакційний дизайн у фірмовій фуксії: заголовки із зарубками, великі фото з рекламних кампаній на всю ширину й багато повітря.

Моя роль у проєкті

Я особисто працював над цим проєктом від дизайн-брифу до запущеного магазину. Напрями, які я вів і виконував безпосередньо:

• Кастомна тема WordPress mila, збудована навколо WooCommerce, — без конструкторів сторінок, власні скрипти теми на чистому JavaScript
• WooCommerce як каталог: 33 варіативні товари з атрибутами кольору й розміру, п’ять категорій, акційні ціни, оформлення замовлення вимкнене
• Замовлення повідомленням замість кошика: запити у WhatsApp і на e-mail із заздалегідь заповненими назвою товару, ціною й посиланням
• Поля ACF для слайдів і секцій головної, щоб контент магазину можна було оновлювати без коду
• AJAX-функції на ендпоінтах із захистом nonce: живий пошук, швидкий перегляд, вкладки категорій і сторінка обраного
• Структуровані дані: Organization і WebSite з пошуковою дією на головній; Product, Offer і BreadcrumbList на кожній сторінці товару

Що я зробив

• Рядок оголошень (безкоштовна доставка по всьому світу, подарункове пакування кожного замовлення) і закріплена шапка з матовим фоном, пошуком і обраним
• Hero-слайдер на Swiper із фото з кампаній на всю ширину, стрілками й індикаторами прогресу
• Карусель «Signature Pieces»: бейджі знижок, стара й нова ціна та «сердечко» обраного на кожній картці
• «The Milamay Wardrobe»: вкладки категорій — All, Bras, Dresses, Knickers, Suspenders, Swimwear, — які змінюють сітку товарів без перезавантаження сторінки
• Швидкий перегляд: будь-який товар із сітки можна відкрити у спливному вікні, не залишаючи сторінки
• Магазин із шістьма фільтрами (категорія, ціна, колір, дві розмірні сітки, теги), лічильниками варіантів, «чипами» активних фільтрів і чотирма варіантами сортування
• Сторінка товару: фотогалерея із зумом, кнопки розмірів, спливна таблиця розмірів, обране, кнопка «Поділитися» (рідне меню шерингу на телефоні, копіювання посилання як запасний варіант) і блок замовлення через WhatsApp / e-mail
• Обране без акаунта: зберігається в браузері й має власну сторінку, яка підвантажує збережені моделі
• Живий пошук у повноекранному оверлеї
• Блок «The Milamay promise» (доставка по світу, подарункове пакування, легке повернення), підписка на розсилку й темний футер з Instagram, Facebook і TikTok

Тема працює на єдиному наборі дизайн-токенів — кольори, шкала шрифтів, відступи, — спільному для всіх шаблонів: Cormorant Garamond для заголовків, Bodoni Moda для логотипа, Jost і Hanken Grotesk для підписів і основного тексту. Слайдери — на Swiper, решта — на чистому JavaScript, а фото товарів віддаються у WebP з лінивим завантаженням.