页脚自定义页面
需求背景
目前安装主题应用扩展,需要在主题编辑器商家手动启用,整体交互链路太高,操作成本高,需要优化应用扩展的交互体验;
主题应用扩展App Block开启优化
解决问题:目前主题应用扩展App Block的使用,必须要商家自行添加App Block导致使用成本太高;
优化目标/期望效果:开发者可以在插件的界面提供链接,商家在插件的流程中启用主题应用扩展,无需自行执行繁琐的操作;
实现方案:通过一个标准化的链接,商户点击后可以帮助商户简单的添加App Block。
链接作用:通过Deep Link可以把block插入到对应的位置,并弹出提示如下图,需要用户保存生效,每次点击只能添加一个block:

链接参数:
|
参数名称 |
描述 |
|
templateAlias |
指定App block添加到的模板,默认值是首页(index.json) |
|
themeID |
指定block添加的主题ID,不传值默认为已发布主题 |
|
uuid |
主题应用扩展的uuid |
|
handle |
block文件的名称,具体是主题应用扩展目录下/blocks下的block文件名称。例如theme-app-extension/blocks/example-block.html,则handle为example-block |
|
sectionID |
指定App block添加的section的ID |
|
target |
block支持以下4个位置添加:
|
添加app block到template模板
- 链接格式:https://<myshoplineDomain>/admin/theme/editor/editing/${templateAlias}?themeId=${themeID}&templateName=${templateName}&activateAppId=${uuid}/${handle}&target=newAppsSection
- 添加的位置逻辑:在对应模板页面的最底部增加一个app section,在section中添加app block;(位置参考下图)

- 以下边缘场景导致添加App Block失败,报错“添加App Block失败,请联系应用开发者寻求帮助”:
- 新增的App Block超出了页面的数量限制;
- 当前页面不支持添加App Block;
添加app block到section,通过sectionID指定
- 链接格式:https://<myshoplineDomain>/admin/theme/editor/editing/${templateAlias}?themeId=${themeID}&templateName=${templateName}&activateAppId=${uuid}/${handle}&target=sectionId:{sectionId}
- 添加的位置逻辑:在对应的section的最底部添加app block;
- 以下边缘场景导致添加App Block失败,报错“添加App Block失败,请联系应用开发者寻求帮助”:
- 新增的App Block超出了section的数量限制;
- 当前section不支持添加App Block;
- 没找到sectionID;
点击链接后,跳转到编辑器的交互:
- 添加App Block成功后,选中组件并将页面定位到App Block当前位置;
- 弹窗提示商家已成功添加,弹窗的信息如下:
- xxx组件已添加,其中xxx取组件的名称(多语言的block名称);
- 简单的图文告诉商家可以拖动组件调整位置,保存后生效;文案:“拖动组件到您希望的位置,点击保存后生效”。
- 关闭按钮;
- Embed block 的 deep link也加上这个逻辑,跳转到编辑器后,也需要增加弹窗提示,弹窗信息如下:
- xxx组件已开启,其中xxx取组件的名称(多语言的block名称);
- 文案:“开启后,在主题编辑器点击保存后生效”;
- 关闭按钮;