Разработка сложного онлайн конфигуратора по переоборудованию автомобиля
Одно из наших любимых направлений, это решать сложные и нестандартные задачи. Именно такую мы не давно успешно реализовали, получив от клиента невероятно радостную обратную связь. Такая реакция была связана с тем, что мы уберегли его от огромной головной боли, с которой он столкнулся при работе с ранее разработанным решением конфигуратора.
Интересно то, что до нас конфигуратор был сделан и в целом выполнен с правильной логикой. Однако, в реальных боевых условиях всплыли нюансы, которые клиенты и прошлый разработчик не предусмотрели. И такая ситуация не редкость. Причем в совершенно разных отраслях с разными по сложности сайтами. Как избежать такого рода ситуаций? Думаю, вам станет это понятно после прочтения данного кейса.
Создание технического задания
Как часто этот шаг пытаются пропустить или выполнить для галочки. Но мы ранее уже писали о важности технического задания в разработке. Более того, работа создающего его специалиста не менее важна, чем при непосредственной реализации. А чаще даже более значима — как роль проектировщика при постройке нового здания.
Мы потратили примерно неделю для написания ТЗ. Раза три переделывая и дополняя описание действий для реализации поставленной задачи. Клиент принимал активное участие в корректировке задания, задавая вопросы, уточняя детали и важные для себя особенности. Надо отдать должное вовлеченности заказчика, ведь это в итоге сильно повлияло на полученный результат.
Интерфейс пользователя
Первым этапом после начала непосредственных программных работ был этап интерфейса для клиента. По большому счету визуальных изменений у нас было не много. Добавить несколько шагов в конфигураторе, вывести дополнительные строки в финальной таблице с расчетами и полей для сумм. И так же надо было добавить форму заявки на последнем шаге, чтобы сформированная конфигурация спецавтомобиля могла «прилететь» к владельцу сайта в виде нового лида.
Но несмотря на то, что визуальную часть мы особо не меняли, ее код внутри пришлось неплохо перелопатить. Связано это с тем, что структура js скриптов, работающих на всех этапах конфигуратора, была крайне негибкой и при масштабировании плодилось большое количество дублирующего и ненужного кода. Наращивать функционал на такой код было не целесообразно, и мы его доработали и уменьшили в три раза.
Среди яркой ошибки прошлого разработчика, было необоснованное умножение кода для каждой вкладки отдельно. К примеру, в конфигураторе есть стрелка «назад» позволяющая вернуться на шаг раньше. По логике достаточно одной функции для этого действия, однако была сделана кнопка «Назад» на каждой вкладке и для каждой своя функция. Итого 6 шагов конфигуратор это было 6 функций, вместо одной. Конечно, так делать недопустимо, ведь это не только усложняет доработку в будущем но и формирует лишние объемы сайту, которые в итоге влияют на скорость его загрузки, ранжирование поисковиков и удовлетворённость клиента от работы с сайтом.
В финальной части этого автомобильного конфигуратора получились такие шаги:
- Выбор направления деятельности (медицинские, пожарные и другие спецавтомобили)
- Класс автомобиля (по сути, выбор марки)
- Модель автомобиля
- Выбор размерности (колесной базы автомобиля)
- Технические параметры – двигатель + привод + коробка передач
- Специальное оборудование (особое оборудование, например, дефибриллятор для медицинского автомобиля)
- Дополнительное оборудование (магнитола, регистратор и т.д.)
- Тюннинг (тонировка, антикоррозийное покрытие и подобные улучшения)
- Финальный шаг – таблица расчета и форма заявки
Интерфейс администратора
Тут началось самое интересное. Ведь главная проблема была именно на шаге администрирования. В ходе изучения вопроса мы пришли к выводу, что клиенту потребуется сделать свое оформление внутри админки, так как стандартный интерфейс, которые использовался им ранее в управлении конфигуратора не подходил. Но обо всем по порядку.
Главная сложность в работе старой версии конфигуратора
Итак, в чем же была основная проблема? Она была в количестве вариаций, которые клиенту необходимо было создать вручную. Вот представьте, что у вас есть один вариант автомобиля и у него есть 4 варианта по длине — каждый по своей стоимости. Далее к этому прибавляется еще возможность выбрать один из трех видов двигателя, трех вариантов привода и пары видов коробки передач. Причем комбинации всех этих вариантов имеют свою стоимость. В итоге по одному автомобилю мы получили 120 вариаций с разными ценами только для одного автомобиля. А у заказчика в каталоге порядка 60 автомобилей, то есть ему надо было добавить несколько тысяч записей для конфигуратора. И это надо сделать было вручную, а потом еще отслеживать и актуализировать данную информацию.
Очевидно, что в таком объеме никак не обойтись без автоматизированного решения. И у клиента было общее понимание, как это в целом можно свести к совершенно другому количеству. Чтобы он управлял буквально парой сотней ключевых звеньев, а остальное генерировалось бы автоматически или как-то по-другому бы само группировалось. Но технического решения у них не было. Его придумали мы.
Новая проблема в виде новой логики формирования цены
Когда мы выдвинули идею реализации путем обновленного интерфейса для управления записями, клиент немного усложнил задачу решив дополнить конфигуратор еще одной функцией, которая бы сделала его максимально удобным для управления.
Нужна была возможность указывать разную стоимость переоборудования. То есть от конфигурации автомобиля завесила не только стоимость его самого, что очевидно, но и стоимость работ по его модернизации. Хотя ранее эта стоимость была фиксированная и не зависела ни от автомобиля, ни от его технических характеристик. А теперь стала зависеть.
Решение задачи и разработка индивидуального модуля для 1С-Битрикс
Когда с общим пониманием функционала было покончено, мы приступили к разработке. Реализацию упаковали в виде персонального модуля, который нельзя купить на маркетплейсе битрикса и установлен он только внутри сайта клиента.
На вопрос, почему мы сделали в виде модуля, ответить не сложно – так удобнее интегрироваться в интерфейс админки Битрикса, нет критичной зависимости от обновлений и легче вести модернизацию и улучшение кода в перспективе.
При разработке оформления мы использовали привычные элементы, и оно органично вписалось в общую картинку. Будто, это родное приложение для работы с каталогом, только усовершенствованное под конкретные цели заказчика.
Среди общего удобства группировки мы добавили ряд удобные функций, таких как копирование готовой конфигурации и множественный выбор характеристик, которые имею в комплекте одинаковую цену.
Как результат, заказчик очень быстро заполнил конфигуратор актуальными данными. Ему приходилось управлять всего парой сотней вариаций, а наша система генерировала больше 5000 уникальных сборочных записей, создавая их самостоятельно и перезаписывая при изменении.
Резюме
Сайты автомобильное тематики часто требуют особенных технических решений. Конфигураторы, связь с базой данных поставщиков по запчастям и прочие. У нашей компании формируются хороший опыт в данном направлении и мы будем рады помочь вам в решении подобного рода задач.
Делаем 3D конфигуратор для WooCommerce
Этот урок является логическим продолжением двух предыдущих статей (часть 1, часть 2) про создание трёхмерных конфигураторов без использования программирования и вёрстки.
В прошлой части мы рассматривали вопрос интеграции трёхмерной части с использованием штатной системы заказов, входящей в плагин Verge3D для WordPress. Однако такой вариант подходит далеко не всем, поскольку возможности этого плагина существенно ограничены. С его помощью невозможно получить доступ к популярным платёжным системам, типа PayPal или 2Checkout, невозможно оперировать со скидками, купонами, запасами и прочими вещами, которые все привыкли видеть в популярных системах электронной коммерции.
В этой статье мы покажем, как обойти эти ограничения и интегрировать трёхмерную визуализацию непосредственно в интернет магазин на WooCommerce. К слову, на сегодняшний день это самая популярная система электронной коммерции — согласно статистике она используется в 28% всех интернет-магазинов.
Результат
Вот как будет выглядеть наш магазин — нажмите на картинке, чтобы попробовать его вживую.
В этом прототипе мы будем продавать некогда популярные игрушки — спиннеры. Предполагается, что потенциальный покупатель будет иметь возможность выбора цвета и размера из предложенных вариантов. В качестве бонуса, посетитель нашего магазина сможет раскрутить трёхмерную модель в реальном времени, и более того, услышать характерный звук подшипника. Само собой, модель можно будет рассматривать со всех сторон и приближать/удалять.
Рабочий процесс не отличается особой сложностью, но на всякий случай набросаем короткий план того, что мы собираемся сделать:
- Установка WooCommerce и плагина Verge3D.
- Создание интерактивного приложения и его загрузка на сайт.
- Создание нескольких вариантов продукта в WooCommerce.
- Определение логики работы приложения в визуальном редакторе.
А теперь рассмотрим эти шаги более подробно.
Инсталляция
Плагины WooCommerce и Verge3D имеются в штатном каталоге WordPress. Просто найдите их, установите и активируйте.
При установке системы WooCommerce, мастер предложит ввести ряд параметров вашего будущего магазина, в то время как Verge3D дополнительной настройки не требует.
3D Графика
Для целей статьи мы используем готовую модель спиннера, включенную в примеры Verge3D. К слову, такая модель может быть легко создана человеком, имеющим базовые навыки работы в программах 3D моделирования 3ds Max или Blender, либо загружена из бесплатного каталога или магазина моделей.
Кроме модели, нам потребуется определить логику работы приложения в визуальном редакторе Puzzles. В частности, нам потребуется менять цвет и размеры, а также включать/выключать анимацию по клику. Подробнее об этом мы поговорим ниже.
Загрузка 3D-приложения на сайт
Чтобы загрузить приложение на свой сайт, воспользуйтесь инструментом Verge3D-Applications, расположенным на панели инструментов WordPress. Нажмите кнопку «Add New»:
Введите имя для вашего 3D-приложения и нажмите «Next». На странице настроек выберите папку с файлами приложения и нажмите «Upload»:
После того, как загрузка завершится, перейдите обратно в окно приложений и проверьте, как всё работает, нажав на ссылку spinner.html.
Наш 3D конфигуратор спиннера откроется в новом окне и будет занимать всю страницу. Это нормально, поскольку мы ещё не занимались основной частью, а именно интеграцией с WooCommerce.
Добавление 3D на страницу продукта
Наш следующий шаг — заменить скучные статичные изображения товара в магазине WooCommerce на полноценную трёхмерную модель. Кстати, если вы ещё не создали сам продукт, самое время это сделать.
Подключение 3D производится в режиме редактирования:
В разделе «Product data» перейдите на вкладку Verge3D и выберите приложение, которое мы создали ранее:
Сохраните настройки и перейдите на страницу продукта. Теперь она должна показывать интерактивное приложение вместо картинки:
Добавление вариантов продукта
Показ покупателям 3D видов продукта — это уже большое достижение. Но поскольку мы взялись делать не просто 3D визуализацию, а полноценный конфигуратор, нам потребуется сделать нашу трёхмерную модель настраиваемой.
Возможность создавать 3D-конфигураторы продуктов обеспечивается стандартной функцией WooCommerce, которая называется вариациями (variable product). В нашем магазине покупатель сможет выбирать товар одного из трёх различных размеров и цветов.
Итак, начнем с цветов! В разделе «Product data» выберите «Variable product», а затем перейдите на вкладку «Attributes» и добавьте новый атрибут с именем «Color». Укажите 3 значения — красный, синий и желтый — и отметьте «Used for variations».
Добавьте еще один атрибут «Size» для размера и сохраните настройки:
Теперь создайте все возможные варианты товара в WooCommerce:
Всего будет создано 9 различных продуктов: синий маленький, красный маленький, желтый большой и так далее. Всё что вам останется сделать — проставить цены для каждого из вариантов:
Сохраните настройки и проверьте продукт в магазине!
Создание 3D конфигуратора
На этом этапе у вас есть вариативный продукт WooCommerce. Тем не менее, трёхмерная часть остаётся всегда одинаковой, независимо от того, какие варианты выбирают клиенты. Давайте исправим это!
На предыдущем этапе вы могли заметить, что в приложении имеются 3 цветных шарика, служащие для изменения цветов спиннера. При нажатии одной из этих «кнопок» материал модели изменяется. Это делается с помощью простых блоков Puzzles, редактора визуальной логики, входящего в Verge3D:
Теперь вместо этих трех сфер мы будем использовать меню выбора, которое автоматически добавил WooCommerce на страницу товара. В этом случае, логические блоки будут выглядеть несколько иначе:
На картинке видно, что когда клиент выбирает цвет, на модели будет назначен материал с тем же именем — красный, синий или желтый.
А вот как будет выглядеть логика для изменения размеров модели:
Вот и все! Создав логику, вы просто загружаете приложение на сайт, как мы проделывали выше, и перезагружаете страницу с товаром. Теперь у нас есть полноценный конфигуратор с анимацией, выбором размеров и цветов.
Трилогия уроков по созданию трёхмерного конфигуратора без программирования и вёрстки закончена. Если что осталось непонятным, или будут другие вопросы, давайте обсудим в комментариях. Также пишите, что бы вы хотели видеть в последующих уроках по использованию 3D в вебе.
Конструктор продуктов & товаров на jQuery 
Конструктор продуктов — полезные инструменты для покупок, которые позволяют потенциальным клиентам «строить» идеальную версию продукта, комбинируя различные варианты. В конце этого процесса пользователю обычно дается действие, чтобы выполнить: сохранить сборку, поделиться ею или купить продукт напрямую.
Создание такого веб-компонента с нуля — не легкая работа. Поэтому мы решили продемонстрировать простой в настройке шаблон, который поможет вам реализовать свой собственный продукт!
Создание структуры
Структура HTML состоит из трех основных элементов: заголовок header.main для верхней навигации, div.cd-builder для шагов конструктора и footer.cd-builder-footer для нижней части конструктора и Обзор выбранного продукта.
Что касается шагов конструктора, только первая может быть найдена в файле index.html . Другие шаги зависят от модели, которую пользователь выбирает и загружается с помощью Ajax (Подробнее в разделе «Обработка событий»).
Добавление стиля
CSS, используемый для этого ресурса, довольно прост, вы можете скачать демонстрационный файл, чтобы взглянуть на весь код.
Только одно примечание о стиле основных элементов: шаг div.cd-builder используются для обертывания разных шагов конструктра; Его элементы списка находятся в абсолютном положении, имеют высоту и ширину 100%, являются одними поверх других и скрыты по умолчанию; Класс .active затем используется для выявления активного шага.
Обработка событий
Чтобы реализовать конструктор продукта, мы создали объект ProductBuilder и использовали функцию bindEvents для прикрепления обработчиков событий к соответствующим элементам.
Когда пользователь выбирает одну из моделей, вызов Ajax заботится о загрузке нового контента для выбранной модели; Атрибут модели данных добавляется к каждому элементу списка внутри списка ul.models и равен имени файла HTML, из которого новый контент должен быть извлечен (modelType в коде ниже).
Каждый элемент списка имеет также цену данных, которая является ценой выбранной модели. Атрибуты цены данных также добавляются к другим параметрам внутри конструктора (цвета, принадлежности) и используются для обновления окончательной цены продукта.
Что касается возможных настроек продукта, мы использовали класс .options-list для таргетинга списков опций, среди которых пользователь может выбрать (в наших примерных моделях и аксессуарах). Когда пользователь выбирает опцию, функция updateListOptions () заботится об обновлении цены продукта (и содержимого, если модель выбрана).
Опция класса .js-option добавляется к каждому элементу списка внутри списка ul.options и используется для обнаружения события. Если параметры являются эксклюзивными (например, с моделями, поскольку вы можете выбрать только один вариант), добавляется второй класс .js-radio .
Вместо этого используется настраиваемый класс .cd-product-customizer , например, Colors, где пользователь может выбрать опцию и увидеть изменения в продукте. Когда выбран один из этих параметров, функция customizeModel () следит за обновлением предварительного просмотра продукта и цены на продукт (при необходимости).
Как сделать онлайн конфигуратор для сайта
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.