SENTOSA

Исходная ситуация:

Компания клиента занимается продажей ИБП, аккумуляторов и инверторов. Следующим шагом для развития этого направления стала подготовка интернет-магазина. Именно с этой задачей клиент обратился к нам. 

Основная сложность клиента заключалась в том, что розничные покупатели, не обладая необходимыми экспертными знаниями, ошибались при выборе ИБП и комплекта аккумуляторов к ним, что приводило к негативу и возвратам.

Для решения этой проблемы клиент хотел видеть три варианта каталога:

• Классический каталог

• Каталог комплектов товаров (ИБП + аккумуляторы)

• Конструктор - умный калькулятор, подбирающий комплект ИБП + аккумулятор на основании домашней техники и желаемого времени автономной работы, указанных пользователем

Цель клиента: 

Разработать интернет-магазин для онлайн продажи ИБП, аккумуляторов и инверторов.

Как мы шли к цели:

Шаг первый: детализация задач и подготовка ТЗ

Работу с проектом мы начали с подробного обсуждения и всестороннего анализа задач клиента.

У рабочей группы клиента уже было достаточно четкое видение ключевых моментов, так что общий концепт появился достаточно быстро. После этого за несколько встреч мы проработали все детали сайта и приступили к подготовке ТЗ.

Учитывая, что сайт реализовывался с уникальным дизайном и содержал три вида каталога, объем работы предстоял большой.

Весь проект был поделен на несколько основных этапов:

1. Реализация базового каталога и детальной страницы товара

2. Реализация корзины и оформления заказа

3. Реализация контентных страниц

4. Реализация каталога комплектных товаров

5. Реализация конструктора заказов

Сайт было решено реализовывать на базе платформы 1-С Битрикс: Управление сайтом.

Шаг второй: реализация базового функционала

Разумеется, работа началась с подготовки макетов сайта. После разработки и утверждения десктопной версии с Заказчиком дизайнер подготовила макеты мобильной версии сайта.

Основной сложностью стали вкладки на Главной странице, которые клиент хотел видеть в обязательном порядке. После обкатки нескольких вариантах мы остановились на классике.

После корректировки макетов под правки клиента мы приступили с реализации базового каталога.

Учитывая небольшой объем номенклатуры, мы решили отказаться от интеграции с 1С клиента. Базовый каталог был прогружен из csv файла, подготовленного заказчиком.

В рамках работы с каталогом мы полностью сверстали и адаптировали для мобильных устройств Главную страницу сайта (вкладки «Комплекты» и «Конструктор» на данном этапе были не активны).

Аналогично была проработана детальная страница товара.В конце данного шага клиент получил возможность впервые «пощупать» свой новый сайт вживую.

Шаг третий: корзина и страница оформления заказа

После того, как главная страница с базовым каталогом и детальная страница товара были готовы, а товары загружены в систему, мы приступили к реализации корзины и страницы оформления заказов.

В целом, корзина сайта имеет базовый функционал, позволяющий изменить количество товара или убрать часть товаров из заказа, а так же перейти к оформлению заказа.

Страница оформления заказа получилась также вполне стандартная:

• Блок информации о товаре

• Блок информации о стоимости и весе заказа

• Выбор службы доставки (сайт был интегрирован с Деловыми линиями и Возовозом)

• Выбор способа оплаты

• Блок ввода информации о покупателе

Кроме стандартных страниц были настроены почтовые шаблоны писем, отправляющихся пользователю после оформления заказа.

По итогам данного шага клиент смог увидеть и протестировать полноценную работу каталога.

Шаг четвертый: создание контентных страниц

После того, как работа с каталогом была закончена, мы приступили к созданию контентных страниц.

Такое решение было принято, потому что после добавления вспомогательного контента мы могли запускать сайт в боевую эксплуатацию, а это давало несколько неоспоримых преимуществ:

• У клиента появляется возможность начать быстрее окупать свои инвестиции в сайт

• У разработчиков быстрее появляется реальный фидбек от пользователей

Страницы были отверстаны в соответствии с подготовленными дизайнером макетами. Все управление контентом было выведено в административную часть сайта так, чтобы клиент мог изменять любой контент в несколько кликов.

После прогрузки данных сайт был переведен на основной домен и открыт для первых посетителей.

Шаг пятый: создание каталога комплектов товаров

После первоначального запуска сайта мы приступили к более сложным и трудозатратным блокам.

Учитывая, что основная сложность бизнеса клиента была связана с тем, что клиенты не обладая достаточной экспертизой выбирали аккумуляторы для ИБП наугад, а потом возвращали заказ, мы взялись именно за каталог комплектов.

За основу работы каталога был взят стандартный функционал комплектов в 1С Битрикс: Управление сайтом (на момент проведения работ он был доступен только для редакции Бизнес), так что со стороны административной панели сайта больших изменений не потребовалось.

Со стороны фронта сайта мы подготовили:

• Дополнительный шаблон для отображения каталога комплектов

• Шаблон для детальной страницы комплекта на основе детальной страницы простого товара

• Внесли изменения в корзину сайта для корректного отображения комплектов

После внесения этих изменений мы активировали вкладку «Комплекты» для обычных посетителей сайта. Таким образом, новый функционал был плавно добавлен в уже работающий сайт.

Шаг шестой: создание конструктора

После релиза каталога комплектов нам оставалась самая технологичная часть сайта - конструктор.

Этот блок должен был состоять из трех частей:

1. Выбор домашней техники и указание ее параметров

2. Выбор длительности автономной работы

3. Вывод подобранных системой комплектов товаров

Учитывая высокую динамику блока, нами было принято решение реализовывать его на Vue.

Для комфортной работы пользователя мы прогрузили справочник техники со стантартными значениями мощности. При вводе названия система автоматически показывает подсказки на основании данного справочника.

Пользователь может изменять мощность и количество техники, добавлять новые позиции. При этом система предупреждает пользователя, если он вводит слишком большую или слишком низкую мощность прибора.

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

После этого на основании определенных формул система анализирует суммарную мощность оборудования с учетом средних пусковых пиков мощности, а также желаемое время работы и на основании данных расчетов автоматически формирует комплекты ИБП + аккумуляторы и показывает их на выбор пользователю.

Сформированный набор можно в один клик положить в корзину и оформить так же, как любой другой товар или набор на сайте.

Кроме этого, конструктор дает возможность поделиться расчетом - скопировать ссылку и выслать ее любому другому человеку. При переходе по ссылке у второго человека откроется в точности тот же конструктор с заполненными параметрами и сформированными наборами.

Кроме этого пользователь может получить консультацию, нажав кнопку Помощь в подборе и указав свои контактные данные. В письмо, отправляемое администратору сайта после запроса помощи, автоматически добавляется ссылка на расчет, так что при консультации менеджер будет точно знать, что необходимо клиенту.

Шаг седьмой: последние штрихи

В процессе эксплуатации сайта  появилось еще 3 небольшие задачи, которые были реализованы в рамках дополнительных работ.

1. При оформлении заказа или обращении в форму обратной связи были настроены автоматические отбивки в рабочую группу клиента в Телеграме

2. Перевели закупочную цену товара на сайте в валюту и настроили ежедневное автоматическое конвертирование цены товаров в рубли по курсу ЦБ РФ

3. Была организована автоматическая выгрузка товара на Яндекс.Маркет