Комментарии
Тюнинг товаров Portobello
Прокачай свой корпоративный сувенир!
Сибирикс

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

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

Что такое тюнинг товара

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

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

Как тюнинговать сувенир

Нужно зайти в детальную карточку товара и в блоке справа кликнуть «Добавить нанесение». Если такой кнопки нет, значит, на этот товар ничего нанести нельзя.
тюнинг товаров портобелло
Откроется диалоговое окно. Вытяните руки, хрустните пальцами и приготовьтесь творить.
тюнинг товаров портобелло
Опций обычно несколько: размер нанесения, цвет, расположение и прочее. При изменении опций на лету пересчитываются стоимость, срок изготовления, скидки и бонусы.

Конфигуратор нанесения

Все требования к продукту вы указываете внутри специальной формы «Нанесение» и макеты для печати загружаете тоже туда. Дополнительно после оформления заказа макеты визирует менеджер Portobello и, если они не соответствуют требованиям или не дотягивают до уровня достойного результата нанесения, в самом заказе появится сообщение о том, что нужно изменить, чтобы заказ-таки добрался до производства.
тюнинг товаров портобелло
После тюнинга товар можно положить в корзину, а из корзины — сделать заказ.
тюнинг товаров портобелло
В «Заказах» товар с нанесением будет помечен зеленым стикером «С нанесением». Пока макет находится на модерации у менеджера Portobello, кнопка будет подсвечена оранжевым с надписью «Макеты в обработке». Передумали с нанесением? Отредактируйте заказ в этом же окне.
Пока вы не нажмете кнопку «Запустить в работу», заказ не будет передан в производство. На любом из этих этапов вы можете передумать и отредактировать всю ту красоту, что вы придумали для нанесения.
тюнинг товаров портобелло
Редактирование заказа из корзины: стоит пометка, что у заказа есть нанесения, при наведении курсора появляется возможность их редактировать.
Уверены полностью в заказе — жмите «Запустить в работу». Ну, вот и все! Заказ уже находится на производстве. Все хорошо, кнопки уже ничего от вас не ждут, расслабьтесь и ждите, пока не приедет коробочка с готовыми эксклюзивными сувенирами.

Как это работает

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

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


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

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


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

Кроме того, возможны множественные операции: например, вот тиснение на ежедневнике — хотите с фольгой? — тут выберите цвет фольги — о, а можно еще одно, но уже другое тиснение? Можно. Некоторых операций нанесения может быть несколько.
Объемный пласт работ выполнили на стороне 1С, которую дорабатывали под эту задачу — заказы с нанесениями можно делать не только на сайте, но и в 1С. На стартовый этап согласований и проектирования архитектуры ушло порядка 40 часов обсуждений менеджера и технического специалиста как с нашей стороны, так и менеджера и 1С-специалиста со стороны заказчика. Но оно того стоило!

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

Алгоритмы расчета цен

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

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


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

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

Используемые технологии

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

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

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

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

К тому же, сайту много лет, он не просто большой — он огромный, так что выделить отдельный сервер под изолированный модуль — значит проще его обслуживать в дальнейшем.
сибирикс
Денис
Разработчик
Изоморфный код

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

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

Форма тюнинга выводится с помощью React. js и RxJS (библиотека для реактивного программирования). За счет этого в форме любое действие пользователя обрабатывается мгновенно.
Это была одна из самых сложных разработок в моей практике: в голову нужно было уместить весь технологический стек, структуру связей между пачкой новых таблиц, продумать возможные связи со старым функционало сайта. И всё это при крайне сжатых сроках. Десятки часов переговоров и обсуждений с участием наших разработчиков, менеджера и 1С-специалиста со стороны заказчика. Распараллеливание сразу нескольких потоков работ: аналитики, дизайна и разработки. Четыре месяца непрерывного мозгового штурма. Вышел мощный продукт.
сибирикс
Екатерина
Исполнительный директор и руководитель проекта