Verge3D WordPress插件 - Soft8Soft
Description: 设置和使用Verge3D WordPress插件，用于内容发布与电子商务。

# WordPress插件 | WordPress Plugin

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

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

- WebGL应用托管和嵌入（直接、通过iframe或简码）。
- 易于使用的Elementor小部件。
- 与WooCommerce系统集成。您可以将Verge3D应用嵌入产品页面，并通过拼图制作功能强大的3D配置器。
- WooCommerce之外的专有电子商务系统替代方案。
- 持久文件存储。

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

## 内容

- Plugin Sandbox
- Installation
- Uploading Applications
- Application Settings
- Elementor Widget
- Interacting with Buttons
- WooCommerce Integration
- Alternative E-Commerce System
  - Receiving Orders with Order Form
  - Managing Orders
  - Managing Products
  - Getting Info About Products
- Uploading Files
- Plugin Settings

#

## Plugin Sandbox

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

#

## Installation

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

安装方式很简单：

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

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

- 通过WordPress管理界面上传插件压缩包 verge3d/wordpress/verge3d.zip 。
- 在 Plugins 菜单中激活插件。Verge3D 菜单将显示在管理面板中。

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

#

## Uploading Applications

使用 Applications 管理菜单访问 Verge3D Applications 界面：

要上传新应用，请点击 Add New 按钮，输入应用名称，然后点击 Next。您会看到 Manage Verge3D Application 对话框。点击 Choose Files，选择一个应用程序文件夹，然后点击 Upload ：

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

要在WordPress页面/文章中嵌入Verge3D应用，请使用以下简码：

`[verge3d id="YOUR_APP_ID"]`

其中 YOUR_APP_ID 是 Verge3D Application 界面中表格里显示的应用ID。

如果您使用Elementor插件，有一个 小部件 可以让事情变得更简单。

#

## Application Settings

在 Manage Verge3D Application 界面上，您可以找到以下设置：

Title
  应用名称。此值仅在WordPress管理界面中使用，例如将Verge3D应用附加到WooCommerce产品页面。要在浏览器（或Google/Bing搜索）中指定显示的应用标题，您需要编辑应用的HTML。请查看 以下章节 了解如何操作。
iframe width
  嵌入在WordPress页面/文章/产品页面中的应用画布宽度（像素）。请注意，实际尺寸可能会受到WordPress主题、布局、自定义CSS代码等的影响。
iframe height
  嵌入在WordPress页面/文章/产品页面中的应用画布高度（像素）。请注意，实际尺寸可能会受到WordPress主题、布局、自定义CSS代码等的影响。
Allow fullscreen mode
  允许/禁止全屏模式。如果取消选中，应用的全屏按钮将被移除，使进入全屏模式成为不可能。
Allow AR/VR
  允许/禁止应用的AR/VR会话。
Loading
  应用的加载策略。设置为 Lazy 可在应用不可见时延迟加载。使用 Eager 可强制浏览器立即加载。Auto 表示由浏览器自行决定何时加载应用。
App Image
  应用图片。此图片将替换WooCommerce产品页面图片库中显示的默认3D视图按钮。详见 下方。

#

## Elementor Widget

此功能允许您将已上传的Verge3D应用嵌入到Elementor页面中。只需从 General 标签（或使用搜索）拖放 Verge3D 小部件：

然后在 Content 面板中选择您需要的应用：

您可以在 应用设置 中设置画布大小和其他应用功能。

#

## Interacting with Buttons

通过拼图，您可以轻松地将WordPress中设计的按钮（或其他类似按钮的元素）挂钩到3D场景。点击按钮可以触发场景中的各种事件，如播放动画、进行材质自定义、上传纹理、播放声音等。有时这是为应用实现UI的最直接方式，而无需开发 全功能的HTML UI。

嵌入了Verge3D应用的页面示例，由块编辑器工具箱中的按钮控制。

### Buttons from Built-In Editor (aka Block Editor)

要处理使用WordPress内置编辑器添加的按钮的点击事件，首先分配一个 自定义CSS类。您可以通过选择按钮并在 Block → Advanced → ADDITIONAL CSS CLASS(ES) 面板中输入CSS类名来完成：

然后使用 on event of 拼图为按钮元素分配事件监听器。元素本身通过 query selector 拼图获取：

将分配给按钮的CSS类指定为选择器的第一项（点前缀表示"按CSS类获取元素"），后跟 a 表示锚标签：

`.my-button a`

请注意，由于Verge3D应用嵌入在iframe中，您还必须启用 in parent doc。

### Buttons from Elementor

使用Elementor创建的按钮的点击事件处理方式略有不同。您应该为按钮分配 自定义ID，而不是类名，您可以在 Edit Button → Content → Button ID 面板中完成：

然后使用 on event of 拼图为按钮元素分配事件监听器。元素本身通过 query selector 拼图获取：

将分配给按钮的元素ID指定为选择器的第一项（井号表示"按ID获取元素"），后跟 a 表示锚标签：

`#my-button a`

请注意，由于Verge3D应用嵌入在iframe中，您还必须启用 in parent doc。

#

## WooCommerce Integration

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

请参阅 这篇教程文章 了解如何使用此功能。您也可以观看以下 视频。

### Supported product types

此插件支持以下产品类型：

- Simple
- Grouped
- External/Affiliate
- Variable
- Composite（需要 WooCommerce Composite Products 扩展）

请查看Asset Store中的 Drink Shop 和 Simple Configurator 演示，了解这些产品类型如何与Verge3D集成。

### 3D only vs 2D gallery + 3D

您可以选择两种将3D应用嵌入WooCommerce产品页面的方法。第一种方法是完全替换产品图片：

Verge3D沙箱中的 Spinner 产品页面。

此方法特别适用于3D可视化完全描述了产品的外观和感觉，因此不需要额外的2D图片的情况。

第二种方法是将3D视图按钮作为项目添加到2D图片库中：

Verge3D沙箱中的 Smart TV 产品页面。

要选择使用哪种方法，您可以简单地切换 Product data 面板上的 Show as gallery item 设置（见下文）。

### Product Settings

对于每个支持的产品，在 Product data 的 Verge3D 标签上有一组插件特定的设置：

Application
  将显示在产品页面上的Verge3D应用。
Show as gallery item
  在点击图片库中的3D View按钮时运行应用，或完全用3D可视化替换产品图片。
Switch to 3D on update
  当以图片库项目方式运行3D应用时，启用此设置可在产品更新时自动切换到3D视图。此功能主要用于可配置的 Grouped 或 Variable 产品。如果禁用，当用户从建议的配置中选择内容时，WooCommerce将切换到第一张2D图片。

### Using Puzzles

通过 connect to WooCommerce 和 product info 拼图，您可以通过从WooCommerce产品页面检索产品或所选配置的数据来实现相当高级的应用（如3D配置器）。

有关使用示例，请查看 Spinner 演示（也可在资源商店中找到）。

### Prevent reloading when adding product to the cart

在将标准WooCommerce设置与Verge3D一起使用时，有一个小问题。每次客户将商品添加到购物车时，整个页面都会被强制重新加载，导致Verge3D应用也重新加载，从而影响客户体验。

要解决此问题，您可以使用插件来增强WooCommerce，实现动态添加产品，例如 AJAX Add to Cart。

#

## Alternative E-Commerce System

Verge3D for WordPress插件附带的电子商务系统是一个自给自足的替代WooCommerce的方案。它支持：

- 下客户订单，通过 place order、place order+ 或 send data 拼图提交。
- 向客户或销售人员发送通知电子邮件。
- 生成报价单和收据，并将其附加到电子邮件中。
- 将各种数据附加到订单：PDF、自定义文本、JSON、图片、声音或视频。
- 通过PayPal或银行卡处理付款。
- 分发可下载的产品。

该系统不依赖任何第三方插件，可以通过PHP轻松定制以满足您的需求。

#

### Receiving Orders with Order Form

要处理Verge3D应用发送的常规订单（通过 place order 或 place order+ 拼图），请使用以下简码在您的WordPress页面/文章中添加一个订单表单：

`[verge3d_order]`

然后将该页面/文章的链接指定为 place order/place order + 拼图的"send to"参数。每次执行此拼图时，您的应用会将用户重定向到您的订单表单：

有关使用示例，请查看 Ring 演示（也可在资源商店中找到）。

#

### Managing Orders

使用 Orders 管理菜单访问 E-Commerce Orders 界面：

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

#

### Managing Products

使用 Products 管理菜单访问 E-Commerce Products 界面：

这些产品（也可以是产品部件）用于组合由 place order+ 拼图生成的订单。它们与WooCommerce或其他电子商务解决方案中的实际 products 无关。

每个产品包含以下字段：

Title
  人类可读的产品标题，例如"Verge3D for Blender"或"Spinner"。此字段是必填的。
SKU
  产品库存单位。此值不仅用于商家管理订单，而且主要用于在 place order + 或 send data 拼图中引用产品项目。基本上，此值用作产品ID。
Price
  产品价格。可以设置为零。
Download link
  可选的可下载产品链接。

#

### Getting Info About Products

此功能允许用户接收存储在服务器上的产品信息。

使用时请执行以下REST API方法：

`https://WP_HOST/wp-json/verge3d/v1/get_product_info/SKU`

其中WP_HOST是WordPress服务器的主机名，例如 sandbox.soft8soft.com，SKU是产品的库存单位。

成功后，此方法返回以下包含产品信息的JSON文件：

`{ "status": "ok", "title": "Product Title", "sku": "SKU", "price": "Product price" "currency": "Currency symbol, such as $" }`

#### Using Puzzles

使用 load data 和 loaded data 拼图获取有关产品的信息：

#

## Uploading Files

此功能允许用户持久存储在Verge3D应用中创建的内容，例如截图、上传的纹理和保存的配置。

要上传文件到服务器，请使用以下REST API方法：

`https://WP_HOST/wp-json/verge3d/v1/upload_file/`

其中WP_HOST是WordPress服务器的主机名，例如 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和 get_file REST API方法：

`https://WP_HOST/wp-json/verge3d/v1/get_file/ID`

### Using Puzzles

使用 send data 和 loaded data 拼图上传文件。使用 dict get key 拼图解析API响应的JSON字段。

以下示例将用户在 opened file 拼图中选择的文件上传到Soft8Soft沙箱，然后将文件的网址保存到HTML链接（`<a href="...">`）元素中。

要从服务器检索/下载文件，您也可以使用 load data 和 loaded data 拼图。

有关使用示例，请查看 Custom Image 演示（也可在资源商店中找到）。

#

## Plugin Settings

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

这些设置大多数用于插件附带的电子商务系统。如果您只想使用WooCommerce，则不需要这些设置。

### General Tab

Currency
  用于存储/显示价格的货币。
Price decimals
  显示价格的小数位数。
Merchant info
  商家信息：公司/品牌、地址、联系人、标志等。
Order form fields
  订单中应包括的字段。
Order success text
  订单成功提交后显示的文本。
Order failed text
  订单失败时显示的文本。

### Mail Tab

Order notification e-mail
  用于指定负责管理订单的人员的电子邮件地址。当客户下新订单时，您将在此电子邮件中收到有关此订单的通知。
Order e-mails "From"
  用于指定负责与客户通信的个人/组织的名称/电子邮件。这可以是一个销售经理的电子邮件，或一些常见的地址，如 sales@yourcompany.com，或只是一个无回复地址，如 noreply@yourcompany.com。
New order notifications
  使用这些选项配置新订单通知邮件的收件人，以及此类邮件的主题、内容和附件。
Updated order notifications
  使用这些选项配置订单更新通知邮件的收件人，以及此类电子邮件的主题、内容和附件。
Sales quotes
  使用这些选项配置发送给客户的报价邮件的主题和内容。
Invoices
  使用这些选项配置发送给客户的账单邮件的主题和内容。

### Documents Tab

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

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

PDF Generator
  Chrome/Chromium浏览器的路径，用于执行PDF转换。如果以系统范围安装，请留空。
Quotes
  报价文档中显示的附加内容，及报价被确认为有效的时间。
Invoices
  收据文档中显示的附加内容。

### Payment Tab

Paid status
  成功付款后设置的订单状态。例如，如果您正在销售实体商品，您可能希望将订单状态设置为 Processing，这意味着您正在处理订单以便发货。如果您正在销售数字商品，您可能希望将状态设置为 Completed。在这种情况下，下载链接将通过电子邮件发送给客户。
PayPal
  PayPal付款方式激活检查器和应用客户端ID。请使用以下 页面 了解如何获取。

### Security Tab

为了使您的服务器更安全，请始终禁用您不使用的功能。

Enable REST APIs
  用于启用/禁用插件提供的订单管理、持久文件存储或产品API的选项。
Cross-domain requests
  用于启用/禁用插件提供的REST API的跨域请求（来自不同主机）的选项。
Custom products
  允许接收带有自定义产品价格和/或SKU的订单。
Allowed MIME types

  允许由插件上传和托管的应用文件类型。默认列表包含您可能需要的大多数类型，但如果您需要更具体的类型，可以随时将MIME和相应的扩展名（用空格字符分隔）添加到列表中。要查找某个文件的MIME，您可以使用在线工具，如 这个。

  上传常见图片格式（如JPEG、PNG、WebP等）始终由WordPress允许。

## Got Questions?

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