在订单状态页面上使用Liquid_极简慕枫

电子商务体验中经常被忽视的部分是订单状态页面，它提供了与客户联系的独特机会。虽然销售已经在客户登陆此页面时进行，但它仍然是客户旅程中的关键一步，也是客户品牌的关键接触点。武汉网站制作

订单状态页面非常重要，不仅因为它允许客户感谢客户购买，还因为它可以告知客户交货方式，时间以及如果他们对订单有疑问，可以联系谁。精明的开发人员将能够优化此页面，为客户提供难忘的体验。

由于订单状态页面与主题无关，因此在客户的商店工作时很容易错过。虽然此页面存在一些限制，但仔细使用Liquid和JavaScript，可以扩展页面的功能并显示个性化内容。

在附加脚本框中使用Liquid将允许您访问结帐并购买Liquid对象。这使客户能够在订单状态页面上显示特定消息，并在购买后通知或支持其客户。

在本文中，我将演示定制此页面的实用方法，为客户提供基于他们购买的产品或发货地点的个性化体验。我还将向您展示订单状态页面如何提高客户分析的准确性。

武汉网站制作

附加脚本框

自定义订单状态页面的第一步是了解如何将代码注入此非主题页面。附加脚本框是自定义订单状态页面的关键组件。这可以在管理员的“结帐”部分找到。此框用于将代码插入到订单状态页面的模板中。

附加脚本框的最常见用途是添加脚本以进行转换跟踪，但可以通过在此框中输入代码将其他功能添加到订单状态页面。您可以添加以下任何内容：

• HTML

• 液体

• JavaScript的

重要的是要注意Shopify将自动验证附加脚本框中的Liquid代码，因此如果出现Liquid错误，则您的更改将无法保存。但是，在添加HTML或JavaScript之前，强烈建议您在添加代码之前对其进行验证和测试，以确保结帐功能正常。

Jason Bowman在一篇关于将Javascript添加到Shopify Checkout的博客文章中回应了这个建议。

“如果你没有痛苦地意识到如何去做，以及它带来的潜在风险，请不要尝试使用这种方法为你的Shopify结账添加JavaScript，”他写道。

但是，如果您熟悉JavaScript，则可以根据客户的要求进行一系列自定义。

在这些教程中，我们将在附加脚本框中使用Shopify的订单状态JavaScript资产。这允许开发人员根据Liquid逻辑语句生成内容框。

在订单状态页面上显示特定产品的折扣代码

附加脚本框最有用的应用之一是根据订单的特定条件显示特定内容。增加这种个性化水平可以使销售流程更加专业化，意外的善意姿态可以鼓励重复销售。

例如，客户可能希望在购买特定产品后提供折扣代码。使用JavaScript和Liquid逻辑，可以在购买特定产品时输出特定内容。

为了达到这个效果，我们需要创建一个脚本，在触发特定参数时生成内容框。在这种情况下，参数将是产品标题，脚本可能如下所示：

在开始<script>标记之后，我们可以看到for标记将根据结账的行项重复执行后续代码块。这将迭代我们checkout.line_items以查看特殊产品是否在订单中。

使用控制流标签line.title attribute，我们正在寻找一个标题为“红色运动T恤”的产品。如果结帐中的产品与此匹配，则使用Shopify.Checkout.OrderStatusJavaScript资产生成内容框。

我们可以在此内容框中应用一些基本的HTML格式，并且我使用<h2>标记来应用标题以及段落标记。在这个例子中，我添加了一个带折扣代码的友好消息，但这可以根据客户的要求进行个性化。

当客户结账时使用此Red Sport Tee产品时，我们自定义的订单状态页面将如下所示：

也可以使用不同的Liquid对象和属性为不同的情况设置类似的条件内容。例如，如果您的客户提供店内收款，您可以在订单状态页面上显示零售地址，但前提是他们选择了本地提货选项。

在这种情况下，您可以使用checkout.shipping_method.title带有控制流标记的属性，根据所选的送货方式输出内容。我们的帮助文档显示了如何设置它。

检查客户的独特业务模式是值得的，以查看您可以添加到订单状态页面的哪种内容来支持客户的业务。通过在此处使用正确的副本，您可以在销售的最后一点建立客户的品牌。

根据位置在订单状态页面上显示内容

有时，客户端将具有特定于客户所在位置的消息。例如，您的客户可能在多个国家/地区或城市拥有实际位置，并希望邀请附近的客户访问其商店。

使用Liquid属性，我们可以识别在结账过程中选择的国家，甚至是州。通过这些属性，我们可以设置条件Liquid标签，以在客户选择特定位置时输出特定于位置的内容。

这里的一个关键属性是checkout.shipping_address.country_code输出客户在结账时选择运送的国家/地区。该属性的有趣之处在于它以ISO 3166-2标准格式返回地址的国家/地区字段的值。这些代码都是两个字母，每个国家/地区的代码都可以在ISO网站上找到。

使用这些代码可以节省时间并避免错误，因为我们可以使用世界各地都能理解的字母组合，而不是根据所使用的语言改变国家名称。

另一个关键属性是checkout.shipping_address.province_code，它将允许我们识别州或省。要查找用于美国州的邮政缩写，您可以从USPS 查看此州缩写列表。

同样，我们将使用订单状态JavaScript资产生成内容框，以及我们的Liquid控制流标记和属性。作为一个例子，我创建了两个场景，在这两个场景中，内容框将出现在订单状态页面上。

在第一个功能中，如果客户选择美国作为其运输国家而选择纽约作为要运送的州，则内容框将显示有关第五大道上实体店的消息。通过将国家代码和州代码的两个Liquid属性组合在一起，我们可以非常精确地使用本地化消息传递。

在第二个函数中，我们使用elsif扩展此脚本并创建其他条件。如果客户选择英国，则会在不同内容中加载指向地图的链接，客户可以在该地图中找到最近的商店。

另请注意，英国的ISO代码为“GB”。务必仔细检查ISO网站，确保您拥有为您创建自定义消息所需的国家/地区的正确ISO代码。

现在，当客户签出并选择纽约地址时，他们将看到以下消息：

如果他们选择在英国的任何地方，他们会看到这样的信息：

如您所见，在创建更复杂的功能时可以使用Liquid的控制流标签。如果您的客户需要，可以根据需要为多个国家/地区或州创建不同的消息。

武汉网站制作

使用Liquid仅在订单状态页面上运行一次脚本

最终的教程不会使订单状态页面显示任何不同，但它会提高客户的商店分析的准确性。它还演示了添加Liquid时附加脚本框的多功能性。

通常，客户可以重新访问订单状态页面以检查其订单或运输详细信息。如果您的客户正在运行销售转化跟踪脚本，则回访可能会被视为其分析中的第二次销售。

为了解决这个问题，我们可以使用带有first_time_accessed转换跟踪脚本周围属性的Liquid标签。通过first_time_accessed内部的液体逻辑声明，Shopify将仅在客户第一次看到其订单状态页面时运行您的脚本。

这可能会出现在附加脚本框中，如下所示：

如果您希望脚本仅在第一次访问订单状态页面时运行，请将其粘贴到{% if first_time_accessed %}和{% endif %}标签之间。如果您希望每次访问订单状态页面时都运行脚本，请将其粘贴到{% endif %}标记下方。

此属性的另一个应用可能是仅在返回订单状态页面时运行脚本。客户重新访问此页面的主要原因之一是检查其运输详细信息。如果内容可以加载一个选项，以便在遇到任何问题时与您的客户联系，这可以改善售后客户体验。

这可以通过简单地创建一个unlessLiquid逻辑语句来实现，该语句可能如下所示：

添加完成后，客户在重新访问订单状态页面时会看到此消息：

另外一条消息可以让客户放心，这种对客户服务的关注可能会导致重复购买。如您所见，first_time_accessedLiquid属性可以在订单状态页面上以创造性的方式使用。

小心定制

附加脚本框是销售流程中的强大工具，仔细使用Liquid可以改善客户的商店。但是，在将代码插入订单状态页面时，在将其添加到结帐之前验证HTML和JavaScript非常重要。

只要代码经过测试并确认为安全，您就可以为客户的客户创造难忘的体验。希望在本文的帮助下，使用此功能会更容易一些。

武汉网站制作