WordPress插件

Verge3D附带了一个用于WordPress的插件,WordPress是目前使用的最流行的内容管理系统(CMS)(全球安装量超过6000多万)。

Verge3D for WordPress插件提供以下功能:

这些特性可以相互独立地工作。例如,您可能只需要嵌入,或者您可以处理从其他地方托管的Verge3D应用(如Verge3D Network等)接收的命令。

内容

插件沙箱

要尝试插件的功能,请查看 Verge3D for WordPress沙盒。它提供了一个安全的环境,您可以用来测试您的Verge3D应用。

安装

在安装插件之前,请确保您至少安装了WordPress4.7或更新版本。要在服务器上上传应用,您需要有一个现代浏览器,如Google Chrome、Firefox、Edge或Safari11.1+。

安装方式很简单:

在某些情况下,您可能需要从Verge3D发行版手动安装插件(例如,当您想要尝试Verge3D预览版中提供的新特性时)。为此,请执行以下步骤:

激活后,试着上传您的一些应用或创建一个测试命令,以验证插件是否按预期工作。

请注意,您的WordPress服务器配置可能有严格的上传限制。如果您在上传应用时遇到问题,您需要调整php.ini文件中的以下设置: upload_max_filesize = 128M post_max_size = 128M 查看官方 PHP文档 有关php.ini配置的更多信息。

上传应用

使用 Applications 管理菜单查看 Verge3D应用 界面:

要上传您的应用,请单击应用的标题下的 Edit ,并在 Update Verge3D Application 表单中单击 Choose Files

在此表单中,您还可以配置应用的iframe(画布)大小,并设置是否允许使用全屏模式。

要在WordPress页面/文章中嵌入Verge3D应用,请使用以下短代码:

[verge3d id="YOUR_APP_ID"]

其中 your_app_idVerge3D Applications 页面中显示的应用ID。

与WooCommerce整合

WooCommerce是一套流行的电子商务系统,它驱动了互联网中28%以上的在线商店。从版本2.16开始,Verge3D通过WordPress插件和 e-commerce拼图提供了与WooCommerce的无缝集成。

请参阅 此教程文章 中介绍的电商功能特性。您还可以查看此教学 视频

上传文件

此特性允许用户持久存储在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 dataloaded data 拼图来上传文件。使用 in dict ... get key ... 拼图解析API响应的JSON字段。

在下面的示例中,将用户在“opened file”拼图中指定的文件上载到Soft8Soft沙箱中,然后把web地址保存到 link 变量里:

若要检索/下载文件,请使用 load dataloaded data 拼图。

接收基础订单

要处理Verge3D应用中由 place order 拼图生成的订单,在您的WordPress页面/文章中使用以下短代码添加一个订单表单:

[verge3d_order]

然后将指向该页面/应用的链接指定为“place order”拼图的“send to”参数。每次执行此拼图时,您的应用都会将用户重定向到您的订单表单:

管理订单

使用 E-Commerec 管理菜单来访问 E-Commerce Orders 页面:

此列表中的订单会在接收到来自Verge3D应用的请求时自动创建。您可以使用此屏幕查看和管理客户订单。

高级电子商务应用

在某些情况下,您可能希望扩展电子商务系统的功能。例如,如果您开发了3D配置器,或者需要从客户端获得更多信息以正确处理订单,则需要向请求添加更多数据,并在服务器上处理这些数据。对于这种情况,您需要使用“send data”拼图将数据编码为JSON格式,然后为您的电子商务系统创建自定义模板表单。

假设您想创建一个基本的表单定制器。以下是数据的外观:

{ "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”拼图将其发送到服务器。之后,您需要为订单管理管理页面创建自定义模板,以及将发送给客户和销售人员的电子邮件。为此,请将以下模板源文件复制到 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是当前主题的目录。根据为您的订单指定的结构编辑这些文件。

最后一部分是为您的“send data”拼图分配一个适当的URL。类似这样:

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

其中HOSTNAME是WordPress服务器的主机名,例如 sandbox.soft8soft.com

插件设置

使用 Settings 管理菜单修改插件全局设置:

Order notification e-mail 选项用于指定负责管理订单的人员的电子邮件地址。当客户下新订单时,您将在此电子邮件上收到有关此订单的通知。

Order e-mail "From" 选项用于指定负责与客户通信的人员/组织的名称/电子邮件。这可以是销售经理的电子邮件,比如 sales@yourcompany.com 或只是一个无回复地址,如 noreply@yourcompany.com.

Order e-mail PDF attachments 选项用于在您的订单电子邮件中启用PDF附件。此附件包含了可打印的订单内容。

要正确使用此功能,您需要在服务器上安装Chrome/Chromium浏览器。它将在被称为 headless mode 中执行将HTML订单转换为PDF格式的操作。如果您在某个自定义目录中安装了Chrome/Chromium可执行文件,请指定路径;如果时安装在系统默认路径,可将路径字段留空。

请注意,要安装Chrome到系统默认路径,您需要对服务器具有管理员访问权限。如果没有,请下载 最新的Chromium版本,将其解包到服务器上的某个用户可访问的目录中,然后在path字段中指定到Chromium可执行文件的路径(例如 /home/ubuntu/chrome-linux/chrome).

Enable REST APIs 选项用于启用或禁用插件提供的订单管理和持久文件存储API。

跨域请求(Cross-domain requests) 选项用于启用或禁用对插件提供的REST API的跨域请求(源自不同主机)。

定制电子商务表单

若要修改电子商务表单,请复制位于Verge3D插件目录的 template 到WordPress主题目录下 verge3d 子目录。

例如,如果需要修改订单电子邮件模板:

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

其中WORDPRESS是WordPress安装的根目录,而THEME是当前主题的目录。

下面是可以自定义的模板列表:

模板文件 说明
order_admin_form.php WordPress管理仪表板上的订单管理表单。
order_email_body.php 订单电子邮件正文模板。此模板用于发送给您和客户的订单通知。
order_email_pdf.php 订购电子邮件PDF附件模板。此模板用于生成即将被转化为订单邮件中PDF格式附件的HTML文件。
order_form.php 订单表单模板。此表单将在 [verge3d_order] 短代码所在页面中显示给客户:
order_success.php 接受订单时显示的消息。
order_failed.php 拒绝订单时显示的消息。

安全措施

在为电子商务应用使用自定义表单时,请确保正确地转义客户发送的输出数据。参见此 指南 了解更多信息。

电子商务协议规范

本节针对具有高级服务器端编程经验的用户。

“place order”拼图使用基础协议处理订单。使用带有如下参数的HTTP POST请求,将订单从浏览器发送到服务器:

POST参数 说明
v3d_title 订单标题。此字段用于描述订单。此处数值对客户没有用处,仅对负责处理订单的人员有意义。
v3d_content 订单内容。此文本字段包括完整的订单信息,并且对客户和销售经理都可见。
v3d_price 订单总价。它可以是一个数字或字符串,例如99、99.99、“$99.99”。
v3d_screenshot 订单截图。此可选值必须是表示图像的数据URI。此值由 HTMLCanvasElement.toDataURL() 方法生成。

更高级的基于JSON的协议使用以下一组默认参数:

JSON字段 说明
title 订单标题。此字段用于描述订单。此处数值对客户没有用处,仅对负责处理订单的人员有意义。
price 订单总价。它可以是一个数字或字符串,例如99、99.99、“$99.99”。
user_name 客户的全名。
user_email 客户的电子邮件地址。
user_phone 客户的电话号码。
user_comment 订购备注。
screenshot 订单截图。此可选值必须是表示图像的数据URI。此值由 HTMLCanvasElement.toDataURL() 方法生成。

由于此协议是可扩展的,您可以添加任何您想要的参数,如附加配置选项、产品属性、送货地址、帐单信息、税项、折扣等。

遇到问题?

欢迎您随时在 论坛上提问!您还可以加入中文用户社区QQ群(171678760),在线寻求帮助。