Bob BassetСайт і магазин
Перетворили каталог відомої майстерні на магазин з оплатою онлайн
Харківська майстерня шкіряних масок і сумок, яка продає свої вироби по всьому світу
Про проєкт
bobbasset.com ↗Bob Basset — майстерня шкіряних масок і сумок з Харкова, яка працює з 1989 року. Її маски замовляли для показу Givenchy, а Vogue International називав засновника серед революційних українських дизайнерів.
Більшість покупців живе за межами України, а кожен виріб коштує як витвір мистецтва. Тому сайт працює як галерея: чорне тло, маски у світлі, нічого зайвого.
Маєте схожу задачу? Розкажіть про неї, і ми запропонуємо рішення.
Задача
Розділ Shop на сайті був лише каталогом. Щоб купити маску, людина мала надіслати запит і чекати листа. Майстерня хотіла продавати напряму покупцям з будь-якої країни, але не втратити галерейний вигляд сайту.
Як працювали
Ми не переробляли те, що вже працювало. Покупку вбудували в наявний сайт так, щоб вона виглядала його частиною: той самий стиль, той самий спокійний ритм.
Дизайн покупки
Спершу в макетах визначили шлях покупця: від картки в каталозі до оплати.
01 · Каталог і картка товару
На картках з'явилися ціна й кнопка «Add to cart». На комп'ютері вони виринають при наведенні й не заважають розглядати вироби, а на телефоні видно їх одразу.
- Картка з двома станами
- Сторінка товару
- Версії для комп'ютера й телефона
02 · Кошик і оформлення
Зібрали кошик із подарунковою коробкою та сторінку оформлення. Верстка відповідає макетам Figma на ширині 1920 і 375 пікселів.
- Кошик
- Форма оформлення
- Сторінка подяки
Розробка магазину
Магазин написали в темі наявного сайту на WordPress, без важких готових плагінів.
01 · Оформлення замовлення
Контакти, адреса, спосіб доставки й режим «Це подарунок» із персональним повідомленням. Телефон перевіряється за міжнародним форматом, а суму рахує сервер, тому її не можна змінити в браузері.
- Форма у 2 кроки
- Доставка за кордон
- Подарункові опції
02 · Оплата PayPal
Покупець платить на захищеній сторінці PayPal і повертається на сайт. Якщо він закрив вкладку одразу після оплати, вебхук все одно завершить замовлення. Листи отримують і покупець, і магазин.
- PayPal Orders API v2
- Вебхук із перевіркою підпису
- Листи про замовлення
Запуск
Живий сайт не можна було ламати, тому все перевіряли окремо від нього.
01 · Перевірка на копії сайту
Покупку пройшли на локальній копії з тестовими платежами PayPal. Перед викладкою зробили резервні копії бази й файлів.
- Копія сайту для тестів
- Тестові оплати
- Резервні копії
02 · Керування без розробника
Власник сам вирішує, що продавати онлайн: для цього в картці товару є вимикач «Buy online». Вироби без нього залишаються доступними за запитом.
- Вимикач в адмінці
- 15 виробів у продажу
- Запит для решти каталогу
Результат
- Покупець з іншої країни може замовити виріб і оплатити його на сайті, без листування
- Купівля стала частиною сайту й не порушила його галерейний стиль
- Майстерня сама керує тим, які вироби продаються онлайн, а які — за запитом
- Зручна покупка на телефоні: окремі версії каталогу, кошика й оформлення
- Замовлення зберігаються на сайті, а магазин дізнається про кожне листом
Технології
- WordPress
- PHP
- ACF Pro
- PayPal
- Figma
Розкажіть про задачу — відповімо сьогодні
Залиште заявку або напишіть у Telegram. Відповідаємо протягом 2 годин у робочий час.
Раніше покупець мусив писати нам і чекати на лист. Тепер він сам обирає виріб, подарункову коробку й доставку та одразу оплачує замовлення на сайті.
Bob BassetКоманда майстерні
- Швидка відповідьпротягом 2 годин у робочий час
- Досвід командиEVA, Vodafone, Nokia
- Відкриті цінивід 7 500 грн, ще до дзвінка
- Без спамуконтакт лише для відповіді на заявку