在Shopify上构建表单:如何使用液体为Shopify主题构建健壮的表单

如果您在Shopify上构建表单，那么您就会知道它们在Shopify商店的一系列接触点上使用，从客户注册到博客评论，到联系商家，甚至将产品变体添加到购物车中。由于表单在连接客户端和客户端方面承担了很多责任，因此这些组件的健壮性和用户友好性至关重要。

人们很容易忽视表单的重要性，而倾向于使用客户在线商店中更动态的组件，比如欧宝体育官网入口首页Shopify metafields。但就功能而言，表单在顾客与商店的互动中扮演着非常重要的角色。

“表单在顾客与商店的互动中扮演着非常重要的角色。”

创建表单通常是重复的，并且在从头开始构建表单时可能会出现错误。值得庆幸的是，有许多Liquid元素可以自动生成将数据传输到正确端点所需的代码，从而使处理表单变得更容易、更可靠。

在本文中，我们将介绍如何利用Liquid通过生成输入元素、识别错误和向客户输出反馈来简化在Shopify上构建表单的过程。我们还将了解开发人员在创建不同表单时可以访问哪些表单类型。

是什么?形式标签?

的形式Liquid标签生成HTML< >形式元素以及将提交的数据发送到特定端点所需的输入。当在Shopify页面上构建不同类型的表单时，使用此标记可以自动分配操作和值。

这形式标记允许开发人员快速可靠地将表单添加到他们的项目中，而不必编写完整的代码来描述要采取的操作，或者表单将针对哪个端点。这意味着在构建用于登录、评论博客文章和联系商家的表单时，它节省了时间，减少了人为错误的可能性。

当形式标记用于指定的类型，即HTML< >形式元素与输入元素一起创建，端点使用输入元素来决定如何处理提交的数据以及要采取的确切操作。根据所实现的表单类型，将生成一组不同的输入来执行所需的操作。

自动创建的输入字段旨在连接Shopify的服务器端点，并且没有由Shopify创建的输入字段形式用户将与之交互的标记。这意味着开发人员将手动添加客户电子邮件或密码的输入字段，而标签则负责将数据发送到Shopify的服务器。

你可能还喜欢:如何在Shopify收藏页面上显示价格范围。

的一个例子形式标签

正如我们所知，形式标记是在HTML中构建表单的更可靠的替代方法。例如，如果要创建客户登录表单，则不使用形式标记，您需要创建如下内容:

< !——输入字段和标签的代码——>
> < /形式

的形式标签可以用这个简化的标记处理上述所有代码:

{% form 'customer_login' %}
< !——输入字段和标签的代码——>
{% endform %}

从这个例子中我们可以看出形式标记还包括一个“类型”，在本例中为customer_login。有13种不同的表单类型产生特定的< >形式和<输入>每个特定用途的元素。稍后我们将查看当前可用的表单类型。

而形式标记确实创建了必要的< >形式和<输入>将数据发送到特定端点，我们需要创建您的客户的客户将与之交互的输入元素。

例如，要使客户登录表单具有功能，我们需要创建字段来输入电子邮件地址、密码和提交按钮。一旦这些加入到形式标签，它应该是这样的:

如果我们从在线商店的前端查看这个表单，我们应该看到:欧宝体育官网入口首页

您可以在我们的网站上查看客户登录表单的完整工作模型液体代码示例，甚至可以将其作为您自己的主题构建的基础。

额外的参数

在某些情况下，需要在形式标记以针对特定对象。例如，用于提交博客文章评论的表单需要的类型为new_comment并且需要一个article对象作为参数:

{%表单'new_comment'，文章%}
< !——输入字段和标签的代码——>
{% endform %}

这将输出到:

Class ="comment-form" id="article-10582441-comment-form" method="post">


< !——输入字段和标签的代码——>
> < /形式

在本例中，文章参数将允许表单将新评论与正确的博客文章关联。产品、客户地址和新文章评论的表单都需要额外的参数。

不同的液体形态类型

有13种不同的Liquid表单类型，用于客户与客户的商店交互或提交数据的特定接触点。正如我们从客户注册示例中看到的，要生成表单形式标记需要一个类型。

“有13种不同的Liquid表单类型，用于客户与客户的商店交互或提交数据的特定接触点。”

这些预定义的表单类型是:

• activate_customer_password
• 联系
• 货币
• 客户
• create_customer
• customer_address
• customer_login
• guest_login
• new_comment
• 产品
• recover_customer_password
• reset_customer_password
• storefront_password

中演示了每种形式的示例和任何额外所需的参数我们的帮助中心。

在表单中使用条件逻辑

某些类型的表单可能需要额外的功能，比如重置忘记的密码，或者在提交无效数据时显示错误。我们可以用控制流标签设置在特定事件发生时显示内容的规则，例如在错误输入电子邮件地址时显示错误消息。

液体物体form.errors液体过滤器default_errors在没有通过表单成功提交数据的情况下非常有用，因为它们允许您显示默认的错误消息。

的form.errors对象将在表单未成功提交时输出或返回字符串数组。返回的字符串取决于表单的哪些字段为空或包含错误。可能返回的值有:

• 作者
• 身体
• 电子邮件
• 形式

这个对象允许我们识别并输出表单的哪个部分没有正确输入。如果我们想显示客户犯了什么类型的错误，我们可以像这样设置一个迭代for循环:

{%表示表单中的错误。错误%}
{{错误}}
{% endfor %}

在上面的例子中，如果客户输入了无效的电子邮件地址，则值为电子邮件会输出。现在我们可以使用这个返回的输出并应用default_errors筛选器以自动生成预定义的错误消息。

的default_errors方法返回的字符串将返回一个特定的消息form.errors对象。为了在实践中看到这一点，我们将使用控制流标记来创建以下内容如果声明{% form %}标签:

{% if表单。错误%}
{{形式。错误| default_errors}}
{% endif %}

现在，如果用户输入了一个无效的电子邮件地址，他们将看到以下消息:

请输入有效的电子邮件地址。

将这些条件规则添加到自定义主题构建中对于确保客户的客户在输入无效数据时看到正确的反馈至关重要。通过这种方式，可以利用Liquid在适当的时间向客户的客户提供可见和特定的错误消息。

你可能还喜欢:如何自定义Shopify主题中的img元素。

形式与功能

现在您已经看到了如何将Liquid对象、标签和过滤器一起实现以创建健壮的表单，当您在Shopify上构建表单时，您可以扩展该功能添加自定义字段根据客户的要求，或者修改表单属性。

无论您如何调整或迭代如何构建和设计表单，使用相关的Liquid元素都将确保表单的健壮性和一致性。希望在本文的帮助下，您将更加熟悉Liquid如何改进表单和主题项目。

你是如何在你的项目中使用表单的?请在下面的评论中告诉我们!