Вердж3Д плагин для Вордпресса — Софт Эйт Софт
Description: Как настроить и использовать плагин Вердж3Д Вордпресс для целей публикации и электронной коммерции.

# Плагин для Вордпресса

«Вердж3Д» поставляется с плагином для «Вордпресса», самой популярной из используемых систем управления контентом (60+ миллионов установок).

Плагин предоставляет следующие возможности:

- Размещение и публикация WebGL-приложений (прямое встраивание на страницы, через элементы iframe или с помощью коротких кодов «Вордпресса»).
- Простой в использовании виджет для плагина «Элементор»
- Интеграция с системой «Ву Коммерц». Вы можете вставлять визуализацию на страницы товаров, а также создавать мощные конфигураторы с помощью пазлов.
- Встроенная система электронной коммерции для обработки заказов, в качестве альтернативы «Ву Коммерц».
- Постоянное хранилище файлов.

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

На данный момент деятельность «Пейпал» в России и Белоруссии приостановлена. В качестве альтернативы используйте интеграцию плагина с открытой системой «Ву Коммерц», в которой есть возможность осуществления платежей с помощью российских сервисов, таких как «Робокасса».

## Содержание

- Песочница
- Установка
- Загрузка приложений
- Настройки приложения
- Виджет для «Элементора»
- Взаимодействие с кнопками
- Интеграция с «Ву Коммерц»
- Альтернативная система электронной коммерции
- Получение заказов с помощью формы заказа
- Управление заказами
- Управление продуктами
- Получение информации о продуктах
- Загрузка файлов
- Настройки плагина

#

## Песочница

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

#

## Установка

Перед установкой плагина убедитесь, что у вас есть «Вордпресс» как минимум 5-ой версии. Для загрузки приложений на сервер вам необходимо иметь современный браузер, такой как «Гугл Хром», «Файрфокс», «Майкрософт Эдж» или «Эпл Сафари».

Последовательность установки:

- Нажмите Add New на странице плагинов в панели администратора «Вордпресса».
- Найдите плагин Verge3D в официальном репозитории WordPress.org и установите его.
- Активируйте плагин. Меню Verge3D должно появиться на панели администратора.

В некоторых случаях вам может понадобиться установить плагин из дистрибутива «Вердж3Д» (например, когда вы собираетесь опробовать новую функцию, доступную в пререлизной версии «Вердж3Д»). Для этого выполните следующие действия:

- Загрузите архив плагина из verge3d/wordpress/verge3d.zip через интерфейс администратора «Вордпресса».
- Активируйте плагин в меню Plugins. Меню Verge3D должно появиться в панели администратора.

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

#

## Загрузка приложений

Используйте меню администратора Applications для доступа к экрану Verge3D Applications:

Чтобы загрузить свое приложение, нажмите кнопку Add New, введите имя приложения, далее нажмите Next. Загрузится диалог Manage Verge3D Application. В этом диалоге нажмите Choose Files, выберите папку приложения, далее нажмите Upload:

Здесь же вы можете настроить размер холста (iframe) вашего приложения и разрешить/запретить использование полноэкранного режима.

Для встраивания приложений «Вердж3Д» в страницы/посты «Вордпресса» используйте следующий короткий код:

`[verge3d id="ИДЕНТИФИКАТОР_ПРИЛОЖЕНИЯ"]`

где ИДЕНТИФИКАТОР_ПРИЛОЖЕНИЯ это идентификатор вашего приложения, которое отображается в таблице на экране Verge3D Application.

Если вы используете плагин «Элементор», в поставке имеется виджет который существенно упростит процедуру добавления приложения.

#

## Настройки приложения

На экране Manage Verge3D Application находятся следующие настройки приложений:

Title
  Имя «Вердж3Д»-приложения. Это значение требуется только в админ-интерфейсе «Вордпресса», например чтобы назначить приложение на страницу товара «Ву Коммерс». Чтобы поменять заголовок отображаемый в браузере (а также в поиске «Яндекса» или «Гугла») необходимо редактировать HTML-файл приложения. Как это сделать читайте в соответствующем разделе.
iframe width
  Ширина 3Д-окна на страницах/постах/продуктах «Вордпресса» (в пикселях). Учтите, что реальные размеры 3Д-окна могут отличаться, поскольку зависят от используемой темы, компоновки страницы, CSS-стилей и т.д.
iframe height
  Высота 3Д-окна на страницах/постах/продуктах «Вордпресса» (в пикселях). Учтите, что реальные размеры 3Д-окна могут отличаться, поскольку зависят от используемой темы, компоновки страницы, CSS-стилей и т.д.
Allow fullscreen mode
  Разрешить/запретить использование полноэкранного режима. Если галочка снята, кнопка входа в полноэкранный режим будет удалена из приложения, сделав невозможным использование данного режима.
Allow AR/VR
  Разрешить/запретить создание в приложении сессий виртуальной/дополненной реальности.
Loading
  Стратегия загрузки приложения. Установите Lazy чтобы задержать загрузку приложения, пока оно находится в фоне. Установите Eager чтобы загружать приложение немедленно. Auto означает, что браузер сам решает когда загружать приложение.
App Image
  Картинка приложения. Эта картинка заменяет штатную картинку с изображением 3Д-просмотра, показываемую в галерее картинок товара «Ву Коммерц». Смотрите ниже для получения дополнительной информации.

#

## Виджет для «Элементора»

Эта функция позволяет вам встраивать «Вердж3Д»-приложения на страницы «Элементора». Просто перетащите виджет Verge3D из вкладки инструментов General (или воспользуйтесь поиском):

и выберите нужное приложение на панели Content:

Вы можете установить размер холста приложения и другие функции с помощью настроек приложения.

#

## Взаимодействие с кнопками

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

Пример встраивания «Вердж3Д»-контента, управляемого кнопкой, добавленный с помощью редактора «Вордпресса».

### Встроенный редактор «Вордпресса» (редактор блоков)

Чтобы перехватить событие нажатий кнопок, добавленных с помощью встроенного в «Вордпресс» редактора, сперва назначьте a пользовательский CSS-класс. Вы можете сделать это выбрав кнопку и добавив имя класса в соответствующее поле, расположенное на панели Block → Advanced → ADDITIONAL CSS CLASS(ES):

Далее используйте пазл on event of чтобы добавить обработчик события для элемента кнопки. Сам элемент может быть получен с помощью пазла query selector:

Укажите CSS-класс, назначенный на кнопке в качестве первой части селектора (точка в начале означает «получить элемент по имени класса»), за которой следует название тега a:

`.my-button a`

Учтите, что поскольку приложение добавляется через iframe, вам необходимо указать настройку in parent doc.

### Кнопки из «Элементора»

Нажатия на кнопки, добавленные через «Элементор» обрабатываются несколько иначе. Вместо имени класса вам потребуется назначить идентификатор для кнопки, что делается на панели Edit Button → Content → Button ID:

Далее используйте пазл on event of чтобы добавить обработчик события для элемента кнопки. Сам элемент может быть получен с помощью пазла query selector:

Укажите идентификатор элемента, назначенный на кнопке в качестве первой части селектора (решётка в начале означает «получить элемент по идентификатор»), за которой следует название тега a:

`#my-button a`

Учтите, что поскольку приложение добавляется через iframe, вам необходимо указать настройку in parent doc.

#

## Интеграция с «Ву Коммерц»

«Ву Коммерц» — это популярная система электронной коммерции, на которой работает более 28% всех интернет-магазинов. «Вердж3Д» предлагает интеграцию с «Ву Коммерц» через этот плагин «Вордпресса» и пазлы электронной коммерции.

Для получения дополнительной информации о том, как использовать эту функцию, воспользуйтесь следующим руководством (англ.). Также вы можете просмотреть это видео (англ.).

### Поддерживаемые типы продуктов

Плагин поддерживает следующие типы продуктов:

- Simple
- Grouped
- External/Affiliate
- Variable
- Composite (требует наличия расширения WooCommerce Composite Products)

Посмотрите демо-приложение «Магазин напитков» из магазина ассетов, чтобы увидеть как различные типы продуктов интегрируются с «Вердж3Д»-приложениями.

### 3Д-продукт или 2Д-продукт с 3Д-просмотром

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

Демо-приложение «Спиннер» из тестового магазина «Вердж3Д».

Этот метод лучше использовать тогда, когда 3Д-визуализация полностью определяет вид товара, то есть когда вам не нужно использовать 2Д-изображения и фото.

Второй способ просто добавляет 3Д-просмотр в галерею картинок товара:

Демо-приложение «Телевизор» из тестового магазина «Вердж3Д».

Для переключения режимов есть специальная настройка Show as gallery item расположенная на панели Product data настроек товара (см. ниже).

### Настройки товара

Для каждого поддерживаемого продукта имеется группа настроек, расположенная на вкладке Verge3D на панели Product data:

Application
  «Вердж3Д»-приложение отображаемое на странице товара.
Show as gallery item
  Запускать приложение по клику на картинке «3Д-просмотр» или полностью заменить изображение продукта 3Д-визуализацией.
Switch to 3D on update
  При использовании режима «3Д-просмотра» переключать в 3Д при любых изменениях товаров. Опция используется для конфигурируемых товаров Grouped и Variable. Если опция выключена, «Ву Коммерц» будет переключать на первое 2Д-изображение в галерее при изменениях конфигурации товаров.

### Использование пазлов

С помощью пазлов connect to WooCommerce и product info вы можете создавать приложения любой сложности (например полноценные 3Д-конфигураторы) посредством получения данных о выбранных конфигурациях и свойствах товаров из «Ву Коммерц».

Данная функциональность используется в демо-приложении «Спиннер» (исходные файлы доступны в магазине ассетов).

### Как не перезагружать страницу после добавления товаров в корзину

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

Чтобы обойти эту проблему, используйте плагин WooCommerce для мгновенного добавления товаров, например, AJAX Add to Cart.

#

## Альтернативная система электронной коммерции

Система электронной коммерции, поставляемая вместе с «Вердж3Д»-плагином для «Вордпресс» — это самодостаточное решение, альтернативное системе «Ву Коммерц». Система позволяет:

- размещать заказы, отправленные с помощью пазлов place order, place order+ и send data.
- отправлять почтовые уведомления клиентам и менеджерам по продажам.
- генерировать счета и инвойсы, прикреплять их к почтовым уведомлениям.
- прикреплять разные файлы к заказам: PDF, текст, JSON, изображения, звуки и видео.
- обрабатывать заказы с помощью «Пейпал» или карт.
- распространять загружаемые товары.

Система не использует сторонних плагинов и может быть легко доработана с помощью PHP для любых применений.

#

## Получение заказов с помощью формы заказа

Для обработки простых заказов, отправляемых вашими приложениями «Вердж3Д» (с использованием пазлов place order и place order+), добавьте форму заказа на какую-либо страницу/пост «Вордпресса» с помощью следующего короткого кода:

`[verge3d_order]`

Затем укажите ссылку на эту страницу/пост в качестве параметра "send to" пазлов place order/place order +. Каждый раз при выполнении этого пазла, ваше приложение будет перенаправлять пользователей на форму заказа:

Данная функциональность используется в демо-приложении «Кольцо» (исходные файлы доступны в магазине ассетов).

#

## Управление заказами

Используйте меню Orders для доступа к экрану E-Commerce Orders:

Заказы в этом списке создаются автоматически при получении запросов от приложений «Вердж3Д». Вы можете использовать этот экран для просмотра и управления заказами клиентов.

#

## Управление продуктами

Используйте меню Products для доступа к экрану E-Commerce Products:

Эти продукты (могут быть также частями продукта) используются для генерации заказов, отправляемых с помощью пазла place order+. Они не имеют отношение к продуктам из «Ву Коммерц» или других систем электронной коммерции.

Продукты имеют следующие настройки:

Title
  Заголовок продукта, например «Вердж3Д для Блендера» или «Спиннер». Это поле является обязательным.
SKU
  Артикул товара. Это значение нужно не только для учёта товара, но прежде всего как идентификатор указываемый в пазлах place order + и send data. По существу, данное значение используется как уникальный идентификтор продукта.
Price
  Цена продукта, может быть нулевой.
Download link
  Ссылка на скачку для цифровых продуктов.

#

## Получение информации о продуктах

Эта функция позволяет вам получить информацию о продуктах с сервера.

Для её использования вам потребуется следующий метод REST API:

`https://ИМЯ_ХОСТА/wp-json/verge3d/v1/get_product_info/АРТИКУЛ`

Где ИМЯ_ХОСТА — адрес сервера где размещён «Вордпресс» (например sandbox.soft8soft.com), а АРТИКУЛ — артикул нужного вам продукта.

В случае успеха этот метод возвращает структуру в формате JSON с информацией о продукте:

`{ "status": "ok", "title": "Имя продукта", "sku": "Артикул", "price": "Цена" "currency": "Символ валюты, например ₽" }`

### Использование пазлов

Используйте пазлы load data и loaded data для получения информации о продуктах:

#

## Загрузка файлов

Эта функция позволяет пользователям постоянно хранить контент, созданный в приложениях «Вердж3Д», например, сделанные скриншоты, загруженные текстуры или сохраненные конфигурации.

Для загрузки файла на сервер используйте следующий метод REST API:

`https://ИМЯ_ХОСТА/wp-json/verge3d/v1/upload_file/`

Где ИМЯ_ХОСТА — это имя хоста вашего сервера «Вордпресс», например sandbox.soft8soft.com

В случае успеха этот метод возвращает следующий JSON-файл с информацией о загруженном файле:

`{ "status": "ok", "statusText": "Yay! File uploaded successfully.", "id": THE_ID_OF_THE_UPLOADED_FILE, "link": LINK_TO_THE_UPLOADED_FILE, "size": FILE_SIZE }`

Для получения файла воспользуйтесь ссылкой, указанной в запросе, или используйте ID и REST API метод get_file:

`https://ИМЯ_ХОСТА/wp-json/verge3d/v1/get_file/ID`

### Использование пазлов

Используйте пазлы send data и loaded data, чтобы загружать ваши файлы. Парсить поля JSON-ответа можно с помощью пазла dict get key.

Пример ниже загружает выбранный пользователем файл, указанный в пазле opened file, в песочнецу Софт Эйт Софт, а затем сохраняет веб-адрес этого файла в HTML-ссылке (`<a href="...">`) :

Чтобы извлечь/скачать ваши файлы используйте load data и loaded data пазлы.

Данная функциональность используется в демо-приложении «Фоторамка» (исходные файлы доступны в магазине ассетов).

#

## Настройки плагина

Используйте меню администратора Settings, чтобы менять глобальные настройки плагина «Вердж3Д для Вордпресс»:

Большинство этих настроек используются во встроенной в плагин системе электронной коммерции. Они не потребуются, если вы хотите использовать систему «Ву Комммерц».

### Вкладка General

Currency
  Валюта хранения/отображения цен.
Price decimals
  Количество знаков после запятой, используемых для обозначения цен.
Merchant info
  Информация о продавце: компания/бренд, адрес, контакты, логотип и т.д.
Order form fields
  Поля которые нужно включить в форму заказа.
Order success text
  Текст отображаемый в случае успешного размещения заказа.
Order failed text
  Тест отображаемый в случае ошибок при размещении заказа.

### Вкладка Mail

Order notification e-mail
  Электронная почта лица, ответственного за получение заказов. Когда потенциальный покупатель размещает новый заказ, уведомления об этом буду направлены на данную почту..
Order e-mails "From"
  Опция используется для указания имени/организации и электронной почты лица, ответственного за связь с клиентом. Это может быть почтовый адрес менеджера по продажам, общий адрес, например sales@yourcompany.com или просто адрес не предполагающий ответ, например noreply@yourcompany.com.
New order notifications
  Опции конфигурации электронной почты, отправляемой покупателю и продавцу при получении заказа. Сюда входит заголовок писем, их содержимое и вложения.
Updated order notifications
  Опции конфигурации электронной почты, отправляемой покупателю и продавцу при изменении существующего заказа. Сюда входит заголовок писем, их содержимое и вложения.
Sales quotes
  Опции конфигурации счетов, выставляемых клиентам.
Invoices
  Опции конфигурации инвойсов, выставляемых клиентам.

### Вкладка Documents

Для полноценного использования этой функции вам необходимо установить браузер «Хром»/«Хромиум» на вашем сервере. Он будет работать в так называемом скрытом режиме для преобразования HTML-заказов в формат ПДФ. Укажите путь к исполняемому файлу «Хрома»/«Хромиума», если вы установили его в какой-то пользовательский каталог, или оставьте поле пути пустым, если вы установили его по всей системе.

Обратите внимание, что для установки «Хрома» на всю систему необходимо иметь права администратора сервера. Если у вас его нет, скачайте последний билд «Хромиума», распакуйте его в какой-нибудь доступный пользователю каталог на вашем сервере, а затем укажите путь к исполняемому файлу в поле path (например /home/ubuntu/chrome-linux/chrome)..

PDF Generator
  Путь к исполняемому файлу браузера «Хром»/«Хромиум», используемого для конвертации документов в формат ПДФ. Отставьте поле пустым, если вы установили этот браузер по всей системе.
Quotes
  Дополнительный контент, отображаемый в выставляемых счетах.
Invoices
  Дополнительный контент, отображаемый в выставляемых инвойсах.

### Вкладка Payment

Paid status
  Статус заказа, который нужно выставить для успешных заказов. Например если вы продаёте физические товары, лучше всего выставлять этот статус в Processing, что будет означать, что заказ находится в обработке и готовится к отправке. Если вы продаёте цифровые товары, имеет смысл выставить статус в Completed. В этом случае заказ будет считаться завершённым, что также приведёт к тому, что ссылка на скачиваемый товар будет выслана на почту покупателя.
PayPal
  Опция активации и идентификатор клиента «Пейпал». Используйте инструкции с этой страницы чтобы узнать как получить данный идентификатор.

### Вкладка Security

Чтобы сделать сервер более защищённым, всегда выключайте функции которые вам не нужны.

Enable REST APIs
  Данные опции используются для включения/выключения API управления заказами и продуктами, а также API постоянного хранения файлов, предоставляемых плагином.
Cross-domain requests
  Используется для включения/выключения кросс-доменных (исходящих с разных хостов) запросов к REST API, предоставляемых плагином.
Custom products
  Разрешать получение заказов с произвольными ценами и/или артикулами.
Allowed MIME types

  Тип файла, допущенного к загрузке и хранению на сервере. Список по умолчанию содержит все типы, которые могут вам пригодиться, однако если вам нужно что-то специфичное, добавьте сюда нужный MIME-тип вместе с расширением файла. Чтобы узнать MIME-тип для файла, воспользуйтесь каким-нибудь сервисом онлайн, например этим (англ.).

  Загрузка типовых файлов изображений, таких как JPEG, PNG, WebP и др. всегда разрешается «Вордпрессом».

## Остались вопросы?

Задавайте их на нашем форуме!