Флипы, грайнды, столлы…что? Когда-то мы тоже не знали, что означают эти модные словечки, пока к нам не обратился наш самый смелый клиент — интернет-магазин Hellride, который не только продает трюковые самокаты, но и занимается продвижением этой культуры среди молодежи.
За время работы над проектом мы не только выучили парочку трюков на самокате (шутка), но и реализовали несколько интересных решений, которые улучшили экспириенс пользователей сайта.
Ссылка на сайт
https://www.hellride.ru/Наши задачи
Качественный интернет-магазин — гибкий инструмент для продаж. Его владелец в любое время может внести изменения на сайте, добавить баннеры или призывы к действию, запустить акцию или email-рассылку.
Любые изменения внесенные в сайт могут быть проанализированы с точки зрения эффективности. Поэтому для владельцев интернет-магазина важно создание не только привлекательного сайта, но и функционального, который легко будет поддаваться кастомизации и настройки под любые нужды.
У нашего заказчика уже был сайт на 1С Bitrix, который устарел и не подходил под новые запросы компании. Hellride целенаправленно обратились к нам в апреле 2021 года целенаправленно за разработкой нового сайта на Laravel. Дизайн выполнялся на стороне заказчика, а перед нами были поставлены амбициозные планы по разработке сайта.
Сложности
Новый сайт должен включать в себя разный функционал, подробную админ-панель и высокую возможность настраивать компоненты сайта. Это требовало от нас нестандартных решений на этапе разработки. Отсюда мы столкнулись с рядом сложностей. Расскажем о них подробней.
Добро пожаловать!
Поздравляем!
Регистрация прошла успешно!
Теперь вам доступен личный кабинет.
Чекаут
Одним из главных компонентов интернет-магазина является чекаут. Чекаут — это страница оплаты товара, а также процедура оформления заказа, где покупатель выбирает удобный способ оплаты и доставки. Для удобства пользователей чекаут должен иметь простой и интуитивно понятный интерфейс.
При разработке чекаута нашей команде пришлось выполнить большое количество задач и решить некоторые нетривиальные проблемы.
Например, мы столкнулись с проблемой отображения в чекауте некоторых населенных пунктов. Эта проблема также напрямую влияла на правильный расчет стоимости доставки.
При разработке чекаута мы внедрили большой ряд фич. Вот некоторые из них:
Фильтрация
Реализовали сложную и подробную фильтрацию в поиске товаров. Фильтры находятся в каталоге, а не в поиске. Изначально была идея реализовать отображение количества товаров в каждой категории в виде чисел, но такой функционал конфликтовал с мультикартой.
Мультикартой мы называем выведение в каталоге карточек товара разного цвета. При выборе одного из цветов открывалась карточка, которая также позволяла выбрать и другие цвета.
Также для фильтров реализовали ползунок с диапазоном, который можно самостоятельно настраивать в админ-панели.
SEO-страницы
Для любого интернет-магазина важно SEO-продвижение. Если сайт будет выводиться в ТОПе выдачи поисковых систем, то пользователи будут чаще переходить на этот сайт и попадать в воронку привлечения клиента.
В рамках разработки интернет-магазина Hellride мы разработали SEO-шаблоны, которые позволяют заказчику самостоятельно настраивать теги под разные страницы. Например, при профиците конкретных позиций магазина, заказчик может настроить теги под конкретные товары, привлекая еще больше покупателей.
Такой функционал открывает перед владельцем интернет-магазина широкие возможности для продвижения и увеличения числа посетителей сайта.
Интеграция с 1С
Провели интеграцию с 1С и реализовали несколько решений:
- Все товары и их предложения полностью выгружаются из 1С. Остатки, свойства, цены старые и текущие.
- Заказы создаваемые на сайте выгружаются в 1С. После чего мы получаем обработанный заказ самой 1С, и уже дальше сайт работает с ним, например, вывод данных о заказе в личном кабинете.
- Также заказ может измениться уже после обработки менеджером в 1С, например, менеджер может добавить к заказу скидку или еще один товар.
- Каждая выгрузка со стороны 1С, обрабатывается обособленно, и только единожды. За счет системы статусов выполненная выгрузка не сможет вернуться в статус «не обработана».
- Маркетинговые флаги создаются изначально на сайте, их можно прикрепить из админ-панели, но также 1С с помощью импорта может прикрепить маркетинговые флаги к товарам на сайте.
- Написали API для обращения 1С к сайту с возможностью самостоятельно выгружать и загружать данные на сайт.
Админ-панель
Основным пожеланием заказчика была разработка функциональной и легко настраиваемой админ-панели. Мы реализовали:
- Выгрузку данных из 1С (данные по товарам, ценам, маркетинговым флагам), управление этими данными.
- Вывод в панель меню любых акций: например новогодние скидки или распродажа конкретного бренда.
- Скрытие товара или категории без удаления этого товара на сайте.
- Возможность менять логотип из админ-панели.
- Учет остатков товара (через выгрузку из 1С) и сокрытие товара при отсутствии товара в наличии.
- Управление маркетинговыми флагами (создание, редактирование, прикрепление к продуктам и предложениям).
- Управление пользователями (возможность добавить пользователю адрес доставки, добавлять/изменять права пользователя, добавлять координаты).
- Промокоды (возможность добавлять и менять промокоды, назначать дату начала действия и окончания, делать многоразовыми или одноразовыми, суммировать с персональной скидкой или нет, посмотреть историю использования промокода).
- Возможность делать способы оплаты активными и неактивными.
- Управление новостями (добавлять изображения, SEO-теги, создавать и редактировать типовые страницы). На всех этих страницах реализовали конструктор.
Mobile First
Стратегия Mobile First, как следует из названия, предполагает проектирование интерфейса сайта, в первую очередь ориентированного на мобильные устройства. Философия подхода заключается в том, что сначала создается прототип дизайна для самого маленького экрана, а затем разработчики переходят к дисплеям больших размеров.
Основная целевая аудитория нашего заказчика — подростки, которым удобнее заказывать новые самокаты и крутые детали к ним с помощью мобильных устройств. Поэтому изначально мы планировали разработку сайта с упором на адаптивность под разные типы устройств.
При разработке столкнулись с проблемой — у всех пользователей разные устройства с разными версиями ПО. Для увеличения скорости сайта мы подготовили все изображения в формате webp. При этом необходимо было учитывать и тех пользователей, чьи устройства не обновлены до версий ПО, которые поддерживают этот формат изображений. Для этих пользователей мы сделали переключатель на формат JPEG, что позволило улучшить взаимодействие с сайтом на разных типах устройств.
Также реализовали динамическую загрузку страницы — контент загружается по мере взаимодействия с ним.
Для мобильной версии уменьшили количество выводимых блоков, адаптировали меню и шапку сайта, подвал, фильтры, изменили размеры элементов.
Результат
Выполнив парочку трюков на разработке, сделали классный и функциональный интернет-магазин. Главной особенностью стал высокий уровень кастомизации. Теперь заказчик сможет самостоятельно настраивать сайт под свои запросы: будь то запуск новой рекламной кампании, страница с акциями, или новые предложения.
Ссылка на сайт
https://www.hellride.ru/Отзыв клиента
