Прокачай свой корпоративный сувенир!

За 8 лет технической поддержки проекта Portobello чего мы только не переделали: и конструкторы, и редизайн сайта, и дизайн-систему и много чего еще. Маловато будет. Теперь мы переработали форму тюнинга товара, где партнеры компании сами могут брендировать свой сувенир, и интегрировали ее с 1С — разработали для Portobello уже третий конфигуратор.

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

То есть с помощью этого конфигуратора можно создать брендированные зонт, ручку, ежедневник, термокружку, рюкзак или сумку — они будет такие, какие нужны вам, и единственными в мире :)

Нужно зайти в детальную карточку товара и в блоке справа кликнуть «Добавить нанесение». Если такой кнопки нет, значит, на этот товар ничего нанести нельзя.

Откроется диалоговое окно. Вытяните руки, хрустните пальцами и приготовьтесь творить.

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

Все требования к продукту вы указываете внутри специальной формы «Нанесение» и макеты для печати загружаете тоже туда. Дополнительно после оформления заказа макеты визирует менеджер Portobello и, если они не соответствуют требованиям или не дотягивают до уровня достойного результата нанесения, в самом заказе появится сообщение о том, что нужно изменить, чтобы заказ-таки добрался до производства.

После тюнинга товар можно положить в корзину, а из корзины — сделать заказ.

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

Уверены полностью в заказе — жмите «Запустить в работу». Ну, вот и все! Заказ уже находится на производстве. Все хорошо, кнопки уже ничего от вас не ждут, расслабьтесь и ждите, пока не приедет коробочка с готовыми эксклюзивными сувенирами.

Нам требовалось решить несколько задач:

1. Данные для формы тюнинга должны задаваться только на стороне 1С.
2. Форма тюнинга должна строиться максимально универсально, чтобы при добавлении любой новой операции нанесения в 1С это не требовало доработок на сайте.
3. Для пользователя на сайте должны рассчитываться точные цены и срок производства с учетом загрузки производственных мощностей.
   
   

Как мы это решили:

• На основании данных из 1С и заполненных пользователем параметров нанесения сайт рассчитывает цены.
  
• На основании выбранных пользователем параметров отправляется запрос в 1С для расчета срока производства.
  
• На основании данных из 1С сайт понимает, как визуально должна выглядеть форма (где выпадающий список, где текстовое поле или чекбокс). При этом в 1С ничего про сами типы полей (и даже про то, из каких частей должна состоять форма) не указывается.

При этом данные для новой логики тюнинга появились в промежуточной базе данных MSSQL, через которую обмениваются сайт и 1С, в виде 19 (!!!) новых таблиц, перекрестно связанных между собой.

Кроме того, возможны множественные операции: например, вот тиснение на ежедневнике — хотите с фольгой? — тут выберите цвет фольги — о, а можно еще одно, но уже другое тиснение? Можно. Некоторых операций нанесения может быть несколько.

В одну форму тюнинга заложен единый алгоритм расчета конечной стоимости, который должен учитывать несколько условий и ограничений:

1. минимальная стоимость операции в заказе для конкретного товара;
   
2. стоимость операции в зависимости от тиража,
   
3. стоимость операции в зависимости от значения выбранных параметров (например, цена клише зависит от площади тиснения, причем с увеличением площади, сумма будет увеличиваться),
   
4. скидки контрагентов на товары и нанесения,
   
5. фиксированные скидки на нанесения, зависящие от комбинации параметров.
   
   

В полях формы выводятся параметры — характеристики нанесения, и конечная сумма формируется из стоимостей всех нанесений.

Более того. В производственном цикле есть операции, которые пользователь не видит. Но они тоже стоят денег и влияют на итоговую стоимость сувенира. Их надо учитывать. Например, пользователь выбирает ляссе. Это одно поле в форме. Операции, которые мы при этом учитываем при расчете: вырвать ляссе, взять ляссе, вклеить ляссе.

Технологический стек реализации этого проекта сильно отличается от всего, что мы делали для Portobello.

Хранение данных и сервер

Хранить данные на сайте в том виде, в котором они приходят из 1С (это те самые 19 таблиц, взаимозависимых друг с другом) было нельзя. Данные сформированы в MSSQL-таблице, но не в том виде, из которого их можно достаточно быстро получить. Важно было, чтобы форма строилась быстро и динамически изменялась в зависимости от выбора нанесения (например, при выборе одних элементов должны деактивироваться другие или при выборе одного параметра должны меняться ограничения у другого).

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

При импорте товаров из 1С в каталоге мы формируем необходимую структуру данных и сохраняем ее в отдельную для тюнинга базу данных MongoDB. Эта база использует JSON-подобные документы, которые умеют хранить нужные нам вложенности (помните, в форме тюнинга куча разных операций с вложенностями? Оно!)

Изоморфный код

Бэкенд разработка реализована на двух языках программирования: JavaScript и TypeScript, который расширяет возможности первого. Такой симбиоз позволил создать изоморфный код — код, который используется и на бэкенде, и на фронтэнде.

Например, пользователь в форме тюнинга выбрал несколько параметров, стоимость рассчитывается мгновенно и выводится ему на компьютер (на клиент) без обращения к серверу. Мгновенно — поскольку сервер сайта (Node.js) не берет на себя дополнительную нагрузку (а он ведь обслуживает весь сайт).

React.js

Форма тюнинга выводится с помощью React. js и RxJS (библиотека для реактивного программирования). За счет этого в форме любое действие пользователя обрабатывается мгновенно.