搭建扩展​

结账 UI 扩展让应用程序开发人员可以构建自定义结账功能，商家可以在结账流程中的扩展点安装这些功能。例如，通过添加商品推荐或优惠扩展模块到结账页，以增加额外的销售机会。

本文介绍如何创建、发布并在在线商店中添加结账 UI 扩展。

要求​

扩展脚手架命令​

你可以通过 sl help extension 命令查看脚手架支持的命令。

命令描述
create创建一个新的 SHOPLINE 应用扩展
push将当前扩展推送到 SHOPLINE
connect将现有扩展连接到 SHOPLINE CLI
serve在本地运行你的扩展以进行开发
help获取命令的帮助信息

扩展开发​

注意

在搭建和调试扩展的环节，你需要在同一个 开发商店 完成以下几个步骤。

步骤一：账号登录​

在终端执行 sl login 登录到开发商店。

  1. 在终端指定要登录的商店。
sl login --store={example.myshopline.com}
  1. 根据浏览器提示完成登录操作。

步骤二：创建扩展​

  1. 在终端输入该命令 sl extension create --name={name}。
提示

通过 --name 可指定扩展名称。

  1. 选择扩展类型，这里需要选择 Checkout UI Customizer。
  2. 选择组织账号。
  3. 在终端展示的应用列表中，选择需要关联的应用。
  4. 等待依赖安装完毕则可进行开发。

步骤三：连接扩展（可选）​

如果你已经拥有某个扩展，并希望使用当前项目进行开发，那么你可以连接它们。

  1. 在终端输入命令 sl extension connect。
  2. 选择组织账号。
  3. 选择需要连接的扩展。

步骤四：开发扩展​

目录结构​

扩展结构主要由如下三部分组成：

  • locales：多语言内容配置
  • src：扩展的源代码
  • shopline.ui.customizer.toml：配置文件
+-- locales
|   +-- en.default.json
|   +-- fr.json
+-- src
|   +-- index.tsx
+-- shopline.ui.customizer.toml

多语言​

多语言存放在 locales/{iso_code}.json 中（en.default.json 作为默认兜底语种），以键值对的方式进行存储，当你的扩展需要在页面中渲染多语种文案的时候请配置。

{
  "welcome": "Welcome to the {{extensionPoint}} extension!"
}

例如，德语语言路径为 locales/de.json，配置如下：

{
  "welcome": "Willkommen bei der {{extensionPoint}} Erweiterung!"
}

配置文件​

配置文件 shopline.ui.customizer.toml 记录了扩展的基础信息，如扩展名称 name；支持渲染的 扩展点 extension_points；扩展能力 capabilities 如阻塞结账与网络请求等等。

关于如何配置 shopline.ui.customizer.toml 文件，参考 配置文件。

扩展源码​

你可以使用 标准 API 与 UI 组件 进行扩展的开发。以下是一个简单的例子，演示如何在 Banner 组件中使用 i18n 多语言能力渲染文案。

render('Checkout::Dynamic::Render', (props) => {
  const { i18n, extension } = props;
  const { extensionPoint } = extension;
  return <Banner title={i18n.translate('welcome', { extensionPoint })} />;
});

步骤五：预览扩展​

  1. 创建扩展之后，在目录下执行以下命令进行预览。
sl extension serve
  1. 终端会输出预览链接，点击底部链接即可预览扩展。

预览

步骤六：发布扩展​

  1. 推送扩展（ SHOPLINE CLI 会构建你的扩展代码并将构建产物推送)。
提示

推送扩展并不会立即应用于你的在线商店，只有发布后才会。

sl extension push
  1. 扩展推送成功后，根据提示点击链接到 SHOPLINE 商家后台发布扩展。

publish

  1. 在 SHOPLINE 开放平台，先创建一个扩展版本。然后，点击 操作 下的 发布 去发布这个新扩展版本。

扩展上线​

注意

结账 UI 扩展仅适用于使用 SHOPLINE Enterprise 套餐的商店。

步骤一：安装扩展应用​

  1. 在 SHOPLINE 商家后台中，点击左侧菜单中的 应用 搜索你的扩展应用。
  2. 安装你的扩展应用。

步骤二：在结账编辑器中添加扩展应用​

注意
  • 已安装的应用才能在结账编辑器中找到与之关联的结账 UI 扩展。
  • 在商家使用结账编辑器添加 UI 扩展之前，UI 扩展不会在结账流程中展示。
  1. 在 SHOPLINE 商家后台中，从 设置 > 结账 > 主题配置 > 自定义 处可以进入结账编辑器。
  2. 通过顶部的页面下拉列表选择框，选择需要添加扩展程序的结账页面。
  3. 点击左侧栏 应用选择图标，点击底部 添加应用，选择需要添加的扩展程序。

搭建扩展

步骤三：测试扩展在店铺中的显示​

  1. 通过拖拽的方式将扩展拖到不同的位置来测试。
  2. 确定需要展示的位置后，点击 保存。

扩展例子​

自定义商品展示组件

interface ItemProps {
  image: string;
  name: string;
  price: string;
}
interface GridBoxProps {
  title: string;
  children: any;
}
function BasicItem({ image, name, price }: ItemProps) {
  return (
    <Grid rows={'auto'} blockAlignment="start" columns={['auto', 'fill', 'auto']} spacing="base">
      <ItemThumbnail size="small" src={image}></ItemThumbnail>
      <BlockStack spacing="tight">
        <Text emphasis={"bold"}>{name}</Text>
        <Text emphasis={"bold"}>{price}</Text>
      </BlockStack>
      <View>
        <Button size="small">Add</Button>
      </View>
    </Grid>
  );
}
function GridBox({title, children}: GridBoxProps) {
  return <>
    <Grid rows={[20, 'auto']} columns={'fill'} spacing="base" padding={['none', 'none', 'base', 'none']}>
      <View>
        <Text size="large">{title}: </Text>
      </View>
      <GridItem>
        <Grid
          border="base"
          rows={['auto', 'auto', 'auto']}
          spacing="base"
          padding="base"
          cornerRadius="base"
        >
          <View>
            <Text emphasis="bold" size="medium">
              Best Sellers
            </Text>
          </View>
          {children}
        </Grid>
      </GridItem>
    </Grid>
  </>
}
// 自定义实现商品展示
function AddToCartDemo() {
  const productList = [
    {
      image:
        'https://img-va.myshopline.com/image/store/1610440173818/01c5f3bf41533f63207f67ce922c3134865e9bfd.png?w=1056&h=1056',
      name: 'Scarlet Dream Duo - Black',
      price: '$500.00',
    },
    {
      image:
        'https://img-va.myshopline.com/image/store/1610440173818/5d55aa39c28c87881aece99f75d820b1b2db476b.png?w=1056&h=1056',
      name: 'Scarlet Dream Duo - Black',
      price: '$500.00',
    },
  ];
  return (
    <>
      <GridBox title="Basic">
        {productList.map((item, index) => {
            return (
              <BasicItem key={index} image={item.image} name={item.name} price={item.price} />
            );
          })}
      </GridBox>
    </>
  );
}
// 渲染对应的扩展点
render("Checkout::Dynamic::Render", (props) => {
  return <AddToCartDemo/>
});

示例

这篇文章对你有帮助吗？
SHOPLINE
SHOPLINE
SHOPLINE Enterprise
条款协议
隐私
条款
开发者协议
LinkedInEmail
LinkedInEmail
© Copyright 2013-2026 SHOPLINE Limited.