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

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

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

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

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

Содержание

Песочница

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

Установка

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

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

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

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

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

Используйте меню администратора 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):

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

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

.my-button a

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

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

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

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

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

#my-button a

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

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

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

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

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

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

Посмотрите демо-приложение «Магазин напитков» из магазина ассетов, чтобы увидеть как различные типы продуктов интегрируются с «Вердж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Д»-плагином для «Вордпресс» — это самодостаточное решение, альтернативное системе «Ву Коммерц». Система позволяет:

Система не использует сторонних плагинов и может быть легко доработана с помощью 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 и др. всегда разрешается «Вордпрессом».

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

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