WordPress插件

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

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

应用托管和发布（嵌入）。
与WooCommerce系统集成。
持久文件存储。
用于处理客户订单的通用电子商务系统，使用 place order 拼图提交数据。
可完全自定义的电子商务系统，用于处理以JSON格式提交的订单 send data 拼图。

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

内容

插件沙箱

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

安装

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

安装方式很简单：

在您的WordPress管理仪表板的插件设置页面上点击 Add New 。
在WordPress.org的官方存储库中找到Verge3D插件并安装。
激活插件。Verge3D 菜单将显示在管理面板中。

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

通过WordPress管理界面上传插件压缩包 verge3d/wordpress/verge3d.zip 。
在插件菜单中激活插件。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_id 是 Verge3D 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 data 和 loaded data 拼图来上传文件。使用 in dict ... get key ... 拼图解析API响应的JSON字段。

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

若要检索/下载文件，请使用 load data 和 loaded 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)，在线寻求帮助。