E-Core and Metro OTC

2024

Metro OTC LLC.

Разработал и запустил современный e-commerce сайт для компании Metro OTC.

Проект подразумевал разработку кастомизируемого ядра, которое позволяет создавать магазины для разных брендов в рамках эксклюзивных контрактов со страховыми компаниями.

Для этого использована новая технология Layers, которая дебютировла в Nuxt 3.

Применение этой технологии, а также специального подхода к композиции компонентов позволило создать универсальное ядро, которое можно не только брендировать, меняя визуальное оформление, но и также внедрять полностью кастомные блоки, поля профиля и уникальные платёжные методы. При этом ядро остаётся общим для всех магазинов, что позволяет быстро и безболезненно обновлять его для всех клиентов.

e-core main page
Общий вид интерфейса базового проекта (ядра)
e-core main page
Адаптивная вёрстка базового проекта (ядра)

Metro OTC

Главным проектом на новом движке стал собственный e-commerce компании Metro OTC.

В рамках этого проекта были реализованы как достаточно типовые для e-commerce вещи:

  • Три вида авторизации: с помощью одноразовых кодов в смс или на email, а также с помощью пароля
  • Страница профиля пользователя с возможностью редактирования данных
  • Корзина и страница оформления заказа с возможностью выбора способа доставки и оплаты
  • Страница каталога товаров и страница товара
  • Опции товара: выбор цвета, размера и т.д.

Так и более специфические:

  • Умный поиск товаров с текстовым вектором: "прощает" ошибки в написании, учитывает описания товаров, бренды и другие аттрибуты
  • Оплата картами страховых компаний: 1 через интеграцию с API, другая с ручным подтверждением на бэк офисе
  • Расширенная система скидок через промо-коды, где применимость скидки, а также её размер могут зависеть от разных условий
  • In-memory корзина
  • Двухслойная google reCAPTCHA: V3 отрабатывает незаметно для пользователя, V2 - в случае подозрительной активности
  • Возможность фильтрации товаров по страховому плану
  • Восстановление позиции скролла при возврате в каталог со страницы товара
Metro OTC login page
Авторизация Metro OTC
Metro OTC main page
Главная страница Metro OTC
Умный поиск Metro OTC
Умный поиск Metro OTC
Metro OTC product page
Страница товара Metro OTC
Metro OTC ordering
Order confirmation
Metro OTC profile
Profile page

Начинал и реализовывал основные части я в одиночку, на поздних этапах у меня появилась небольшая команда для финализации проекта. Это позволило мне сосредоточиться на архитектуре и документации, а также проявить себя в роли тимлида.

Nuxt 3Vue 3TypeScriptTailwind CSSSymfony
© 2019 – 2024 Артём Риженков. All rights reserved.