Shopify のテーマを編集して会員登録画面のフォーム項目を増やす
こんにちは、 Gaji-Labo アシスタントエンジニアの石垣です。
今回は Shopify のテーマを編集し、会員登録画面のフォーム項目を増やす方法についてまとめたいと思います。
Shopify Theme Kit の使用が前提となりますので、こちらの記事も見ていただけると幸いです。
Shopify の会員登録画面について
Shopify にはデフォルトで会員管理機能が備わっており、設定の「チェックアウト」から顧客アカウントを有効にすることでサイト側でも会員登録・ログインなどの機能を使うことができます。
会員登録画面には、デフォルトでは以下の項目のフォームが表示されています。
- 名
- 姓
- メールアドレス
- パスワード
この項目を編集には、テーマファイルを編集することになります。
テーマファイルの編集方法
会員登録画面の編集を行うには、テーマファイル内の templates/customers/register.liquid を開き、以下の部分を編集します。今回は例としてデフォルトテーマの Debut のコードを編集しています。
{% form 'create_customer', id: formId, novalidate: 'novalidate' %}
{% include 'form-status', form: form, form_id: formId %}
<label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
<input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">
<label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
<input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">
...
{% endform %}既に入っている他のフォームを元に、以下のように追加します。
{% form 'create_customer', id: formId, novalidate: 'novalidate' %}
...
<label for="{{ formId }}-Example">サンプル項目</label>
<input type="text" name="customer[note][example]" id="{{ formId }}-Example" {% if form.example %}value="{{ form.example }}"{% endif %}>
<label for="{{ formId }}-Example2">サンプル項目2</label>
<input type="text" name="customer[note][example2]" id="{{ formId }}-Example2" {% if form.example2 %}value="{{ form.example2 }}"{% endif %}>
{% endform %}注意点として、追加した input 要素の name は必ず customer[note][(項目名)] の形式とします。これは追加した項目の値は「顧客メモ」として送信される必要があるためです。
以上のように編集し、テーマのデプロイを行うと、追加した項目が表示されます。
画面側で追加したフォームのデータは、顧客管理画面の「顧客メモ」に表示されます。
公式のドキュメントに追加できるフォームの種類がありますのでそちらもご覧ください。
まとめ
今回は Shopify の会員登録画面のフォーム項目を増やす方法についてまとめました。
管理画面とテーマを行き来して設定することなく、テーマファイルにフォームを編集するだけでフォーム追加とデータの受け渡しが簡単に行えるので、とても分かりやすく拡張しやすいと感じました。
Shopify テーマ作成の参考にしていただけたらと思います。
開発のお悩み、フロントエンドから解決しませんか？
あなたのチームのお悩みはなんですか？
「バックエンドエンジニアにフロントエンドまで任せてしまっている」
「デザイナーに主業務以外も任せてしまっている」
「すべての手が足りず細かいことまで手が回らない」
役割や領域を適切に捉えてカバーし、チーム全体の生産性と品質をアップするお手伝いをします。
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にお声がけください。
オンラインでのヒアリングとフルリモートでのプロセス支援に対応しています。
リモートワーク対応のパートナーをお探しの場合もぜひ弊社にお問い合わせください！
お悩み相談はこちらから！
