«100 друзей». Интернет-магазин аксессуаров для сотовых телефонов и портативной техники

Заказчик
Компания «100 друзей» – крупная сеть, специализирующаяся на продаже аксессуаров для сотовых телефонов и портативной техники. Есть офлайн-точки и интернет-магазин на конструкторе, который не справляется с текущей номенклатурой товаров в каталоге и требует масштабного обновления.

Задача
Разработать масштабируемый интернет-магазин со стильным дизайном, интегрировать его с 1С.

Чтобы рассказать всю историю разработки интернет-магазина для компании «100 друзей», нужно вспомнить с чего все начиналось.

2018 год. Мы писали первый сайт для «100 друзей». Он получился достаточно хорошим с точки зрения функциональности, кастомный обмен с 1С, представлен большой ассортимент товаров. Сдали готовый сайт клиенту и разошлись. 

Вскоре в компании «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 и СДЭК: автоматизировали процессы работы и освободили менеджеров от рутины.
• Автоматизировали зоны доставки, чтобы пользователь сразу видел стоимость доставки на свой адрес.
• Настроили умный поиск товаров с возможностью сравнения.
• Создали личный кабинет, который помогает покупателям отслеживать историю покупок и добавлять понравившиеся товары в избранное.
• Создали адаптированную версию сайта, практически не отличимую от мобильного приложения.

Вместе с командой компании «100 друзей» создали современный сайт с дружественным интерфейсом, где представлен огромный ассортимент товаров и работает основная бизнес-логика. Продолжаем наше сотрудничество дальше, потому что уверены в совместных трудах, хотим дальше расти и развиваться вместе.