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

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

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

Размещение и публикация ВебГЛ-приложений (прямое встраивание на страницы, через элементы iframe или с помощью коротких кодов «Ворд Пресса»).
Интеграция с системой «Ву Коммерц». Вы можете вставлять визуализацию на страницы товаров, а также создавать мощные конфигураторы с помощью пазлов или «Ява Скрипта».
Постоянное хранилище файлов.
Система электронной коммерции для обработки заказов клиентов, отправляемых с помощью пазлов place order, place order+ и send data.
Генератор счетов и инвойсов.
Платежи с помощью карт и «Пей Пал»-кошельков.
Поддержка скачиваемых продуктов.

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

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

Содержание

Песочница

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

Установка

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

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

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

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

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

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

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

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

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

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

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

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

[verge3d id="YOUR_APP_ID"]

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

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

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

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

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

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

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

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

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

Simple
Grouped
External/Affiliate
Variable

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

Для загрузки файла на сервер используйте следующий метод РЕСТ АПИ:

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

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

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


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

Для получения файла воспользуйтесь ссылкой, указанной в запросе, или используйте ID и РЕСТ АПИ метод get_file:

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

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

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

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

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

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

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

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

[verge3d_order]

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

Получение заказов с помощью РЕСТ АПИ

В некоторых случаях вы можете захотеть расширить функциональность вашей системы электронной коммерции отправляя заказы в фоне, а не через страницу заказа.

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


    {
        "user_name": "Иван Петров",
        "user_email": "ivan.petrov@example.com",
        "user_phone": "+123456789"
        "items": [
            {
                "sku": "table_top_white",
                "quantity": 1
            },
            {
                "sku": "table_leg_brown",
                "quantity": 4
            },
        ]
    }

Вы можете составить эту структуру с помощью пазлов словарей, а затем отправить ее на сервер с помощью пазла "send data".

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

https://ИМЯ_ХОСТА/wp-json/verge3d/v2/place_order/

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

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

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

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

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

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

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

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

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

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

Для её использования вам потребуется следующий метод РЕСТ АПИ:

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

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

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


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

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

Используйте пазлы 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

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

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

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

Вкладка Payment

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

Вкладка Security

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

Enable REST APIs: Данные опции используются для включения/выключения АПИ управления заказами и продуктами, а также АПИ постоянного хранения файлов, предоставляемых плагином.
Cross-domain requests: Используется для включения/выключения кросс-доменных (исходящих с разных хостов) запросов к РЕСТ АПИ, предоставляемых плагином.
Custom products: Allow receiving orders with custom product prices and/or SKUs.

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

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