了解更多

电商集成 - 从设计到订单

Alter Product 与 WooCommerce® 兼容

将 Alter Product 嵌入您的网站：WordPress + WooCommerce 或 API

在您的网站中加入 3D 展示、规格配置和产品个性化功能。客户在您的商店查看产品、选择选项并制作设计，您则在自己的系统中管理商品和订单。

如果使用已安装 WooCommerce 的 WordPress，可以通过插件完成配置，无需编写集成代码。如果使用自建网站或商店，则可通过 Public API 和 postMessage 事件，将嵌入工具连接到后端及购物车。

图片展示了录制画面和插件后台中的真实界面。画面中的按钮名称为英文；工具外观取决于商店配置。

WordPress
WordPress + WooCommerce，无需编程安装插件、连接账户，然后在 WordPress 后台准备产品。设计文件和资源存储在您自己的主机上。查看工作方式
API
自建网站与后端嵌入 Viewer、Configurator 或 Customizer。通过 API 将会话、产品数据和订单接入自己的系统。查看工作方式
需要详细的插件安装说明？查看 WordPress 插件安装指南：必需的 WooCommerce、固定链接、Auto Connect 和故障排除。

两种打造个性化商店的方式

同一个产品设计可以用于展示、配置或印花编辑。您可以根据网站和开发工作范围，选择与商店连接的方式。

使用插件还是自行集成？

插件提供现成的 WordPress 和 WooCommerce 支持。API 则让您自行连接其他平台、无头应用或现有订单系统。

哪些集成功能已提供，哪些需要自行实现
领域WordPress + WooCommerce通过 API 接入自有系统
上线配置在 WordPress 后台安装插件并使用连接向导。在后端实现连接，并在网站中嵌入工具。
产品与规格将设计分配给 WooCommerce 产品并同步规格。将产品和选项标识符与商店数据关联。
购物车与订单提供 WooCommerce 中配置、客户设计和预览的完整处理功能。在自己的系统中处理嵌入工具事件并同步订单。
文件与资源本地资源库、设计和订单文件存储在 WordPress 服务器上。数据存储和访问方式取决于所选集成模式。采用自有存储时，需要自行实现相应支持。
WordPress 插件安装指南Public API 文档

向客户提供哪一种工具？

根据客户在网站上需要完成的操作选择工具。请先在 Designer 中准备设计和个性化规则。

Viewer：查看产品

展示 3D 模型及其外观。适合需要从不同角度展示产品、而无需开放印花编辑的场景。

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 提供，并由其授权启动。

在 WordPress 或自有服务器上嵌入的 Customizer 数量及其产品分配更改次数均不受限制。仍需有效的支持嵌入功能的套餐、嵌入会话以及适用的 Alter 云端传输额度。保存在 Alter Product 云端的 Customizer 仍受所选套餐的容量限制。自有存储空间和带宽取决于您的托管或 AWS 服务。

  • 为商店域名配置有效的 SSL/TLS 证书，并通过 HTTPS 提供商店页面。这是公共网站中嵌入工具正常运行的必要条件。
  • 按照安装说明启用 WordPress 的友好固定链接。
  • 为模型、图形、设计和订单文件预留主机空间。商店资源库会使用您服务器的资源。
从 WordPress.org 下载官方 Alter Product 插件WordPress 要求与准备工作查看方案功能和额度会话如何消耗方案额度

为什么需要 HTTPS 和 SSL/TLS 证书？

Alter Product 通过 iframe 嵌入商店页面。如果页面不具备安全上下文，浏览器会限制应用使用的部分功能。HTTPS 加密连接，有效证书则让浏览器验证域名。

浏览器也会检查 iframe 所在的外层页面。因此，如果商店通过 HTTP 提供服务，仅 Alter Product 应用使用 HTTPS 并不足够。嵌入工具的网页也必须使用 HTTPS。这是浏览器对嵌入应用的安全规则。

  1. 在主机服务商处启用 SSL/TLS 证书，并确认它对商店域名有效。
  2. 将 WordPress 网站地址和集成域名设为 HTTPS。启用从 HTTP 到 HTTPS 的重定向。
  3. 通过 HTTPS 打开产品页面，检查浏览器是否报告证书错误或通过 HTTP 加载资源的问题。
安全上下文与 iframe 嵌入 - MDN 说明

通过 Auto Connect 连接商店

自动连接流程会引导您授权 Alter Product 账户并配置商店。使用此方式时，无需手动复制 API 密钥。

  1. 在 WordPress 中进入“插件 → 安装插件”，搜索 Alter Product，然后安装并启用。
  2. 打开 Alter Product 后台并选择 Auto Connect。登录正确的 Alter Product 账户，核对商店并批准连接。
  3. 返回 WordPress。选择初始模型并下载所需资源。等待下载和就绪检查完成。
  4. 检查已创建的工具页面及显示设置，然后开始准备产品。
安装、Auto Connect 与手动连接

分配设计并同步规格

在 WooCommerce 产品编辑页打开 Alter Product 选项卡。创建新设计或选择现有设计，然后打开 Designer。为该产品设置印花、可用选项和打印区域。

  1. 对于可变产品，请准备尺寸等属性，以及对应的 WooCommerce 规格。
  2. 在 Designer 中使用 Sync variants，将设计选项与产品规格关联。同时检查不属于 WooCommerce 规格属性的默认选项。
  3. 保存设计和产品。选择页面中显示的工具以及打开方式。
  4. 在产品页面检查效果：选择几种规格、制作设计，然后进入购物车。
从 WooCommerce 产品打开的 Designer，以及带有材料和打印方式设置的 Sync variants 窗口
同步将 WooCommerce 产品规格与设计选项关联。画面中正在选择默认设置，然后确认 Sync。
安装后的产品操作

WordPress 服务器上的自有资源库

模型、设计、图形和订单文件保存在运行 WordPress 的主机上。本地添加的资源服务于您的商店，不会因此成为供其他商店使用的 Alter Product 公共资源库条目。

哪些内容保存在本地？

插件将模型、资源库、设计、效果图和订单文件保存在 WordPress 存储空间中。生成器项目及其修订版本的数据也保存在该安装实例的数据库中。

您可以添加自己的素材，并从 Alter Product 导入选定资源。下载后使用的是本地副本。导入、检查更新和下载新版本是独立操作。

在哪里准备商店所需素材
后台位置可执行的操作
资源管理模型、图形、模板、背景、标志、纹理和环境等。可用的添加方式取决于资源类型。
模型生成器基于模板创建本地项目，并处理与生成器关联的模型。
产品设计 / Designer制作或导入设计，进行编辑并分配给商店产品。
WooCommerce 订单使用已保存的客户设计、预览和履行订单所需的文件。
WordPress 中的 Alter Product 资源后台，显示模型库和导入选项
您在 WordPress 后台管理商店资源库。导入的资源和自有素材可用于本地设计。
资源类型与添加到资源库的方式创建自己的 3D 模型

由您决定商品和客户工具中提供的内容

您使用适当权限在 WordPress 后台管理资源库和设计。客户使用商店中开放的工具和素材，无法进入资源库的后台编辑界面。

您决定将哪个设计分配给产品、在哪里显示嵌入工具，以及开放哪些个性化功能。也请检查嵌入式 Customizer 资源库中可用的资源。分配设计后，产品页面可能默认启用嵌入工具；您可在产品设置中控制其显示。

本地文件与嵌入式 Alter Product 应用

资源由您自行保存，工具界面则从 Alter Product 加载到 iframe 中。Alter Product 服务检查账户访问权限、方案和会话，并提供可导入的目录。集成需要连接该服务。

备份时，请保存数据库、文件目录，以及读取插件加密数据所需的 WordPress 密钥和盐值。这样不仅可以恢复可见图形，也能恢复继续工作所需的数据。

在品牌网站上提供个性化体验

嵌入工具可以位于产品页面或独立的 WordPress 页面中。客户始终处于您的商店购买流程中，购物车和订单由 WooCommerce 处理。

产品页面、工具页面或区块

根据商店布局选择显示方式：在产品页面放置工具、使用按钮跳转到专用页面，或通过现有区块和短代码嵌入。Viewer、Configurator 和 Customizer 各有用途，无需同时向客户开放全部工具。

  • 在需要客户查看产品模型的位置放置 Viewer。
  • 销售预设规格和选项时，使用 Configurator。
  • 需要客户添加文字、图片或调整印花构图时，选择 Customizer。
嵌入商店页面的 Customizer，显示 T 恤文字编辑和购物车按钮
客户在嵌入工具中个性化产品。画面展示文字编辑、3D 模型视图和 2D 打印区域。
通过插件嵌入工具编辑器中可用的个性化工具

自定义背景、标志和语言

让产品展示符合您的品牌。通过插件管理本地背景、标志和嵌入工具的外观设置。具体选项的可用性取决于方案。

  • 场景背景、界面颜色和预先设计的外观有助于保持与商店的一致性。
  • 应用和插件支持 22 种语言。WordPress 后台语言按用户设置，网站语言则在站点设置中设置。
  • 请使用客户的语言准备产品名称、印花文字和商品说明。界面支持某种语言，并不意味着商店内容会自动翻译。
展示与品牌设计资源Customizer 品牌设置

从客户设计到订单商品项

客户选择规格并完成个性化。插件将配置和保存的设计与购物车商品项关联，之后再关联到 WooCommerce 订单。可用的效果图有助于识别订购的印花。

  1. 客户打开产品或所分配的工具，然后选择选项。
  2. 进行个性化时，客户保存设计并将产品加入购物车。
  3. 客户在购物车中检查产品、配置和可用的设计预览，然后通过 WooCommerce 结账。
  4. 店主在订单后台打开保存的设计，准备履行订单。
Designer 和购物车中的设计效果图

订单履行、POD 与可选 AI

将商店连接到 3D 工具只是流程的起点。您可以从完成的设计下载文件用于自有生产，也可以使用插件提供的按需打印服务商集成。

连接 Printify 或 Printful

在插件设置中配置所选服务商的连接。然后将产品、规格和打印位置与服务商目录关联，准备文件，并从 WooCommerce 提交履行请求。

PrintifyPrintful
  • 根据具体产品和服务商，调整打印区域和文件格式。
  • 发送生产前，检查生成的文件和订单规格。
  • 使用插件刷新订单状态和物流信息。
  • 如果自行生产，请根据设计能力和导出设置下载 PDF、SVG 或 PNG 文件。
打印区域、导出与通过 Printify 或 Printful 履行订单

店主后台中用于制作图形的 AI

您可以配置自己的 AI 服务商连接，在设计过程中使用可用的图形生成或增强功能。插件请求从 WordPress 发送到所选服务商，费用计入您在该服务商的账户。

AI 模型、提示词与自有 BYOK 连接

嵌入会话：有效期与额度使用

会话是用于在商店中打开特定工具的临时权限。它有助于安全地向客户提供产品，也是每月嵌入会话额度的计算单位。它不等同于一次点击、一名独立访客或一笔订单。

会话密钥的有效期有多长？

启动嵌入工具时，集成会获取短期令牌，也称为会话密钥。账户的长期访问凭据留在服务器端。客户无需复制密钥，也无需登录店主的 Alter Product 账户。

当前实现中，令牌的默认有效期为 15 分钟。服务器可以指定不同的时长，因此集成以实际收到的会话到期时间为准。重复使用令牌不会延长有效期。到期后再次授权需要新的会话。

刷新页面会消耗另一次会话吗？

这取决于工具是否仍有匹配且有效的会话。插件不会让所有访客和产品共用一个会话。以下规则说明当前行为。

客户常见操作与已签发会话数量
情况会话如何处理？对额度的影响
首次打开工具，且没有匹配会话集成为该工具和产品上下文请求新令牌。成功签发新令牌会消耗一次会话。
在已打开的工具中旋转模型、更改颜色或编辑文字这些操作在已启动的会话中进行。这些操作本身并不意味着签发更多令牌。
完全刷新包含 Viewer 或 Configurator 的页面插件通常会在页面重新加载后获取新令牌。这些工具的会话内存不会在完整刷新之间保留。再次成功签发令牌会消耗另一次会话。
在同一标签页中刷新 Customizer如果保存的会话与商店、产品、订单和工作模式匹配，且未临近到期，Customizer 可以再次使用它。重复使用不会增加计数。如果条件不满足，则需要新会话。
令牌到期、切换产品或改变工作上下文可能需要重新授权并获取新令牌。浏览器存储是否可用也会影响会话能否复用。新签发的令牌会增加额度使用量。

如何在商店成本和方案中考虑会话？

API 成功签发新令牌时，计数会增加。使用已签发且有效的令牌不属于再次签发。因此，选择方案时应考虑工具启动、刷新和重新打开的次数，而不仅是订单或访客数量。

同一商店中的嵌入工具共享每月会话额度。计数按商店分别记录，并按 UTC 日历月计算。WordPress 后台中嵌入式 Designer 和模型生成器的新会话也会增加此计数。仅通过导入 API 下载可用模型，并不等于打开编辑器会话。

选择月度会话额度更高的套餐会增加额度，但不会清零已记录的用量。 拥有Alter Product账户即可在订阅管理中购买会话，无需先选择套餐。在嵌入式工具中使用这些会话仍需符合条件的套餐。

先使用订阅内的会话，再按最早到期的顺序使用已购买的备用会话。每个已付款套餐自付款时起按UTC计算，有效期为6个日历月，可结转到后续月份直至到期。再次购买不会延长旧套餐的有效期。

在订阅管理中启用自动充值。选择会话包，以已购会话的整数数量设置阈值，并可选设置含税月度支出上限。当已购且未过期的储备会话达到或低于阈值时，就会开始购买。套餐内会话不计入阈值；0 表示已购储备会话已用尽。付款可能需要一些时间。只有套餐额度和储备会话都用尽时，额度耗尽才会阻止新的嵌入会话。

文件传输有独立限额，购买会话不会提高该限额。Shopify使用自己的计费机制，不适用这些通过Stripe购买的备用会话。

选择每月传输额度更大的套餐，或在订阅管理中购买传输量。 先使用订阅计划内的传输量，再使用购买的传输量。每个已付款套餐包在付款后六个日历月到期。新购买不会延长旧套餐包的有效期。优先使用最早到期的套餐包。 购买需要有效的Alter Product账户。传输量和嵌入式会话使用独立储备。这些购买不适用于Shopify计费。

在订阅管理中选择传输套餐包、以GiB计的最低已购储备，以及可选的含税月度支出上限。0表示已购储备为空。每次自动购买均收取整个套餐包的费用。 当已购买且未过期的储备达到或低于阈值时，自动充值会购买所选套餐包。订阅计划内的传输量不计入此阈值。 如果剩余支出额度不足以支付含税的整个套餐包，购买不会启动。

  • 只在客户实际使用的位置启动工具。展示产品列表时，可使用普通图片和现成效果图。
  • 自行集成 API 时，避免每次组件渲染或选项变化都创建新会话。仅在正确的上下文中复用有效会话。
  • 会话额度规划应与 POD 履行和 AI 生成费用分开考虑，后两者来自外部服务的使用。
比较各方案的会话额度API 文档中的嵌入会话

通过 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 后端。您可以将会话和购买事件纳入服务架构。

授权与首次 API 连接可用端点与数据格式

适合您网站的前端

浏览器端可以使用 React、Vue、Angular，或普通 HTML 和 JavaScript。TypeScript 也适用于实现通信逻辑。页面嵌入 iframe、处理 postMessage 事件，并连接您自己的后端。

前端负责页面外观和购物车交互，后端负责经过身份验证的 Public API 调用。使用 Next.js 等同时覆盖前后端的框架时，应将长期密钥处理和会话创建仅放在服务器端。

您可以保留自己的结账流程、支付系统、CMS 和订单履行流程。实施时，将这些环节与设计数据及所选 Alter Product 工具的事件关联。

ReactVue.jsAngularJavaScriptTypeScript
在网站中嵌入 Viewer在网站中嵌入 Configurator在网站中嵌入 Customizer

API 提供什么，您的系统需要准备什么？

Alter Product 提供 3D 工具、设计数据和会话机制。您的后端将其与产品、客户账户、购物车和订单处理连接。您可以为自己的前端创建中间端点，而不在浏览器中暴露 Alter Product 访问凭据。

自有集成中的职责分工
层级任务
网站前端显示 iframe、响应工具通信，并更新商店界面。
您的后端验证对 Public API 的请求、创建会话、控制客户访问，并保存与自有购物车或订单的关联。
Alter Product Public API提供连接、产品、工具关联、订单，以及文件和资源访问功能。
嵌入工具根据所选模式和预先准备的设计展示模型，并提供配置或个性化功能。
自有集成示例：代码编辑器和网站上的包装 Customizer
使用自有集成的应用示例。请在链接的 API 和 postMessage 文档中查看最新会话和通信参数。
API 集成概览Public API 端点目录

从授权到自有购物车

先为一个产品建立连接和嵌入会话，然后按照所选工具添加配置、设计保存和订单处理功能。

  1. 配置 API 访问凭据和商店域名。通过后端发出的请求检查连接。
  2. 将商店产品与设计及对应的 Alter Product 工具关联。
  3. 嵌入 iframe 并处理通信初始化。在服务器端创建短期会话，并按照文档传递给工具。
  4. 处理配置或个性化事件，将所需数据保存到自己的购物车。
  5. 购买完成后，将订单及所需数据和文件与自有履行系统同步。
API：身份验证与连接API：产品与工具关联API：嵌入工具会话会话有效期与刷新对额度的影响

开始销售前检查完整流程

像客户一样测试产品：从打开页面，到在订单中看到设计。请在电脑和手机上测试，也要在未登录后台的状态下测试。

简短检查清单

准备好一个产品后，完成整个流程，再将验证过的配置方式用于其他目录商品。

  • 确认 Business 或更高方案有效，并确认域名使用 HTTPS 和有效的 SSL/TLS 证书。
  • 检查工具页面的可见性、设计分配以及所选嵌入方式。
  • 选择不同尺寸和颜色。将设计选项与商店中的规格和价格进行比较。
  • 在 Customizer 中添加文字或图形，保存设计并加入购物车。同时测试修改已添加的个性化内容。
  • 在购物车和测试订单提交后，核对预览、数量和配置。
  • 打开订单中的设计，检查生成的打印文件。如果使用 POD，也应测试服务商映射和受控的履行请求提交流程。
  • 检查客户可用的资源库、语言、品牌设置和手机端表现。
插件故障排除API 错误与限制查看使用 Alter Product 的示例商店