Плагин WordPress

Verge3D поставляется с плагином для WordPress, самой популярной из используемых систем управления контентом (CMS) (60+ миллионов установок).

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

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

Содержание

Песочница плагинов

Чтобы опробовать возможности плагина, загляните в песочницу Verge3D для WordPress. Он обеспечивает безопасную среду, которую можно использовать для тестирования приложений Verge3D.

Установка

Перед установкой плагина убедитесь, что у вас есть WordPress как минимум 4.7 версии. Для загрузки приложений на сервер вам необходимо иметь современный браузер, такой как Google Chrome, Firefox, Edge или Safari 11.1+.

Установка довольно проста:

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

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

Обратите внимание, что конфигурация вашего сервера WordPress может иметь жесткие ограничения на загрузку. Если у вас возникают проблемы при загрузке приложений, вам необходимо изменить следующие настройки в файле php.ini: upload_max_filesize = 128M post_max_size = 128M См. официальную документацию PHP для дополнительной информации о настройках php.ini.

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

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

Чтобы загрузить свое приложение, нажмите Edit прямо под названием приложения, нажмите Choose Files и выберите папку приложения в Update Verge3D Application:

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

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

[verge3d id="YOUR_APP_ID"]

где YOUR_APP_ID это ID вашего приложения, которое отображается в таблице на экране Verge3D Application.

Интеграция с WooCommerce

WooCommerce - это популярная система электронной коммерции, на которой работает более 28% всех интернет-магазинов. Начиная с версии 2.16, Verge3D предлагает интеграцию с WooCommerce через этот плагин WordPress и пазл для электронной коммерции.

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

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

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

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

https://HOSTNAME/wp-json/verge3d/v1/upload_file/

Где HOSTNAME - это имя хоста вашего сервера WordPress, например sandbox.soft8soft.com

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

{ "id": THE_ID_OF_THE_UPLOADED_FILE, "link": LINK_TO_THE_UPLOADED_FILE, "size": FILE_SIZE }

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

https://HOSTNAME/wp-json/verge3d/v1/get_file/ID

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

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

Пример ниже загружает выбранный пользователем файл, указанный в пазле "opened file", в песочнецу Soft8Soft, а затем сохраняет веб-адрес этого файла в переменной link:

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

Получение заказов

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

[verge3d_order]

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

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

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

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

Продвинутые приложения E-Commerce

В некоторых случаях вы можете захотеть расширить функциональность вашей системы e-commerce. Например, если вы разрабатываете 3D-конфигуратор или требуете больше информации от ваших клиентов для правильной обработки заказов, вам необходимо добавить больше данных в запрос, а также обработать эти данные на сервере. Для таких случаев необходимо закодировать данные в формате JSON с помощью пазла "send data", а затем создать шаблонные формы для вашей системы e-commerce.

Допустим, вы хотите создать базовый настройщик таблиц. Вот как могут выглядеть ваши данные:

{ "width": 120, "length": 150, "height": 100, "color": "Redwood", "title": "Custom Table", "price" 100, "user_name", "John Smith", "user_email", "john.smith@example.com", "user_phone", "+123456789" }

Вы можете составить эту структуру с помощью словарных пазлов, а затем отправить ее на сервер с помощью пазла "send data". После этого вам нужно создать пользовательские шаблоны для вашей страницы управления заказами, а также для электронных писем, которые будут отправляться вашим клиентам и продавцам. Для этого скопируйте следующие исходные шаблоны в каталог вашей темы WP, в подкаталог verge3d:

WORDPRESS/wp-content/plugins/verge3d/templates/order_admin_form.php -> THEME/verge3d WORDPRESS/wp-content/plugins/verge3d/templates/order_email_body.php -> THEME/verge3d

Где WORDPRESS - это корневой каталог вашей установки WordPress, а THEME - каталог вашей текущей темы. Отредактируйте эти файлы в соответствии со структурой, указанной для вашего заказа.

В завершение нужно назначить правильный URL для вашего пазла "send data". Этот выглядит следующим образом:

https://HOSTNAME/wp-json/verge3d/v1/place_order/

Где HOSTNAME - это имя хоста вашего сервера WordPress, например sandbox.soft8soft.com

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

Используйте меню администратора Settings, чтобы менять глобальные настройки плагинов:

Опция Order notification e-mail используется для указания адреса электронной почты лица, ответственного за управление заказами. Когда клиент размещает новый заказ, вы будете уведомлены об этом заказе на этот e-mail.

Опция Order e-mail "From" используется для указания имени/e-mail лица/организации, ответственного за связь с клиентом. Это может быть e-mail менеджера по продажам, какой-нибудь обычный адрес, например sales@yourcompany.com или просто адрес без ответа, например noreply@yourcompany.com.

Опция Order e-mail PDF attachments используется для добавления PDF-вложения в сообщения электронной почты с заказами. Это вложение включает содержимое заказа в удобном для печати формате.

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

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

Опции Enable REST APIs используются для включения/выключения API управления заказами и постоянного хранения файлов, предоставляемых плагином.

Опции Cross-domain requests используются для включения/выключения кросс-доменных (исходящих с разных хостов) запросов к REST API, предоставляемых плагином.

Настройка форм E-Commerce

Для изменения форм e-commerce скопируйте шаблоны форм, расположенные в каталоге templates плагина Verge3D, в каталог вашей темы WordPress, в подкаталог verge3d.

Например, если вам нужно изменить шаблон электронной почты заказа:

WORDPRESS/wp-content/plugins/verge3d/templates/order_email_body.php -> THEME/verge3d

Где WORDPRESS - это корневой каталог вашей установки WordPress, а THEME - каталог вашей текущей темы.

Вот список шаблонов, которые вы можете настроить:

Template File Description
order_admin_form.php Форма управления заказами на панели администратора WordPress.
order_email_body.php Шаблон тела письма с заказом. Этот шаблон используется как для уведомлений о заказах, отправляемых вам, так и вашим клиентам.
order_email_pdf.php Шаблон с PDF-вложением к электронному письму с заказом. Этот шаблон используется для создания HTML-файлов, которые будут преобразованы в PDF и прикреплены к электронным письмам с заказами.
order_form.php Шаблон формы заказа. Эта форма отображается для ваших клиентов на страницах, где присутствует код [verge3d_order].
order_success.php Сообщение, отображаемое при принятии заказа.
order_failed.php Сообщение, отображаемое при отклонении заказа.

Меры безопасности

При использовании пользовательских форм в приложениях e-commerce не забудьте правильно экранировать выходные данные, отправляемые клиентами. Для получения дополнительной информации воспользуйтесь следующим руководством.

Протокол спецификации E-Commerce

Этот раздел предназначен для пользователей с большим опытом кодирования на стороне сервера.

Пазл"place order" использует базовый протокол для обработки заказов. Заказы отправляются из браузера на сервер с помощью HTTP POST-запросов со следующими параметрами:

POST parameters Description
v3d_title Название заказа. Это поле используется для описания заказа. Поскольку это значение не предназначено для клиентов, оно используется исключительно для лиц, ответственных за обработку заказов.
v3d_content OСодержание заказа. Это текстовое поле содержит полную информацию о заказе и видно как клиенту, так и менеджеру по продажам.
v3d_price Общая стоимость заказа. Это может быть число или строка, например, 99, 99.99, "$99.99".
v3d_screenshot Снимок экрана заказа. Это необязательное значение должно быть данными URI, которые представляют изображение. Это значение генерируется методом HTMLCanvasElement.toDataURL().

Более продвинутый протокол на основе JSON использует следующий набор параметров по умолчанию:

JSON fields Description
title Название заказа. Это поле используется для описания заказа. Поскольку это значение не предназначено для клиентов, оно используется исключительно для лиц, ответственных за обработку заказов.
price Общая стоимость заказа. Это может быть число или строка, например, 99, 99.99, "$99.99".
user_name Полное имя клиента.
user_email Адрес электронной почты клиента.
user_phone Номер телефона клиента.
user_comment Комментарии к заказу.
screenshot Снимок экрана заказа. Это необязательное значение должно быть данными URI, которые представляют изображение. Это значение генерируется методом HTMLCanvasElement.toDataURL().

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

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

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