Liquidを使用したShopifyのフォーム作成について

Shopifyでは多くのタッチポイントでフォームが使われています。カスタマー登録からブログへのコメント、さらにマーチャントへの連絡や、商品バリエーションをカートに追加する場面にまで、 フォームは使用されています。クライアントとユーザーをつなぐうえでフォームが果たす役割は大きいため、このコンポーネントを堅実でユーザーフレンドリーにしておくことが重要です。

Shopifyメタフィールドのようなダイナミックなコンポーネントと比べると、フォームの重要性は見過ごされやすいものです。しかしお客さまとストアとのインタラクションな機能面において、フォームは重要な役割を占めます。

フォーム作成は反復的な要素が強く、ゼロから作ろうとするとミスも起こりがちです。幸いなことに、フォーム作成を安全かつ楽にしてくれるLiquid要素がいろいろあって、正しいエンドポイントへのデータ転送に必要なコードを自動で生成できます。

今回の記事では、Liquidを活用してShopifyでのフォーム作成プロセスを簡素化する方法をご紹介します。この方法でインプット要素を生成し、エラーを特定し、カスタマーへのフィードバックを出力できます。また、さまざまなフォームを作成する際に開発者がアクセスできるフォームのタイプも見ていきます。 

formタグとは何か？

Liquidのformタグは、入力データを特定のエンドポイントに送信するためのインプットと一緒に、HTMLの<form>要素を生成します。このタグを使用することで、Shopifyページにさまざまなタイプのフォームを構築する際、アクションや値の割り当てを自動化できます。

formタグを使うと、開発者は素早く信頼できる方法でプロジェクトにフォームを追加でき、アクションを記述するためのコードやエンドポイントのターゲティングを心配しなくて済みます。これにより、ログインやブログコメント、マーチャントへの連絡などのフォーム作成時にヒューマンエラーの可能性を削減し、時間が節約できます。

特定タイプのformタグを使うと、送信データへのアクションを決定するためにエンドポイントで使用されるインプット要素と一緒に、HTMLの<form>要素が作成されます。実装されるフォームのタイプに応じて、要求されるアクションを実行するためのさまざまなセットのインプットが生成されることになります。

自動生成されるインプットフィールドは、Shopifyサーバーのエンドポイントとつながることを目的としたもので、formタグによって作成されるユーザーが接することのできるインプットフィールドはありません。つまり、開発者はマニュアルでカスタマーメールやパスワードのインプットフィールドを追加することになり、タグはShopifyサーバーへのデータ送信を受け持ちます。

formタグの例

ここまで見てきたように、formタグはHTMLのフォームを作成する確かな代替策です。たとえば、ログインフォームを作成する場合、formタグを使わないと、以下のようなコードが必要になるでしょう。

<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/login" id="customer_login" method="post">

  <input name="form_type" type="hidden" value="customer_login" />

  <input name="utf8" type="hidden" value="✓" />

  <!--インプットフィールドとラベルのコード-->

</form>

formタグを使うと、上記のコードが簡単なマークアップになります。

{% form 'customer_login' %}

  <!--インプットフィールドとラベルのコード-->

{% endform %}

この例からわかるのは、formタグに「タイプ」が含まれることです。上記の例では、customer_loginが該当します。<form> と<input>要素を生成する13種類のフォームタイプがあり、それぞれ個別の目的をもっています。現在使用可能なタイプについては、後ほど詳しく見ていきます。

formタグは、エンドポイントにデータを送信するのに必要な<form> と<input>を生成しますが、ユーザーが入力するためのインプット要素を別に作成する必要があります。

たとえば、ログインフォームを機能させるためには、メールアドレスとパスワードを入力するフィールド、そして送信ボタンが必要です。これらがformタグに追加されると、以下のようになります。

このコードをフロントエンド側、オンラインストアで見た場合は、こうなります。

実際のログインフォームの例は、Liquidのコードサンプルでご確認いただけます。これらをあなたが作成する独自テーマの基盤として利用することも可能です。

追加のパラメータ

特定オブジェクトをターゲットにするにあたり、formタグに追加パラメータが必要になることがあります。たとえば、ブログ記事へのコメントを送信するフォームには、タイプとしてnew_comment、さらにパラメータとしてarticleオブジェクトが要求されます。

{% form 'new_comment', article %}

  <!--インプットフィールドとラベルのコード-->

{% endform %}

出力はこのようになります。

<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments"

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

  <input name="form_type" type="hidden" value="new_comment" />

  <input name="utf8" type="hidden" value="✓" />

  <!--インプットフィールドとラベルのコード-->

</form>

この例では、パラメータのarticleが新規コメントを適切なブログ記事に結びつける役割を果たします。商品、顧客アドレス、新規コメントのフォームなどは、すべて追加パラメータを必要とします。

さまざまなLiquidフォームのタイプ

クライアントのストア内の特定タッチポイントやデータ送信に関して、13種類のさまざまなLiquidフォームタイプがあります。顧客登録の例で上述したように、フォームを生成するには、formタグにタイプが求められます。

定義済みのフォームタイプは以下のとおりです：

・activate_customer_password

・ contact

・ currency

・ customer

・ create_customer

・ customer_address

・ customer_login

・ guest_login

・ new_comment

・ product

・ recover_customer_password

・ reset_customer_password

・ storefront_password

これらのフォームの使用例や、必要となる追加パラメータの詳細は、開発ドキュメントで確認できます。

フォームで条件ロジックを使用する

ある種のフォームタイプには、パスワードのリセットや無効データのエラー表示など、追加機能が必要となる場合があります。間違ったメールアドレスが入力された場合にエラーメッセージを表示するといったケースがありますが、特定イベント発生時にコンテンツを表示するルールはコントロールフロータグを使って設定することができます。

Liquidオブジェクトのform.errorsとLiquidフィルターのdefault_errorsは、フォームによるデータ送信が成功しなかった場合にとても役立ちます。デフォルトのエラーメッセージが表示されるからです。

form.errorsオブジェクトは、フォーム送信が失敗したときに文字列の配列を返すか、出力をします。空欄またはエラーが含まれるフィールドに応じて、文字列が返されますが、可能性のある値は以下のようなものです。

・ author

・ body

・ email

・ form

このオブジェクトによって、正しく入力されていないフォームの箇所が特定でき、出力可能になります。ユーザーによるエラーの種類を表示したい場合は、手を加えてforループを設定できます。

{% for error in form.errors %}

  {{ error }}

{% endfor %}

上記の例では、もしユーザーが無効なメールアドレスを入力した場合、emailの値が出力されます。この出力内容とdefault_errorsフィルターを利用して、事前定義されたエラーメッセージを自動で生成可能になります。

default_errorsフィルターは、form.errorsオブジェクトによって返された文字列に応じて特定のメッセージを出力します。実例として、コントロールフロータグを使って{% form %}タグ内にifステートメントのフローを作成してみましょう。

{% if form.errors %}

  {{ form.errors | default_errors }}

{% endif %}

これで、ユーザーが無効なメールアドレスを入力した場合に、以下のメッセージが表示されることになります。

有効なメールアドレスを入力してください。

カスタムテーマにこうした条件ルールを付加することは、クライアントの顧客ユーザーが無効データを入力した際、適切なフィードバックを確認できるようにするためには必須です。Liquidをこのように有効活用すれば、わかりやすいエラーメッセージを適切なタイミングでユーザーに表示できます。

フォームと機能

Liquidオブジェクト、タグ、フィルターを組み合わせることで、確実なフォーム作成ができることがこれでわかったと思います。Shopifyでフォームを作成するときには、クライアントの要望に沿ってカスタムフィールドを追加したり、フォーム属性を修正したりして機能を拡張可能です。

関連するLiquid要素によってフォームを確実に安定させるには、フォームのデザインや構築においていくらか調整や修正が必要かもしれません。今回の記事を参考にして、Liquidがフォームやテーマプロジェクトを向上させる方法に慣れていただければ幸いです。