【メタシンク】会員登録フォームに利用規約の全文をスクロール表示する設定例

Shopifyアプリ「メタシンク（AL CustomerMetaSync）」で作った会員登録フォームに、利用規約の全文をスクロール表示する設定例です。メタシンクの会員登録フォームでは「利用規約に同意する」のチェックボックスは出せますが、規約の本文はフォーム上に表示されません。従来の会員登録ページで規約を枠の中に載せていたストアが、新しいお客様アカウントへ移行するときにも同じ見せ方を保てます。

なお、新しいお客様アカウントでは、ログイン・アカウント作成の画面に「続行すると、利用規約に同意したことになります」という一文が、利用規約へのリンク付きで表示されます。それでもあえて登録フォームに全文を載せるのは、リンクを開かないと本文を目にしないまま「同意したことになる」形ではなく、お客様が内容をその場で確かめたうえで、自分でチェックを入れて同意する形にしたいためです。会員規約やポイント・定期購入の条件など、登録のときにきちんと読んでもらいたい規約があるストアに向いています。

メタシンクには「カスタムCSSのパス」「カスタムJSのパス」という設定項目があり、テーマのassetsディレクトリに置いたファイルを登録フォームに読み込ませることができます。今回もこの仕組みを使うため、アプリ本体には一切手を加えません。

仕組み：同意項目をラベルの文字で見つけ、すぐ後ろに差し込む

メタシンクが描画するフォームでは、ラベルを含む項目全体が「alcms-field」というクラスのdivでラップされています。チェックボックスにはメタフィールドのような決まったidが無いため、「利用規約に同意」というラベルの文字を目印にして項目を特定し、その直後に補足文と規約ボックスを差し込みます。

フォームは後から描画されることがあるため、ページの変化を最大15秒監視して、フォームが現れた時点で差し込みます。万一差し込めなかった場合は、利用規約ページへのリンクだけでも表示し、規約を確認する手段が無いまま同意を求める状態にならないようにしています。

設定手順

◆1. テーマにJS/CSSファイルを追加
・コードエディタで assets ディレクトリに onboarding.js と onboarding.css を新規作成し、コードを貼り付けます（コードはご購入後に表示されます）
・onboarding.js の先頭にある設定部の TERMS_HTML を、ストアの利用規約の本文に差し替えます。TERMS_URL には、ストアの利用規約ページのURLを「https://」から始まる形で入れます

◆2. メタシンク管理画面でパスを指定
・会員登録フォームの設定画面で「カスタムJSのパス」に onboarding.js、「カスタムCSSのパス」に onboarding.css を入力して保存します（assetsからの相対パスで指定します）

カスタマイズのポイント

コード先頭の設定部だけを書き換えれば、他のストアにもそのまま流用できます。

・AGREE_LABEL：同意のチェックボックスのラベル（部分一致）。ラベルの文言を変えている場合は合わせます
・NOTE_TEXT：規約ボックスの上に出す補足文
・TERMS_HTML：利用規約の本文（HTML）
・TERMS_URL：本文を出せなかったときに表示するリンク先
・規約ボックスの高さは onboarding.css の max-height（初期値260px）で変えられます

注意点

・規約の本文はJSの中に直接書いています。規約を改定したときは、ストアの利用規約ページとこのJSの両方を更新してください。片方だけ直すと内容が食い違います
・規約にURLがそのまま書かれていると、スマートフォンで枠から横にはみ出しがちです。CSSで折り返す指定を入れているので、横スクロールは出ません。Wordなどから貼り付けた本文に残るインデント指定も、枠からはみ出さないよう抑えています
・メタシンクに読み込ませられるJS/CSSはそれぞれ1ファイルです。追加入力項目をボタンで展開するTIPSなどの onboarding.js をすでにお使いの場合は、今回のコードを既存のファイルの末尾に追記してください（コードは独立しているので、追記しても互いに干渉しません）
・JS/CSSが反映されない場合は、メタシンク管理画面でパスをもう一度保存し直すと読み込まれます

メタシンクの会員登録フォームのカスタマイズは、追加入力項目をボタンで展開するまで隠す方法と、プルダウンの選択に応じて追加入力項目を表示する方法も紹介しています。