checkout.liquid

停用
信息、发货和付款页面的 checkout.liquid 布局将于 2024 年 8 月 13 日废弃。使用 checkout.liquid 自定义这些页面的用户需要在 2024 年 8 月 13 日之前升级到 checkout extensibility。除扩展商店外，新商店将无法访问 checkout.liquid。

checkout.liquid布局用于结账，仅适用于Shopify Plus商家。如果您的网店不是 Shopify Plus ，您可以在主题编辑器中自定义结账页面。

位置

checkout.liquid 布局位于主题的layout目录中：

└── theme
    ├── layout
    |  ├── theme.liquid
    |  └── checkout.liquid
    ├── templates
    ...

Schema

checkout.liquid 布局的默认格式如下：

<!DOCTYPE html>
<html lang="{{ locale }}" dir="{{ direction }}" class="{{ checkout_html_classes }}">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
    <meta name="referrer" content="origin">

    <title>{{ page_title }}</title>

    {{ content_for_header }}

    {{ checkout_stylesheets }}
    {{ checkout_scripts }}
  </head>
  <body>
    {{ skip_to_content_link }}

    <header class="banner" data-header role="banner">
      <div class="wrap">
        {{ content_for_logo }}
      </div>
    </header>

    {{ order_summary_toggle }}
    <div class="content" data-content>
      <div class="wrap">
        <div class="main">
          <header class="main__header" role="banner">
            {{ content_for_logo }}
            {{ breadcrumb }}
            {{ alternative_payment_methods }}
          </header>
          <main class="main__content" role="main">
            {{ content_for_layout }}
          </main>
          <footer class="main__footer" role="contentinfo">
            {{ content_for_footer }}
          </footer>
        </div>
        <aside class="sidebar" role="complementary">
          <div class="sidebar__header">
            {{ content_for_logo }}
          </div>
          <div class="sidebar__content">
            {{ content_for_order_summary }}
          </div>
        </aside>
      </div>
    </div>

    {{ tracking_code }}
  </body>
</html>

结账步骤

结账有以下步骤：

步骤	描述
库存问题	如果购物车中的一个或多个项目缺货，或者库存水平低于客户购买的数量，则会显示此步骤。客户会看到一个确认按钮，点击该按钮会删掉没有库存的商品，或超出的库存。
联系信息	客户输入自己的电子邮件地址，如果商店启用了客户账户，则可以选择登录。如果购物车中有任何商品需要送货，则会显示送货地址表单。否则，将显示账单地址表单。
送货方式	客户选择送货方式或编辑送货信息。如果购物车中没有商品需要送货，则跳过这一步。对于销售数字产品或服务的商家来说，跳过送货方式很常见。单击 “编辑送货信息 “后，访问者将返回 “客户信息 “步骤。
付款方式	客户选择付款方式，并输入付款信息（如适用）。有些付款提供商要求客户在不同的网站上填写付款信息。客户还可以在此步骤中指定不同的账单地址。
查看订单	根据结账设置可选。客户单击完成订单，确认订单总额、送货和账单地址以及付款详情。如果商店在欧盟运营，则可能需要此步骤。
处理/转发	当客户的订单正在处理中，或被转发到站外支付页面时，向客户显示的临时页面。此步骤中显示的信息取决于结账的翻译设置。
订单状态	结账的最后一步。此步骤在订单完成后显示

在每个步骤中，右栏都会显示显示产品、价格、税金和运费的订单摘要。手机上右栏会折叠。

提示
您可以使用 JavaScript 来识别当前步骤

结账对象

对象	描述	必须
content_for_header	Shopify 为 reCAPTCHA、Shopify 应用程序等功能提供的脚本。您需要在和 HTML 标记之间添加对该对象的引用。	是
content_for_layout	结账流程每个步骤的表单字段和内容。您需要在和 HTML 标记之间添加对该对象的引用。	是
locale	当前选择的语言。	否
direction	内容文字方向，例如ltr 或 rtl	否
page_title	页面标题。常用 <title> 和 </title>标记包含。	否
skip_to_content_link	一个隐藏的无障碍链接，允许用户跳到主要内容。	否
checkout_html_classes	应添加到<html>标记中的字符串，以便使用 Shopify 的默认 CSS。	否
checkout_stylesheets	Shopify 的结账样式表。即使您有自己的样式表，也建议您不要删除，因为要替换默认样式表需要大量工作。	否
checkout_scripts	Shopify 的 JavaScript 文件	否
content_for_logo	店铺Logo，结账页面设置可以修改	否
breadcrumb	最后审核订单的步骤不显示面包屑	否
order_summary_toggle	显示和隐藏移动设备上的订单摘要所需的标记。	否
content_for_order_summary	内容摘要，包括项目、折扣、税金和总额。	否
alternative_payment_methods	可用的快递付款方式列表，如 PayPal。	否
content_for_footer	商店政策列表，如果列表为空，则为版权声明。	否
tracking_code	google,facebook等统计代码	否
checkout	checkout对象	否

注意事项
如果您没有在 checkout.liquid 模板中包含所需的对象，则无法使用代码编辑器或 Shopify CLI 等工具保存或更新文件。

访问 checkout.liquid

要启用或禁用对 checkout.liquid 的访问，Shopify Plus 商户必须联系支持人员。在请求访问 checkout.liquid 之前，您应该熟悉以下版本的 checkout 及其影响：

版本	描述
标准	默认结账。如果未启用对 checkout.liquid 的访问权限，则使用该版本，并在 Shopify 发布更新和结账功能时自动更新。
维护	当启用了checkout.liquid访问权限时使用。它是标准版本的稳定版本，在特定时间冻结。这意味着它不会自动更新。如果使用维护版，您可以通过以下方式访问更新和功能： 1.禁止访问 checkout.liquid，回到标准版。 2.等待维护版升级，然后按照手动升级流程操作。

将checkout.liquid添加到你的主题

如果已经启用了访问checkout.liquid，那么您可以按照以下步骤，通过 Shopify 管理器中的代码编辑器将布局添加到主题中：

在 Shopify 管理页面，进入 “网上商店”>”主题”。
找到要编辑的主题，然后点击…> 编辑代码。
在 “布局 “目录中，单击 “添加新布局”。
在下拉列表中，选择 checkout，然后单击创建布局。

现在你应该能看到 checkout.liquid 在Layout目录中列出。

自定义结账页面内容

你不能编辑任何checkout对象生成的内容，无论是必填还是可选内容。唯一的例外是翻译设置、主题编辑器设置以及 Shopify 管理后台中的某些选项。

如果您需要自定义由结账对象输出的内容，那么您需要在渲染后使用 JavaScript 来更改内容。

步骤标识

结账全部在一个页面上进行，这意味着无论客户处于流程的哪个步骤，URL 都是相同的。为此，您可以使用以下 JavaScript 对象来识别客户在结账流程中所处的位置。

提示
可使用浏览器的开发工具查看上述 JavaScript 对象。

Shopify.Checkout.step

用于显示客户处于结账的哪个步骤。它返回以下结果之一：

contact_information
shipping_method
payment_method
processing – 这一步介于 payment_method 和 thank_you 页面之间。
review – 这一步是在管理后台可选的.

注意事项
此对象仅在客户首次访问 “订单状态 “页面时定义。

Shopify.Checkout.page

显示客户所在页面类型的对象。它返回以下结果之一：

show – 结账流程各步骤的页面。
stock_problems – 如果购物车中的商品存在库存问题，则显示该页面。
processing – 处理付款时显示的页面。
forward – 来自 PayPal 或其他第三方付款的页面。
thank_you

备注
该对象仅在客户首次访问订单状态页面时定义。

Shopify.Checkout.OrderStatus

用于向订单状态页面添加内容的对象。它还可以帮助确定客户是在 “感谢 “页面还是在 “订单状态 “页面。

订单状态页面通常被视为结账页面。然而，客户第一次访问该页面时，它被视为 “感谢 “页面，此时可以通过 Shopify.Checkout.step 和 Shopify.Checkout.page 对象来定义。

如果客户再次访问或重新加载页面，结账将被转换为订单，页面将加载为订单状态页面，其中 Shopify.Checkout.step 和 Shopify.Checkout.page 对象未定义，Shopify.Checkout.OrderStatus 者被定义。

页面事件

所有结账步骤都托管在一个 URL 路径上，内容根据当前步骤动态加载。在此过程中会触发两个主要页面事件：

page:load
page:change

page:load

加载每个步骤的内容时会触发 page:load 事件。这是在加载时向页面添加内容时应使用的默认事件。

$(document).on('page:load', function() {
  // Add content
});

page:change

当客户处于同一结账步骤，但部分内容发生变化时，会触发 page:change 事件。例如，提交折扣表单时会触发该事件。

如果只使用 page:load 将内容添加到文档对象模型 (DOM)，就有可能被 page:change 事件覆盖。为避免这一问题，在添加内容时应同时关注这两个事件。

$(document).on("page:load page:change", function() {
  // Add content
});

Checkout jQuery

结账包含自己版本的 jQuery，可以使用 Checkout.$访问。

(function($) {
  $(document).on("page:load page:change", function() {
    // Add your customizations
  });
})(Checkout.$);

注意
结账的 jQuery 版本并不总是最新版本。如果您需要使用更新版 jQuery 的任何功能，则需要特别将其包含在内。

获取结账属性

获取结账属性的方法与获取购物车属性的方法类似。

要捕获结账属性，请在主结账表单中加入一个属性为 name=”checkout[attributes][attribute-name]”的input，其中 attribute-name 是所需属性的名称。

<input type="text" name="checkout[attributes][custom attribute]">

提示
如果要在付款方式步骤中收集属性，则应在允许订单继续之前为其填充占位符值。如果属性值为空白，则会导致错误，提示结账已更改。

请注意，获取结账属性将删除任何现有购物车属性。要了解如何避免这个问题，请参阅下面的保留购物车属性。

保存购物车属性

捕获结账属性时，可以使用包含购物车属性值的 checkout.attributes Liquid 对象保留任何购物车属性。你可以循环遍历属性，将它们添加为结账属性输入，其名称和值由现有属性数据定义。

此代码段应包含在 JavaScript 函数中，以便将属性输入放在主表单中。

{% for attribute in checkout.attributes %}
  <input type=hidden name="checkout[attributes][{{ attribute.first }}]" value="{{ attribute.last  }}">
{% endfor %}

目录

位置