Этот урок является логическим продолжением двух предыдущих статей ( часть 1 , часть 2 ) о создании трехмерных конфигураторов без использования программирования и верстки.
В прошлой части мы рассмотрели вопрос интеграции трехмерной части с помощью стандартной системы заказа, включенной в плагин Verge3D для WordPress. Однако этот вариант подойдет не всем, так как возможности этого плагина существенно ограничены.
С его помощью невозможно получить доступ к популярным платежным системам, таким как PayPal или 2Checkout, невозможно оперировать скидками, купонами, акциями и прочим, что все привыкли видеть в популярных системах электронной коммерции.
В этой статье мы покажем вам, как обойти эти ограничения и интегрировать 3D-визуализацию непосредственно в ваш интернет-магазин WooCommerce. Кстати, сегодня это самая популярная система электронной коммерции – по данным статистика его используют в 28% всех интернет-магазинов.
Результат
Вот как будет выглядеть наш магазин — нажмите на картинку, чтобы опробовать его лично.
В этом прототипе мы будем продавать некогда популярные игрушки - спиннеры.
Предполагается, что у потенциального покупателя будет возможность выбрать цвет и размер из предложенных вариантов.
В качестве бонуса посетитель нашего магазина сможет в реальном времени раскрутить трехмерную модель, а также услышать характерный звук подшипника.
Конечно, модель можно рассматривать со всех сторон и увеличивать/уменьшать масштаб.
План
Рабочий процесс не особенно сложен, но на всякий случай вот краткое описание того, что мы собираемся делать:- Установка плагина WooCommerce и Verge3D.
- Создание интерактивного приложения и загрузка его на сайт.
- Создание нескольких вариантов продукта в WooCommerce.
- Определение логики приложения в визуальном редакторе.
Монтаж
Плагины WooCommerce и Verge3D доступны в стандартном каталоге WordPress. Просто найдите их, установите и активируйте.
При установке системы WooCommerce мастер предложит ввести ряд параметров вашего будущего магазина, при этом Verge3D не требует дополнительной настройки.
3D-графика
Для целей этой статьи мы будем использовать готовую модель спиннера, включенную в примеры Verge3D. Кстати, такую модель легко может создать человек, обладающий базовыми навыками работы в программах 3D-моделирования 3ds Max или Blender, либо скачать из бесплатного каталога или магазина моделей.
Помимо модели нам потребуется определить логику приложения в визуальном редакторе Puzzles. В частности, нам нужно будет изменить цвет и размер, а также включить/выключить анимацию кликов.
Подробнее об этом мы поговорим ниже.
Загрузка 3D приложения на сайт
Чтобы загрузить приложение на свой сайт, используйте инструмент Verge3D-Applications, расположенный на панели управления WordPress. Нажмите кнопку «Добавить новый»:
Введите имя вашего 3D-приложения и нажмите «Далее».
На странице настроек выберите папку с файлами приложения и нажмите «Загрузить»: 
После завершения загрузки вернитесь в окно приложений и проверьте, как все работает, нажав на ссылку spinner.html. 
Наш 3D-конфигуратор спиннера откроется в новом окне и займет всю страницу.
Это нормально, так как над основной частью, а именно интеграцией с WooCommerce, мы еще не работали.
Добавление 3D на страницу продукта
Наш следующий шаг — заменить скучные статичные изображения товаров в магазине WooCommerce на полноценную 3D-модель.Кстати, если вы еще не создали сам продукт, то сейчас самое время это сделать.
3D подключение производится в режиме редактирования: 
В разделе «Данные продукта» переходим на вкладку Verge3D и выбираем созданное нами ранее приложение: 
Сохраните настройки и перейдите на страницу товара.
Теперь вместо изображения должно отображаться интерактивное приложение: 
Добавление вариантов продукта
Показать клиентам 3D-изображения продукта – это уже большое достижение.Но поскольку мы взялись сделать не просто 3D визуализацию, а полноценный конфигуратор, то нам потребуется сделать нашу 3D модель настраиваемой.
Возможность создавать 3D-конфигураторы товаров предоставляется стандартной функцией WooCommerce, называемой вариациями.
В нашем магазине покупатель сможет выбрать товар одного из трех разных размеров и цветов.
Итак, начнем с цветов! В разделе «Данные о товаре» выберите «Переменный товар», затем перейдите на вкладку «Атрибуты» и добавьте новый атрибут под названием «Цвет».
Укажите 3 значения — красный, синий и желтый — и отметьте «Использовать для вариаций».
Добавьте еще один атрибут размера «Размер» и сохраните настройки: 
Теперь создайте все возможные варианты продукта в WooCommerce: 
Всего будет создано 9 разных изделий: маленький синий, маленький красный, большой жёлтый и так далее.
Все, что вам нужно сделать, это установить цены для каждого варианта: 
Сохраните настройки и проверьте товар в магазине!
Создание 3D-конфигуратора
На данный момент у вас есть переменный продукт WooCommerce. Однако 3D-часть всегда остается неизменной, какие бы опции ни выбрали клиенты.Давайте это исправим! На предыдущем этапе вы могли заметить, что в приложении есть 3 цветных шарика, которые служат для изменения цвета спиннера.
При нажатии одной из этих «кнопок» материал модели меняется.
Это делается с помощью простых блоков Puzzles и редактора визуальной логики, входящего в состав Verge3D: 
Теперь вместо этих трёх областей мы будем использовать меню выбора, которое WooCommerce автоматически добавляет на страницу товара.
В этом случае логические блоки будут выглядеть немного иначе: 
На картинке видно, что когда покупатель выбирает цвет, модели будет присвоен одноименный материал - красный, синий или желтый.
А вот как будет выглядеть логика изменения размера модели: 
Вот и все! Создав логику, вы просто загружаете приложение на сайт, как мы делали выше, и перезагружаете страницу товара.
Теперь у нас есть полноценный конфигуратор с анимацией, выбором размеров и цветов.
Трилогия уроков по созданию трехмерного конфигуратора без программирования и верстки завершена.
Если что-то осталось неясным или есть другие вопросы, давайте обсудим в комментариях.
Также напишите, что бы вы хотели видеть в будущих уроках по использованию 3D в сети.
Теги: #woocommerce #webgl #3d #verge3d #wordpress #3d графика #3d моделирование #электронная коммерция #интернет-магазин #wordpress #Работа с 3D-графикой #webgl #Разработка для электронной коммерции #Интернет-маркетинг
-
Вам Нужна Резервная Копия?
19 Oct, 24 -
Энергия Не Сохраняется
19 Oct, 24 -
У Каждого Владельца Сайта Свой Поиск!
19 Oct, 24 -
Загрузка Каверов С Last.fm На Amarok
19 Oct, 24
