安装自定义签出

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

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

获取JavaScript加载器文件

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

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

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

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

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

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

在签出页上可用的属性

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

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

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

ReactDOM渲染<结帐checkoutId窗口checkoutConfigcheckoutId/>文档getElementById窗口checkoutConfigcontainerId

托管自定义结帐

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

使用WebDAV托管自定义签出

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

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

安装定制签出

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

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

注:

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

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

custom-checkout-01

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

相关资源

文章

Baidu