📘

本文中​​ Theme Extension 开发​​的入门指南基于 ​​Shoplazza CLI​​（具体为 shoplazza te 命令）进行说明。

此外，您也可以使用 ​​Shoplazza CLI​​（通过 shoplazza app 命令）来创建和开发 extension。详情请参阅此文档。

Theme Extension 开发

Theme Extension 是 Shoplazza 提供的一种扩展和自定义 theme 页面的方式。开发者可以使用 Theme Extension 来扩展和自定义 theme 页面。

本页重点说明使用 shoplazza te 命令开发 Theme Extension 的基本流程，包括创建 extension、本地预览、构建生产版本和发布。阅读时可以先区分 Basic Extension 与 Embed Extension：前者通常需要在主题编辑器中选择插入位置，后者的插入位置由 extension 代码或配置决定。无论选择哪种类型，都建议先通过主题编辑器预览并保存草稿，再进入发布流程。

开发流程

安装 Shoplazza CLI：

npm install -g shoplazza-cli

登录开发者店铺

shoplazza login --store https\://{shopdomain}.myshoplaza.com/

创建 Extension：

shoplazza te create

选择 Extension 类型（Basic 或 Embed）。

• Basic Extension：允许在主题编辑器中调整插入位置。
• Embed Extension：插入位置在 Extension 中硬编码（推荐 pod 开发者使用）。

开始开发：

cd your-project
shoplazza te serve

注意：选择一个 template 进行开发和预览。选择 theme 后，下方会显示 2 个链接：

将显示两个链接：

• 第一个链接跳转至主题编辑器，您可在此处启用 Extension 并保存 theme。
• 第二个链接跳转至店面进行预览。

预览流程：

• 在店铺后台访问主题编辑器预览链接：
• 打开浏览器，导航至店铺后台中的主题编辑器预览链接。

• 在主题编辑器中添加 Theme Extension：
  Embed App：前往应用管理并启用 extension。

• 在主题编辑器中完成配置并保存草稿：
• 在主题编辑器中完成配置后，保存草稿。然后即可访问店面预览链接查看变更效果。

构建生产版本：

shoplazza te build

• 输入从 Shoplazza Partner 后台获取的应用 client_id 和 client_secret。

发布 Extension

shoplazza te release