ShopifyのDebutテーマで複数のフォームのエラーを抑制する

タイトルではわかりにくいですが、デフォルトの挙動ではあまりよろしくない見た目になる部分を修正します。

前提

• ShopifyのDebutテーマ使用(Debut以外でも使用可能)
• コンタクトページでフッターにNewslatterがある

上記の前提で以下の問題が起こります。

• コンタクトフォームにエラーがあった場合、フッターのNewsletterの方にもエラーが表示されてしまう

今回はこの問題の解決を意図しています。
ただしNewsletterに限定しているわけではなく、他のShopifyのformが複数存在する場面でも使える想定です。

サンプルコード

まずsection/footer.liquidで下記を探します。

{% form 'customer', id: formId, novalidate: 'novalidate' %}

上記に以下のようなhidden属性のinputタグを追加します。

{% form 'customer', id: formId, novalidate: 'novalidate' %}
<input type="hidden" name="contact[form-id]" value="{{formId}}">

続いて以下を探します。

{% if form.errors contains 'email' %}

上記を以下のように書き換えます。

{% if form.errors contains 'email' and form.form-id == formId %}

概要

1. hidden属性でフォームごとにhiddenで固有のキー(form-id)を追加
2. エラー時にform-idがformオブジェクトに入って返される
3. form.errorsにemailが含まれており、かつ、form-idの値と該当のフォームのformIdが同じかを判定
4. 判定が真なら、設置されたフォームとエラーを出したフォームが一致しているとみなして、エラーを出力する
5. 判定が偽なら、設置されたフォームとエラーを出したフォームが一致していないとみなして、エラーを出力しない

hiddenに入れる値はフォームが特定できればなんでもよいので、別の値を設定することも可能です。

また、赤くなるなどのエラー用装飾を防ぐには、同様にform-Idの値を比較する条件を追加することで分岐させて対応します。

結び

Newsletterだけではなく、Shopifyのフォームであれば同様に処置できると思います。

ただし、あまりちゃんとしたチェックはしていないので動作がおかしい場合は仕様を控えてください。