Разработка магазина на 1с-битрикс с умным конструктором ИБП и аккумуляторов для 220problem.net

Предыстория

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

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

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

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

Что хотел клиент

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

Этапы решения

Шаг 1. Детализация задач и подготовка ТЗ:

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

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

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

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

Шаг 2. Реализация базового функционала:

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 4. Создание контентных страниц:

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

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

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

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

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

Шаг 5. Создание каталога комплектов товаров:

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

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

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

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

• Дополнительный шаблон для отображения каталога комплектов;
• Шаблон для детальной страницы комплекта на основе детальной страницы простого товара;
• Внесли изменения в корзину сайта для корректного отображения комплектов.

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

PHOTOGALLERYID_1694   

Шаг 6. Создание конструктора:

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

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

1. Выбор домашней техники и указание ее параметров; 
2. Выбор длительности автономной работы; 
3. Вывод подобранных системой комплектов товаров.

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

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

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

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

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

Также конструктор дает возможность поделиться расчетом – скопировать ссылку и выслать ее любому человеку. При переходе по ссылке откроется тот же конструктор с заполненными параметрами и сформированными наборами.

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

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

Шаг 7. Последние штрихи:

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

1. При оформлении заказа или обращении в форму обратной связи были настроены автоматические отбивки в рабочую группу клиента в Телеграм;
2. Перевели закупочную цену товара на сайте в валюту и настроили ежедневное автоматическое конвертирование цены товаров в рубли по курсу ЦБ РФ;
3. Была организована автоматическая выгрузка товара на Яндекс.Маркет.