"100 друзей". Интернет-магазин аксессуаров для сотовых телефонов и портативной техники
ЗаказчикКомпания »100 друзей» — крупная сеть, специализирующаяся на продаже аксессуаров для сотовых телефонов и портативной техники. сть офлайн-точки и интернет-магазин на конструкторе.ЗадачаРазработать масштабируемый интернет-магазин со стильным дизайном, интегрировать его с 1С.
«Мы вернулись к вам снова» — история, которая хорошо демонстрирует высокое качество нашей работы. На проекте для крупной розничной сети, специализирующейся на продаже аксессуаров для сотовых телефонов и портативной техники, этот сценарий оказался логичным: у старого сайта компании »100 друзей» не было связки с 1С, что осложняло работу всей сети. Нужно было ускорить процесс обработки заказов и минимизировать ошибки, связанные с ручным вводом данных. Поэтому мы решили посотрудничать снова и предложили ребятам разработку нового функционального сайта.
Чтобы рассказать всю историю разработки интернет-магазина для компании »100 друзей», нужно вспомнить с чего все начиналось.
2018 год. Мы писали первый сайт для »100 друзей». Он получился достаточно хорошим с точки зрения функциональности, кастомный обмен с 1С, представлен большой ассортимент товаров. Сдали готовый сайт клиенту и разошлись. Вскоре в компании »100 друзей» произошли какие-то внутренние изменения. И разработанный нами сайт был удален с хостинга без возможности восстановления. Затем они создали новый интернет-магазин на «готовом решении», стали работать на нем. Но, он был совершенно не масштабируемым, не позволял делать какие-то настройки. Компания »100 друзей» в итоге задумалась над индивидуальной разработкой и снова обратитесь к нам за помощью. Так мы вместе пришли к созданию нового проекта, который получился современным, удобным и лаконичным.
Проблемы на старте
1. Примитивный дизайн на шаблоне конструктора, и отсутствие адаптивной версии для мобильных устройств. Требовалась индивидуальная разработка, которая должна была учитывать потребности и ожидания современных пользователей.
2. У компании »100 друзей» до самого запуска не было специалиста 1С, поэтому все настройки на тестовом домене велись почти вслепую: фильтры, поиск, промокоды и прочее. После того, как они наняли специалиста — работа пошла быстрее.
3. Как и большинство заказчиков,»100 друзей» хотели внедрить на сайт разные интересные фишки. Например, при добавлении в корзину разделять пользователей на оптовиков/дилеров/физ лиц. Поэтому за время нашего сотрудничества мы постоянно старались находить решения, которые будут соответствовать цене/качеству/ожиданиям.
Этапы разработки
- дизайн
- согласование
- верстка
- натяжка на Bitrix
- тестирование
- интеграции (1С, СДЭК, ЮKassa)
- тестирование
- запуск
- отладка фильтрации и интеграции с 1С
Стек технологий: Backend: HTML, CSS, JS, PHP, CMS — Bitrix/Битрикс Лицензия Бизнес.
Дизайн
Старый сайт пестрил ярко-желтыми и ярко-синими цветами. Мы взяли за основу эти цвета, но постарались представить их в других оттенках. Отрисовали стильный, сдержанный и в меру яркий дизайн. Заказчик оценил наш подход к созданию визуала. Мы попали в точку. Лого заказчика оставили без изменений, потому что »100 друзей» — достаточно узнаваемая компания в Красноярске. За 5 лет они открыли 45 салонов продаж в 14 городах России.
Каталог
В новом каталоге можно менять отображение на списочный или на плиточный вид, все зависит от предпочтений пользователя. В фильтрах можно сделать узкую подборку именно того, что нужно пользователю. Это возможно благодаря тому, что в фильтры выведены все свойства товаров категории.
Карточки товаров
В краткой карточке товара есть кнопка «Наличие», где по клику выдается модальное окно со списком магазинов и остатками товара в этих магазинах. Покупателю не нужно заходить на страницу товара или в оформление уже отдельно, чтобы узнать есть ли товар в нужном магазине и в нужном количестве.
Корзина
Обычно корзина в стандартном интернет-магазине — отдельная большая страница, куда пользователь переходит для оформления заказа из каталога. На этом проекте корзина стандартного вида. Но, есть одно важное преимущество — в корзине можно сразу вводить промокод. Такая опция стимулирует совершить целевое действие. Если дать покупателю бонус, он с большей вероятностью добавит в корзину не только чехол для телефона, но еще и защитное стекло.
Оформление заказа
Из корзины пользователь сразу попадает на страницу оформления заказа, где настроено разделение пользователей на розничных и оптовых покупателей. На этой странице пользователь может легко оплатить товары онлайн и выбрать способ доставки:
- самовывоз из магазина;
- доставка по городу — для городов, в которых есть офлайн-магазины;
- доставка через СДЭК (виджет СДЭК установлен в в оформление заказа, что позволяет сразу видел стоимость доставки на свой адрес).
В зависимости от способа получения оплатить товары можно при личном визите в магазин или сразу на сайте — для онлайн-платежей мы интегрировались с ЮKassa. Чтобы подключить онлайн-оплату, заказчик должен был заключить договор с ЮKassa. Компания выдвинула требование, чтобы на текущем сайте заказчика была страница с данными юридического лица.»100 друзей» не имели понятия, как создавать эту страницу. Предоставили нам доступы и мы создали им эту страницу на текущем сайте, чтобы заключить договор с ЮKassa. Все прошло отлично.
Личный кабинет пользователя
Мы сделали его простым и визуально понятным. Добавили привычные разделы: личные данные, избранное, историю заказов, адреса доставки. Для удобства сохраняются несколько адресов доставки. Можно выбрать сразу какой-то адрес (по умолчанию) или выбрать адрес из списка уже при оформлении заказа. Также, если человек зарегистрирован как юридическое лицо, в ЛК указан контрагент (наименование юридического лица с данными). Контрагентов у одного пользователя может быть несколько. На какое юридическое лицо он оформляет заказ, пользователь выбирает в ЛК или при оформлении заказа.
Интеграция с 1С
Главная проблема старого проекта — отсутствие интеграции с 1С. Это значит, что все товары на сайте (а это более 10 000 позиций) заносились туда вручную. Заказчик понимал, что для масштабирования бизнеса требовалась интеграция с 1С: все товары/цены/скидки/фото/адреса магазинов/наличие. Нам предстояло связать 1С с новым сайтом так, чтобы всё прошло гладко. И это была настоящая командная работа для специалистов веб-студии и заказчика.
Адаптивная версия
Чтобы масштабировать бизнес и успешно продвигать сайт в интернете, без адаптива никуда. Маркетплейсы и федеральные интернет-магазины приучили пользователей заказывать все с телефона. Поэтому мы сделали адаптивный интерфейс под мобильную ширину экрана — легким, понятным и максимально функциональным. Выглядит как настоящее приложение.
Результаты
- Разработали современный интернет-магазин со сдержанным дизайном, в основе которого остались ярко-желтые и ярко-синие корпоративные цвета.
- Интегрировали сайт с 1С, ЮKassa и СДЭК: автоматизировали процессы работы и освободили менеджеров от рутины.
- Автоматизировали зоны доставки, чтобы пользователь сразу видел стоимость доставки на свой адрес.
- Настроили умный поиск товаров с возможностью сравнения товаров.
- Создали личный кабинет, который помогает покупателям отслеживать историю покупок и добавлять понравившиеся товары в избранное.
- Cоздали адаптированную версию сайта, практически не отличимую от мобильного приложения.
Вместе с командой компании »100 друзей» создали современный сайт с дружественным интерфейсом, где представлен огромный ассортимент товаров и работает основная бизнес-логика. Продолжаем наше сотрудничество дальше, потому что уверены в совместных трудах, хотим дальше расти и развиваться вместе.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
