Viewer：查看产品
展示 3D 模型及其外观。适合需要从不同角度展示产品、而无需开放印花编辑的场景。
电商集成 - 从设计到订单
将 Alter Product 嵌入您的网站：WordPress + WooCommerce 或 API
在您的网站中加入 3D 展示、规格配置和产品个性化功能。客户在您的商店查看产品、选择选项并制作设计，您则在自己的系统中管理商品和订单。
如果使用已安装 WooCommerce 的 WordPress，可以通过插件完成配置，无需编写集成代码。如果使用自建网站或商店，则可通过 Public API 和 postMessage 事件，将嵌入工具连接到后端及购物车。
图片展示了录制画面和插件后台中的真实界面。画面中的按钮名称为英文；工具外观取决于商店配置。
两种打造个性化商店的方式
同一个产品设计可以用于展示、配置或印花编辑。您可以根据网站和开发工作范围，选择与商店连接的方式。
使用插件还是自行集成？
插件提供现成的 WordPress 和 WooCommerce 支持。API 则让您自行连接其他平台、无头应用或现有订单系统。
| 领域 | WordPress + WooCommerce | 通过 API 接入自有系统 |
|---|---|---|
| 上线配置 | 在 WordPress 后台安装插件并使用连接向导。 | 在后端实现连接，并在网站中嵌入工具。 |
| 产品与规格 | 将设计分配给 WooCommerce 产品并同步规格。 | 将产品和选项标识符与商店数据关联。 |
| 购物车与订单 | 提供 WooCommerce 中配置、客户设计和预览的完整处理功能。 | 在自己的系统中处理嵌入工具事件并同步订单。 |
| 文件与资源 | 本地资源库、设计和订单文件存储在 WordPress 服务器上。 | 数据存储和访问方式取决于所选集成模式。采用自有存储时，需要自行实现相应支持。 |
向客户提供哪一种工具？
根据客户在网站上需要完成的操作选择工具。请先在 Designer 中准备设计和个性化规则。
Configurator：选择规格
选择预先配置的产品选项，例如尺寸、颜色或材料。客户可在模型上查看变化，并将配置加入购物车。
Customizer：制作自己的印花
使用已开放的工具、图形、文字和模板进行个性化。客户保存的设计会与购物车或订单中的商品项关联。
Designer：准备商品
店主的工作空间。您在此准备构图、规格、印花区域以及供客户使用的工具设置。后台编辑权限与商店使用权限相互独立。
WordPress + WooCommerce：从安装到产品就绪
Alter Product 提供 WordPress 插件。商店集成需要已安装并启用 WooCommerce。常规配置可在后台完成，无需自行编写 API 和购物车处理逻辑。
要求：WordPress、WooCommerce、HTTPS 和 Business 方案
要在自己的网站中嵌入 Alter Product，需要有效的 Business 订阅，或包含此功能的更高方案。此要求同时适用于 WordPress + WooCommerce 插件和自行开发的 API 集成。Personal FREE 和 Personal 方案不包含在自有商店中嵌入的功能。
使用插件时，请准备好已安装并启用 WooCommerce 的 WordPress，以及 Alter Product 账户。在自己的主机上保存文件不能替代所需订阅：应用仍由 Alter Product 提供，并由其授权启动。
- 为商店域名配置有效的 SSL/TLS 证书，并通过 HTTPS 提供商店页面。这是公共网站中嵌入工具正常运行的必要条件。
- 按照安装说明启用 WordPress 的友好固定链接。
- 为模型、图形、设计和订单文件预留主机空间。商店资源库会使用您服务器的资源。
为什么需要 HTTPS 和 SSL/TLS 证书？
Alter Product 通过 iframe 嵌入商店页面。如果页面不具备安全上下文，浏览器会限制应用使用的部分功能。HTTPS 加密连接，有效证书则让浏览器验证域名。
浏览器也会检查 iframe 所在的外层页面。因此，如果商店通过 HTTP 提供服务，仅 Alter Product 应用使用 HTTPS 并不足够。嵌入工具的网页也必须使用 HTTPS。这是浏览器对嵌入应用的安全规则。
- 在主机服务商处启用 SSL/TLS 证书，并确认它对商店域名有效。
- 将 WordPress 网站地址和集成域名设为 HTTPS。启用从 HTTP 到 HTTPS 的重定向。
- 通过 HTTPS 打开产品页面，检查浏览器是否报告证书错误或通过 HTTP 加载资源的问题。
通过 Auto Connect 连接商店
自动连接流程会引导您授权 Alter Product 账户并配置商店。使用此方式时，无需手动复制 API 密钥。
- 在 WordPress 中进入“插件 → 安装插件”，搜索 Alter Product，然后安装并启用。
- 打开 Alter Product 后台并选择 Auto Connect。登录正确的 Alter Product 账户，核对商店并批准连接。
- 返回 WordPress。选择初始模型并下载所需资源。等待下载和就绪检查完成。
- 检查已创建的工具页面及显示设置，然后开始准备产品。
分配设计并同步规格
在 WooCommerce 产品编辑页打开 Alter Product 选项卡。创建新设计或选择现有设计，然后打开 Designer。为该产品设置印花、可用选项和打印区域。
- 对于可变产品，请准备尺寸等属性，以及对应的 WooCommerce 规格。
- 在 Designer 中使用 Sync variants，将设计选项与产品规格关联。同时检查不属于 WooCommerce 规格属性的默认选项。
- 保存设计和产品。选择页面中显示的工具以及打开方式。
- 在产品页面检查效果：选择几种规格、制作设计，然后进入购物车。
WordPress 服务器上的自有资源库
模型、设计、图形和订单文件保存在运行 WordPress 的主机上。本地添加的资源服务于您的商店，不会因此成为供其他商店使用的 Alter Product 公共资源库条目。
哪些内容保存在本地？
插件将模型、资源库、设计、效果图和订单文件保存在 WordPress 存储空间中。生成器项目及其修订版本的数据也保存在该安装实例的数据库中。
您可以添加自己的素材，并从 Alter Product 导入选定资源。下载后使用的是本地副本。导入、检查更新和下载新版本是独立操作。
| 后台位置 | 可执行的操作 |
|---|---|
| 资源 | 管理模型、图形、模板、背景、标志、纹理和环境等。可用的添加方式取决于资源类型。 |
| 模型生成器 | 基于模板创建本地项目，并处理与生成器关联的模型。 |
| 产品设计 / Designer | 制作或导入设计，进行编辑并分配给商店产品。 |
| WooCommerce 订单 | 使用已保存的客户设计、预览和履行订单所需的文件。 |
本地文件与嵌入式 Alter Product 应用
资源由您自行保存，工具界面则从 Alter Product 加载到 iframe 中。Alter Product 服务检查账户访问权限、方案和会话，并提供可导入的目录。集成需要连接该服务。
备份时，请保存数据库、文件目录，以及读取插件加密数据所需的 WordPress 密钥和盐值。这样不仅可以恢复可见图形，也能恢复继续工作所需的数据。
在品牌网站上提供个性化体验
嵌入工具可以位于产品页面或独立的 WordPress 页面中。客户始终处于您的商店购买流程中，购物车和订单由 WooCommerce 处理。
产品页面、工具页面或区块
根据商店布局选择显示方式：在产品页面放置工具、使用按钮跳转到专用页面，或通过现有区块和短代码嵌入。Viewer、Configurator 和 Customizer 各有用途，无需同时向客户开放全部工具。
- 在需要客户查看产品模型的位置放置 Viewer。
- 销售预设规格和选项时，使用 Configurator。
- 需要客户添加文字、图片或调整印花构图时，选择 Customizer。
自定义背景、标志和语言
让产品展示符合您的品牌。通过插件管理本地背景、标志和嵌入工具的外观设置。具体选项的可用性取决于方案。
- 场景背景、界面颜色和预先设计的外观有助于保持与商店的一致性。
- 应用和插件支持 22 种语言。WordPress 后台语言按用户设置，网站语言则在站点设置中设置。
- 请使用客户的语言准备产品名称、印花文字和商品说明。界面支持某种语言，并不意味着商店内容会自动翻译。
从客户设计到订单商品项
客户选择规格并完成个性化。插件将配置和保存的设计与购物车商品项关联，之后再关联到 WooCommerce 订单。可用的效果图有助于识别订购的印花。
- 客户打开产品或所分配的工具，然后选择选项。
- 进行个性化时，客户保存设计并将产品加入购物车。
- 客户在购物车中检查产品、配置和可用的设计预览，然后通过 WooCommerce 结账。
- 店主在订单后台打开保存的设计，准备履行订单。
订单履行、POD 与可选 AI
将商店连接到 3D 工具只是流程的起点。您可以从完成的设计下载文件用于自有生产，也可以使用插件提供的按需打印服务商集成。
连接 Printify 或 Printful
在插件设置中配置所选服务商的连接。然后将产品、规格和打印位置与服务商目录关联，准备文件，并从 WooCommerce 提交履行请求。
- 根据具体产品和服务商，调整打印区域和文件格式。
- 发送生产前，检查生成的文件和订单规格。
- 使用插件刷新订单状态和物流信息。
- 如果自行生产，请根据设计能力和导出设置下载 PDF、SVG 或 PNG 文件。
店主后台中用于制作图形的 AI
您可以配置自己的 AI 服务商连接，在设计过程中使用可用的图形生成或增强功能。插件请求从 WordPress 发送到所选服务商，费用计入您在该服务商的账户。
嵌入会话：有效期与额度使用
会话是用于在商店中打开特定工具的临时权限。它有助于安全地向客户提供产品，也是每月嵌入会话额度的计算单位。它不等同于一次点击、一名独立访客或一笔订单。
会话密钥的有效期有多长？
启动嵌入工具时，集成会获取短期令牌，也称为会话密钥。账户的长期访问凭据留在服务器端。客户无需复制密钥，也无需登录店主的 Alter Product 账户。
当前实现中，令牌的默认有效期为 15 分钟。服务器可以指定不同的时长，因此集成以实际收到的会话到期时间为准。重复使用令牌不会延长有效期。到期后再次授权需要新的会话。
刷新页面会消耗另一次会话吗？
这取决于工具是否仍有匹配且有效的会话。插件不会让所有访客和产品共用一个会话。以下规则说明当前行为。
| 情况 | 会话如何处理？ | 对额度的影响 |
|---|---|---|
| 首次打开工具，且没有匹配会话 | 集成为该工具和产品上下文请求新令牌。 | 成功签发新令牌会消耗一次会话。 |
| 在已打开的工具中旋转模型、更改颜色或编辑文字 | 这些操作在已启动的会话中进行。 | 这些操作本身并不意味着签发更多令牌。 |
| 完全刷新包含 Viewer 或 Configurator 的页面 | 插件通常会在页面重新加载后获取新令牌。这些工具的会话内存不会在完整刷新之间保留。 | 再次成功签发令牌会消耗另一次会话。 |
| 在同一标签页中刷新 Customizer | 如果保存的会话与商店、产品、订单和工作模式匹配，且未临近到期，Customizer 可以再次使用它。 | 重复使用不会增加计数。如果条件不满足，则需要新会话。 |
| 令牌到期、切换产品或改变工作上下文 | 可能需要重新授权并获取新令牌。浏览器存储是否可用也会影响会话能否复用。 | 新签发的令牌会增加额度使用量。 |
如何在商店成本和方案中考虑会话？
API 成功签发新令牌时，计数会增加。使用已签发且有效的令牌不属于再次签发。因此，选择方案时应考虑工具启动、刷新和重新打开的次数，而不仅是订单或访客数量。
同一商店中的嵌入工具共享每月会话额度。计数按商店分别记录，并按 UTC 日历月计算。WordPress 后台中嵌入式 Designer 和模型生成器的新会话也会增加此计数。仅通过导入 API 下载可用模型，并不等于打开编辑器会话。
达到额度后，系统会拒绝签发更多会话。这是订阅中的使用额度；请在当前方案中查看套餐数量。
- 只在客户实际使用的位置启动工具。展示产品列表时，可使用普通图片和现成效果图。
- 自行集成 API 时，避免每次组件渲染或选项变化都创建新会话。仅在正确的上下文中复用有效会话。
- 会话额度规划应与 POD 履行和 AI 生成费用分开考虑，后两者来自外部服务的使用。
通过 API 自行集成
拥有自建商店、无头应用或自有订单系统？您可以使用 Alter Product Public API 构建集成层，并在网站嵌入所需工具。此方式需要开发工作。
使用您的技术栈连接 Alter Product
Public API 使用 HTTP 请求和 JSON 数据。因此，您可以使用后端现有的语言和运行环境编写集成。无需将商店改建为 WordPress，也能嵌入 Alter Product 工具。
以下是可用于开发服务器端连接的技术示例。每种技术都需要完成相同步骤：API 授权、创建工具会话，以及将产品、购物车和订单与自有系统关联。
JavaScript 和 TypeScript / Node.js
将集成添加到 Node.js 后端，例如 Express 或 NestJS。从服务器调用 API，并向前端提供嵌入工具所需的数据。
Python
通过 HTTP 请求，将现有 Python 应用，例如 Django 或 FastAPI，与 Alter Product 产品、会话和订单连接。
PHP
在自建商店或应用中使用 PHP，例如 Laravel 或 Symfony。您可以独立于现成 WordPress 插件，开发自己的 API 集成。
Java
将工具接入 Java 后端，例如 Spring，并将设计数据与自己的产品目录和订单处理流程关联。
C# / .NET
使用 .NET 后端，例如 ASP.NET Core，执行授权、创建会话，并向现有商店流程传递数据。
Go
在 Go 服务中开发连接。标准 HTTP 客户端即可处理 API 请求和 JSON 响应。
Ruby
将集成加入 Ruby 应用，例如 Ruby on Rails，并使用自有的产品、购物车和订单履行模型。
Rust
通过 HTTP 客户端和 JSON 处理连接 Rust 后端。您可以将会话和购买事件纳入服务架构。
适合您网站的前端
浏览器端可以使用 React、Vue、Angular，或普通 HTML 和 JavaScript。TypeScript 也适用于实现通信逻辑。页面嵌入 iframe、处理 postMessage 事件，并连接您自己的后端。
前端负责页面外观和购物车交互，后端负责经过身份验证的 Public API 调用。使用 Next.js 等同时覆盖前后端的框架时，应将长期密钥处理和会话创建仅放在服务器端。
您可以保留自己的结账流程、支付系统、CMS 和订单履行流程。实施时，将这些环节与设计数据及所选 Alter Product 工具的事件关联。
API 提供什么，您的系统需要准备什么？
Alter Product 提供 3D 工具、设计数据和会话机制。您的后端将其与产品、客户账户、购物车和订单处理连接。您可以为自己的前端创建中间端点，而不在浏览器中暴露 Alter Product 访问凭据。
| 层级 | 任务 |
|---|---|
| 网站前端 | 显示 iframe、响应工具通信，并更新商店界面。 |
| 您的后端 | 验证对 Public API 的请求、创建会话、控制客户访问，并保存与自有购物车或订单的关联。 |
| Alter Product Public API | 提供连接、产品、工具关联、订单，以及文件和资源访问功能。 |
| 嵌入工具 | 根据所选模式和预先准备的设计展示模型，并提供配置或个性化功能。 |
从授权到自有购物车
先为一个产品建立连接和嵌入会话，然后按照所选工具添加配置、设计保存和订单处理功能。
- 配置 API 访问凭据和商店域名。通过后端发出的请求检查连接。
- 将商店产品与设计及对应的 Alter Product 工具关联。
- 嵌入 iframe 并处理通信初始化。在服务器端创建短期会话，并按照文档传递给工具。
- 处理配置或个性化事件，将所需数据保存到自己的购物车。
- 购买完成后，将订单及所需数据和文件与自有履行系统同步。
查看所用工具的说明
嵌入说明提供参数和示例。postMessage 章节介绍与网页的通信，API 文档则说明后端执行的操作。
开始销售前检查完整流程
像客户一样测试产品：从打开页面，到在订单中看到设计。请在电脑和手机上测试，也要在未登录后台的状态下测试。
简短检查清单
准备好一个产品后，完成整个流程，再将验证过的配置方式用于其他目录商品。
- 确认 Business 或更高方案有效，并确认域名使用 HTTPS 和有效的 SSL/TLS 证书。
- 检查工具页面的可见性、设计分配以及所选嵌入方式。
- 选择不同尺寸和颜色。将设计选项与商店中的规格和价格进行比较。
- 在 Customizer 中添加文字或图形，保存设计并加入购物车。同时测试修改已添加的个性化内容。
- 在购物车和测试订单提交后，核对预览、数量和配置。
- 打开订单中的设计，检查生成的打印文件。如果使用 POD，也应测试服务商映射和受控的履行请求提交流程。
- 检查客户可用的资源库、语言、品牌设置和手机端表现。