安装自定义签出

您可以使用自定义结账，创建适合商店品牌的外观和感觉的独特购物体验。本文将概述如何打包自定义签出文件，并通过控制面板安装自定义签出。

本文将讨论这两种方法的使用开源结帐和结帐SDK签出。

获取JavaScript加载器文件

自定义签出必须有一个JS加载器文件。使用自定义签出的第一步是生成这个文件。加载器文件必须负责以下事项:

• 加载所有所需的资产，包括CSS文件
• 运行应用程序

使用开源签出打包定制签出

如果使用开源签出，您可以通过以下步骤生成加载文件:

1. 使用终端导航并定位Open Source Checkout文件夹，并运行npm ci下载附件
2. 运行npm运行构建生成一个/ dist /文件夹中有所有文件

当使用开源签出通过UI查看更改和测试实现时，部署并安装自定义签出。更多细节如下。

在签出页上可用的属性

当商店使用自定义结帐时，一些属性被附加到window.checkoutConfig对象在签出页上。这些属性是:

• containerId:加载checkout应用程序的HTML组件的ID。
• orderId:如果存在，则表示我们应该呈现给定订单Id的订单确认页面
• checkoutId:如果存在，则为活动签出的ID。你不能两者兼得orderId和checkoutId

要使用在窗口对象中公开的数据，请在加载器文件中包含相关代码。下面是这个代码的一个例子:

ReactDOM．渲染（<结帐checkoutId＝｛窗口．checkoutConfig．checkoutId｝/>，文档．getElementById（窗口．checkoutConfig．containerId））；

托管自定义结帐

您将需要在线托管自定义结帐文件，以便商店可以为其提供服务。您可以使用托管服务，例如Amazon S3．如果您愿意，使用外部主机将允许您自由地自动化构建过程，并自动从本地机器推送更新。

使用WebDAV托管自定义签出

你可以使用WebDAV上传一个自定义的结帐到你的商店的服务器。上传的说明/ dist使用WebDav将BigCommerce服务器的文件夹设置为:

1. 在继续之前，请确保已下载Cyberduck，我们推荐WebDAV客户端。注意:有关如何使用Cyberduck的更多信息，请参阅文件访问(WebDAV)页面。
2. 从您的商店控制面板，导航到服务器设置>文件访问(WebDAV)．
   • 自动连接Cyberduck，请看单击登录．
   • 手动连接Cyberduck，请参阅手动连接Cyberduck．
3. 从Cyberduck，进入/内容文件夹，并创建一个新文件夹结帐．
4. 导航到/ dist文件夹中的结帐项目。
5. 复制的内容/ dist文件夹并粘贴到结帐文件夹中。

安装定制签出

要在商店中安装自定义结帐，请遵循以下步骤:

1. 导航到高级设置>签出在你的商店的控制面板。
2. 下付款类型中,选择自定义签出．
3. 在中输入以下内容脚本的URL领域,取代<版本>的最新版本号npm发布运行:α命令:

webdav:付款/装载器-<版本>. js”

注:

*将webdav:表示URL在远程WebDAV目录中。它会治疗/内容作为根WebDAV目录。

*重要的是要包括<版本>脚本URL字段中的编号。因为如果你改变相同的加载器文件名，你可以为用户提供一个缓存版本。

4. 单击保存在页面底部的按钮。
5. 导航到您的实时店面，查看新的自定义结帐。

相关资源

文章

• 结帐SDK
• 文件访问(WebDav)
• 在控制面板中安装自定义签出