Калькулятор стеллажей для Промет

Требовалось разработать калькулятор стеллажей серии MS Pro, производящихся группой компаний ПРОМЕТ.

Главные требования:

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

- Удобство и гибкость для пользователя: независимое управление рядами и секциями стеллажа

- Возможность сформировать заказ по итогам работы с калькулятором

- Удобство управления и актуализации данных

Исходные данные:

- Прототип калькулятора в Excel

- Множество таблиц с описанием комплектующих

- 3D-визуализации стеллажа

- Доступ к специалистам, знающим свой продукт от А до Я

Технологии.

- Фронтенд: Vue.js

- Бэкенд: 1С-Битрикс: Управление сайтом

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

В процессе разработки прототипа сформировалась следующая концепция:

- Базовый элемент стеллажа — это секция. Сама по себе она обладает такими характеристиками, как высота, длина, глубина, количество ярусов.

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

- Рядов может быть неограниченное количество. Ряд должен содержать хотя бы одну секцию, являющуюся основной.

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

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

Для воплощения задуманного было решено разработать фронтенд-часть на фреймворке Vue.js, а для визуализации стеллажа использовать SVG+JS. Практически вся визуализация секций стеллажа реализована на полигонах и отрисовывается браузером.

В качестве бэкенда используется 1С-Битрикс: Управление сайтом, на котором и работает основной сайт. Для удобства заказчика все комплектующие стеллажа подтягиваются из основного каталога продукции, а цены выводятся в зависимости от региона пользователя.

Что получилось в итоге

- Можно создавать неограниченное количество рядов и неограниченное количество секций в каждом ряду

- Параметры каждого ряда можно отредактировать. Так же, как и можно отредактировать параметры каждой секции.

- Для удобства пользователей каждую секцию можно скопировать в рамках ряда. Каждый ряд также можно скопировать с возможностью выбора количества копий.

- Секции можно не только выборочно редактировать, но и удалять. Даже из середины ряда.

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

- Собранную конфигурацию можно отправить на печать или себе на электронную почту.