B2B-интернет-магазин для «Винк»
Лаконичный снаружи и мощно укомплектованный внутри
B2B-интернет-магазин для «Винк»
Лаконичный снаружи и мощно укомплектованный внутри
Мы все так привыкли к корпоративным календарям, блокнотам с ежедневниками, фирменным ручкам и кружкам с логотипами, что даже не задумываемся, а как они вообще попали на наши столы. Нет, понятно, что их печатали в типографиях. Как и баннеры с вывесками на улицах. Но оказывается, часто за всем этим рекламным миром стоит наш клиент «Винк», для которого мы разработали интернет-магазин с личными кабинетом для B2B-клиентов.
«Винк» — крупный оптовый поставщик материалов и оборудования для создания рекламных носителей. Его продукцию используют для создания наружной рекламы и сувенирных товаров, широкоформатной цифровой печати и оформления торговых и общественных пространств. А ещё — для детейлинга, инженерных и промышленных задач.
Сдержанный дизайн
Бывают проекты, где заказчики готовы к экспериментам — тогда мы выкручиваем бегунок креативности на 50%, а то и на 100%. Но B2B-шный интернет-магазин — кажется, совсем другая история: здесь важно сделать чёткий, понятный и доступный интерфейс для пользователей. Поэтому дизайн — сдержанный в фирменных цветах клиента, а главная страница — простая и компактная.
Основное пожелание к дизайну от заказчика — плотная компоновка, минимум декоративных элементов, все чётко и по делу. Работа шла последовательно, мы получали очень развернутую обратную связь и много дополнительной информации. Правочки, конечно, были. Но мы с ними оперативно справлялись, поскольку большинство элементов реализовали как мастер-компоненты — это когда создаётся один элемент и копируется на все макеты: если нужно внести изменения, достаточно поменять элемент в одном месте, в других обновление накатится автоматически. Так, например, нас попросили поменять значок рубля (дважды). Если бы не компоненты, я бы умерла :)
Мне проект запомнился сложной логикой, с которой было интересно разбираться. И конечно, сильным менеджментом со стороны клиента, который отмечает вся наша команда :)
Мне проект запомнился сложной логикой, с которой было интересно разбираться. И конечно, сильным менеджментом со стороны клиента, который отмечает вся наша команда :)
Виктория
Дизайнер
Совсем без креатива мы не смогли, поэтому решили придумать что-нибудь интересное для 404 страницы. И попали в точку: клиент был в восторге от этого решения и не раз отмечал, что оно им очень зашло.
Мультивалютный каталог и сложный документооборот
Особенность бизнеса заказчика в том, что некоторые товары продаются исключительно в евро или долларах. Поэтому нужно было сделать так, чтобы товары в каталоге отображались в той валюте, которая выставлена для них в 1С по умолчанию.
Как выглядят цены в валютах в каталоге
Другая особенность в том, что с контрагентами договоры могут быть заключены в разных валютах. И система тоже должна это учитывать :) Так, в корзине покупатель видит товары именно в той валюте, которая предусмотрена его договором. Например, если он выбрал товары в евро, а договор долларовый — все товары в корзине автоматически пересчитываются в доллары в соответствии с установленным курсом ЦБ.
Кстати, о договорах :)
У одного клиента может быть несколько договоров: валютный, кредитный и договор оферты. Валютный регулирует, в какой валюте производятся расчеты. Кредитный — дает возможность приобретать товары в соответствии с установленным кредитным лимитом. Так, если кредитный лимит клиента на квартал — 10 000 000 рублей, в корзине появится индикатор и данные по расходованию средств и остатками по лимиту.
Кстати, о договорах :)
У одного клиента может быть несколько договоров: валютный, кредитный и договор оферты. Валютный регулирует, в какой валюте производятся расчеты. Кредитный — дает возможность приобретать товары в соответствии с установленным кредитным лимитом. Так, если кредитный лимит клиента на квартал — 10 000 000 рублей, в корзине появится индикатор и данные по расходованию средств и остатками по лимиту.
Как выглядит кредитный лимит в корзине
Если сумма товаров в корзине превышает кредитный лимит — мы показываем пользователю уведомление, а заодно отправляем сигнал в 1С.
Если у клиента несколько договоров, нам надо понимать, каким мы руководствуемся. Для этого в 1С задается основной договор. Именно его сайт учитывает, чтобы определить, как должны выполняться расчеты в корзине. При этом в личном кабинете клиент всегда может изменить основной договор на другой из списка: тогда стоимость товаров будет отображаться уже в соответствии с ним.
Если у клиента несколько договоров, нам надо понимать, каким мы руководствуемся. Для этого в 1С задается основной договор. Именно его сайт учитывает, чтобы определить, как должны выполняться расчеты в корзине. При этом в личном кабинете клиент всегда может изменить основной договор на другой из списка: тогда стоимость товаров будет отображаться уже в соответствии с ним.
Личный кабинет
В личном кабинете условно есть два разных типа клиентов: частные лица и компании. У частных лиц всё стандартно: история заказов, настройка личных данных, уведомления.
Для компаний — всё интереснее, потому что у них может быть несколько контрагентов. А ещё — несколько сотрудников, у которых может быть разный доступ к функционалу личного кабинета.
Для компаний — всё интереснее, потому что у них может быть несколько контрагентов. А ещё — несколько сотрудников, у которых может быть разный доступ к функционалу личного кабинета.
На сайте есть три сущности: Клиент, Контрагент и Договор. Для примера клиент — это фирма «Рога и копыта», а её контрагенты — это ИП Рогов, ИП Копытов и ООО «Рога и Ко». Каждый контрагент заключает с «Винком» столько договоров, сколько ему нужно: со своими валютами и кредитными лимитами, если потребуется.
Дмитрий
Разработчик
Администратором личного кабинета компании становится тот, кто добавляет данные о компании и её контрагентах. Эта информация проходит модерацию в 1С — если «Винк» подтвердит, что будет работать с этим контрагентом клиента, в личном кабинете появляется запись о подтверждении, и заодно и список заключенных договоров с этим контрагентом.
Бывает, что при модерации одного контрагента выясняется, что у «Винка» заключены договоры сразу и другими контрагентами того же клиента. Тогда при импорте из 1С данные о них также подтягиваются в личный кабинет.
Бывает, что при модерации одного контрагента выясняется, что у «Винка» заключены договоры сразу и другими контрагентами того же клиента. Тогда при импорте из 1С данные о них также подтягиваются в личный кабинет.
У нас реализованы двусторонние импорты — актуальная информация должна быть и на сайте, и в 1С, добавляться и изменяться контрагенты могут и там, и там.
Дмитрий
Разработчик
Внутри личного кабинета администратор компании может:
- Добавлять или деактивировать контрагентов. При добавлении мы ищем компанию в справочнике адресов и компаний DaData по ИНН и наименованию — обмануть сайт и добавить кого-то несуществующего просто не получится.
- Управлять своими договорами: назначать основной для оформления заказов, отслеживать лимиты по кредитным договорам.
Как выглядят кредитные лимиты у разных контрагентов в личном кабинете
- Сохранять корзины — один сотрудник компании может собрать заказ (там запросто может быть 200 позиций и больше), сохранить корзину, а другой — оформит заказ.
- Добавлять сотрудников и назначать им роли: можно добавлять и исключать людей, менять их должности (и тогда пользователь получит больше или меньше возможностей на сайте).
- Управлять доступом к разным разделам и устанавливать режимы для групп пользователей — прямо как в Гугл-документах: без доступа, только просмотр, редактирование. Благодаря этому в рамках одного личного кабинета может работать несколько пользователей с разными правами доступа. А заказы от них будут отображаться в общем списке в истории заказов.
Для управления ролями пользователей стандартный функционал Битрикс не подходил — заказчику были нужны очень гибкие настройки. Так что мы разработали модуль с нуля. Сейчас Администратор компании-партнёра «Винк» может создавать новые роли самостоятельно, через админ-панель. Таких ролей может быть неограниченное количество. Для каждой роли можно настроить доступ практически к каждому блоку личного кабинета.
Евгений
Разработчик
Сложные бизнес-процессы
Уже на этапе аналитики стало ясно, что бизнес-процессы у заказчика непростые: работа с оптовыми клиентами подразумевает индивидуальные условия по ценам, объемам закупок, договорам. Но это оказалось лишь верхушкой айсберга :)
Самым интересным на проекте ожидаемо стал этап программирования. Спустя два спринта мы поняли, что в бизнес-процессах для нас остается всё ещё слишком много белых пятен, которые напрямую влияют на реализацию функционала.
Решение в таких случаях только одно — въедливо декомпозировать и расписывать весь процесс на блок-схемы. Мы провели совместный звонок команды разработки с заказчиком, где тот рассказал нам всю логику работы. После чего мы смогли детально прописать в схемах ключевые сущности на сайте:
Самым интересным на проекте ожидаемо стал этап программирования. Спустя два спринта мы поняли, что в бизнес-процессах для нас остается всё ещё слишком много белых пятен, которые напрямую влияют на реализацию функционала.
Решение в таких случаях только одно — въедливо декомпозировать и расписывать весь процесс на блок-схемы. Мы провели совместный звонок команды разработки с заказчиком, где тот рассказал нам всю логику работы. После чего мы смогли детально прописать в схемах ключевые сущности на сайте:
- логика доставок;
- корзина и оформление заказа;
- личный кабинет.
Фрагмент блок-схемы с логикой работы корзины. Овалами обозначаются начало и конец цепочки действий, прямоугольниками — сами действия, ромбами — условия.
Когда мы уперлись с логикой, я вспомнил про классический инструмент — блок-схемы — и предложил их использовать. Они позволяют удобно продумать весь путь пользователя и проработать возможные условия и ответвления. Так мы смогли найти много неотработанных кейсов и дописать необходимый код.
Когда презентовали схему, заказчик был в шоке — как всё стало понятно и чётко. А сами схемы как инструмент мы теперь используем почти на каждом проекте.
Когда презентовали схему, заказчик был в шоке — как всё стало понятно и чётко. А сами схемы как инструмент мы теперь используем почти на каждом проекте.
Евгений
Разработчик
После анализа блок-схем мы изменили часть логики на сайте. Например — доставку.
У заказчика есть два склада: в Москве и Петербурге. Оттуда идут поставки в разные города. Отгрузки со складов уходят в определенные дни, а менеджеры вручную проверяют дату поступления заказа и ориентируют клиента, в какой день ждать поставку. Это всё равно, как если бы Озон звонил и говорил: «ждите посылку тогда-то». Неудобно и сложно.
У заказчика есть два склада: в Москве и Петербурге. Оттуда идут поставки в разные города. Отгрузки со складов уходят в определенные дни, а менеджеры вручную проверяют дату поступления заказа и ориентируют клиента, в какой день ждать поставку. Это всё равно, как если бы Озон звонил и говорил: «ждите посылку тогда-то». Неудобно и сложно.
Первоначальная логика доставки от заказчика: таблица с множеством зависимых колонок
Мы сделали так, чтобы при оформлении заказа сайт учитывал разные роли пользователей в личном кабинете и валюту договора. А когда пользователь выбирает способ доставки, то сразу определяется её дата и итоговая стоимость (и, конечно, склад, с которого продукцию отгрузят). Всё это рассчитывается автоматически.
Заказчик на этом проекте — ТОП. Этот сайт получится благодаря полному погружению в проект Максима Емельянова — директора по IT со стороны заказчика. На любой вопрос мы получали оперативные ответы, развернутую информацию, таблицы, данные.
Мы провели немало звонков в обсуждении разных вопросов, но это было настолько комфортно, что хотелось бы повторить этот проект еще парочку раз :)
Сейчас у нас большие планы по масштабированию проекта и реализации нового крупного функционала, поэтому самое интересное — впереди.
Мы провели немало звонков в обсуждении разных вопросов, но это было настолько комфортно, что хотелось бы повторить этот проект еще парочку раз :)
Сейчас у нас большие планы по масштабированию проекта и реализации нового крупного функционала, поэтому самое интересное — впереди.
Полина
Руководитель проекта
Отзыв заказчика
Готовый проект
