Детальная проработка дизайн форм и карточек товаров согласно новым UX-макетам. Упростили оформление заказа и повысили удобство взаимодействия пользователей с сайтом. Скорректировали работу логики применения промокодов, рассрочки и заказа в 1 клик. Переработали структуру карточек товаров в категориях для улучшения восприятия и дальнейшего масштабирования.
Задачи: комплексная переработка форм, корзины и карточек товаров на сайте по макетам Figma.
Формы (консультация, обратный звонок, покупка в 1 клик)
- Переработан внешний вид форм согласно макетам.
- Реализована подгрузка фото, цены и названия товара из дополнительного поля в админке.
- Исправлена логика подтягивания названия товара при вызове формы со страницы товара.
- Для формы “Купить в 1 клик” реализована новая механика: при вызове из корзины добавляются все товары, с поддержкой скролла в случае большого количества позиций.
- Сообщения об ошибках валидации оставлены без изменений, но дополнены улучшенной подсветкой ошибок (красный цвет рамки, автоматическая прокрутка к полю).
Корзина
- Переработан дизайн корзины по макетам. Добавлена отдельная кнопка применения промокода.
- Исправлена логика кнопки “Заказ в 1 клик”: теперь она формирует заказ по содержимому корзины, учитывая промокод.
- Обработаны ограничения: при заказе в рассрочку промокод недоступен (выводится алерт) и при заказе в 1 клик промокод также ограничен, с уведомлением пользователя.
Оформление заказа
- Дизайн формы разделён на три блока: Контакты, Доставка, Оплата.
- Перенесены поля “Контактное лицо” и “E-mail” в начало оформления.
- Удалена опция “Стать постоянным покупателем”.
- Скрыты лишние элементы (подвал, меню, поиск, валюты).
- Реализован пересчёт стоимости с промокодом в разных валютах (тенге, белорусские рубли).
- Добавлены сообщения об ограничениях для заказов в Беларусь.
Карточки товаров
- Переработан внешний вид карточек в категориях (кнопки, иконки, расположение элементов).
- На десктопе количество колонок изменено с 4 → 3.
- Реализована логика отображения стрелок: если стрелка не задана в админке, кнопка “Подробнее” занимает всю ширину карточки и механизм работает во всех блоках сайта (категории, сопутствующие товары, похожие товары, лидеры продаж).
- Заменены иконки в карточках и нижнем баре на новые (векторные с текстом вместо растровых подписей).
В итоге магазин приведён к новому визуальному стилю, улучшено UX оформления заказа и взаимодействия с товарами. Добавлена поддержка гибкой логики применения промокодов. Карточки товаров оптимизированы для разных блоков сайта и адаптированы к масштабированию. Все изменения согласованы с заказчиком, часть функций (попапы и “Подробнее о товаре”) перенесены в отдельные задачи.
Свяжитесь с нами для консультации и разработки индивидуального решения под ваши задачи. Поможем оптимизировать бизнес-процессы и повысить эффективность вашего e-commerce проекта.
