自定义checkout.liquid

如果您使用的是 Shopify Plus，则可以访问 checkout.liquid 布局。但是，如果您对该布局进行了更改，那么每当 Shopify 发布升级版本时，您就需要手动升级它。

文档对象模型（DOM）依赖

在对checkout页面修改时，最大的考虑因素之一是您的代码对 DOM 的依赖程度。当 Shopify 发布checkout升级时，checkout.liquid 中的 Liquid drop 输出内容，有时候checkout.liquid 本身都会更新。这意味着，如果您的定制依赖于这些内容，那么它们可能会在新的升级中被破坏。最好尽量减少 DOM 依赖性。

添加自定义代码

在进行更改时，应将特定自定义的所有相关代码保存在一个片段中。这样可以降低与其他代码发生冲突的风险，而且通常会使代码更易于阅读。

此外，在进行任何更改时，建议在更改的开头加上注释，注明更改者和更改时间。

{% comment %} Added by Name from Company on September 21 2018 {% endcomment %}

添加 killswitches

在自定义 checkout.liquid 时，您更有可能在结账过程中遇到问题或冲突，可能会对网店的销售有影响，因此最好将您的自定义包在 killswitch（主题设置）中。这样您就可以暂时禁用自定义功能，使结账快速运行，从而有时间排除故障。

一般自定义方法

一般来说，自定义方法如下：

• 创建killswitch主题设置
• 创建一个片段来托管您的自定义设置
• 在 checkout.liquid 中包含由 killswitch 包含的片段

以下示例展示了一个 killswitch 主题设置和一个基于 killswitch 条件的代码段：

config/settings_schema.json

{
  "type": "checkbox",
  "id": "checkout_customization",
  "label": "Enables a checkout customization"
},

layout/checkout.liquid

{% comment %}Added by Name at Company on September 21, 2018{% endcomment %}
{% if settings.checkout_customization %}
{% render 'checkout-customization' %}
{% endif %}

在您的代码段中，您可以执行以下操作：

1.使用结账版本的 jQuery

2.留意 page:load 和 page:change 事件，设置自定义功能

3.通过引用以下对象，将您的自定义设置扩展到相应的步骤或页面：

• Shopify.Checkout.step
• Shopify.Checkout.page
• Shopify.Checkout.OrderStatus

(function($) {
$(document).on("page:load page:change", function() {
if (Shopify.Checkout.step === "contact_information") {
// Add content
}
});
})(Checkout.$);

表单提交

许多结账自定义功能需要在允许客户进入下一步之前验证数据。由于主表单提交按钮的功能，最简单的方法是注意该按钮上的点击事件，而不是表单上的提交字段。您还应注意回车键的使用，并将该功能重新定向到提交按钮上的点击事件中。

(function($) {
  $(document).on("page:load page:change", function() {
    if (Shopify.Checkout.step === "contact_information") {
      $("DEFINE_YOUR_SUBMIT_BUTTON_SELECTOR").on("click", function(e) {
        e.preventDefault();

        if (data is valid) {
          $("DEFINE_YOUR_MAIN_FORM_SELECTOR").submit();
        } else {
          // Show an error
        }
      });

      $("DEFINE_YOUR_MAIN_FORM_SELECTOR").on("keyup", function(e) {
        if (e.keycode === 13) {
          e.preventDefault();
          $("DEFINE_YOUR_SUBMIT_BUTTON_SELECTOR").trigger("click");
        }
      });
    }
  });
})(Checkout.$);

常见自定义

以下示例是常见的定制.

阻止在地址字段中使用特定字符

要阻止在地址字段中使用特定字符，需要考虑以下情况：

• 相关地址字段的更新，如blur事件。
• 表单提交事件。

针对上述每种情况，执行验证。例如，可以用正则表达式（Regex）比较任何字段值。如果数据无效，就会显示错误并阻止表单提交。

限制地址字段中的字符数

要限制地址字段中的字符数，请为任何相关字段添加 maxlength 属性，如下例所示。

$("DEFINE_YOUR_FIELD_SELECTOR").attr("maxlength", your_value);

maxlength 属性只能阻止输入更多字符。为确保良好的用户体验，您应添加一条提示，在客户达到字符限制时显示。

添加必填服务条款复选框

要添加同意服务条款的必选复选框，可在页面上创建一个复选框，然后跟踪表单提交事件，在允许客户继续之前检查复选框是否已被选中。最好还能使用结账属性来保存复选框的值。