標題の件。
Shopifyテーマの「Showcase」をカスタマイズ。
有料テーマの中では「Icon」と並んでよくクライアントが使っているイメージがある。（よく使われているテーマについて興味がある方は「実案件でよく使う！Shopify無料テーマ＆有料テーマ5」の記事もぜひご参照ください。）
Showcaseでの制作に話を戻す。
既に公開済みのサイトだったのだが、クライアントより追加でカスタマイズを依頼された。
内容としては、
「ユーザーが会員登録したのと同時に、住所登録もさせたい」
とのことであった。
Shopifyにはデフォルトで会員登録機能がついているが、この会員登録は「メールアドレス」「パスワード」のみを入れるという非常にシンプルなもの。
住所を登録するには、①会員登録 → ②マイページへ移動 → ③住所を追加ボタン押下 → ④住所登録フォームに住所を入力 という手順を踏む必要がある。
クライアント曰く、「会員登録後にマイページに進む、というのはユーザーにとって分かりづらい。なので会員登録後にすぐに住所登録できるようにしてほしい」とのことだった。
確かに言われてみれば、である。僕はShopifyサイトを何個も作っているから「どのタイミングで」「どのページで」住所登録をすればいいのかが頭に入ってしまっていたため盲点だったが、ユーザー的にはこの仕様は確かに分かりづらい。
なので、少しテーマをカスタマイズ＆固定ページを増やして対応を実施した。
【実現する顧客フロー】
今回のカスタマイズで実現する導線は、
①メアド・パスワードで会員登録
②会員登録と同時に住所登録ページへ遷移
③住所を登録フォームに入力
④完了したら、完了（＆サンクス）ページへ遷移
という導線だ。
手順その１ まず、新規住所登録用のページを作成する
まず、新規住所登録に特化したページを作成する。上記の③にあたる箇所を先に作る。
コード編集画面で、templateディレクトリで新しいpage用のliquidファイルを作る。今回は仮に「page.address-new.liquid」とする。
内容は、こんな感じ。
page.address-new.liquid
<div class="central rte">
<div id="admin_header">
<h1 class="h2 feature-header" data-cc-animate>{{ 'customer.addresses.title' | t }}登録</h1>
<div class="action_top" data-cc-animate data-cc-animate-delay="0.2s">
</div>
</div>
<div id="add_address" class="customer_address edit_address align-center">
{% form 'customer_address', customer.new_address %}
<h4 id="add_address_title">{{ 'customer.addresses.add_new' | t }}</h4>
<table class="customer_address_table">
<tr>
<td class="label"><label for="address_last_name_new">{{ 'customer.addresses.last_name' | t }}</label></td>
<td class="value"><input type="text" id="address_last_name_new" class="address_form" name="address[last_name]" value="{{form.last_name}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_first_name_new">{{ 'customer.addresses.first_name' | t }}</label></td>
<td class="value"><input type="text" id="address_first_name_new" class="address_form" name="address[first_name]" value="{{form.first_name}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_last_name_kana_new">セイ</label></td>
<td class="value"><input type="text" id="address_last_name_new" class="address_form" name="address[note][last_name_kana]" value="" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_first_name_kana_new">メイ</label></td>
<td class="value"><input type="text" id="address_first_name_new" class="address_form" name="address[note][first_name_kana]" value="" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_company_new">{{ 'customer.addresses.company' | t }}</label></td>
<td class="value"><input type="text" id="address_company_new" class="address_form" name="address[company]" value="{{form.company}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_country_new">{{ 'customer.addresses.country' | t }}</label></td>
<td class="value">
<select id="address_country_new" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
</td>
</tr>
<tr>
<td class="label"><label for="address_zip_new">{{ 'customer.addresses.zip' | t }}</label></td>
<td class="value"><input type="text" id="address_zip_new" class="address_form" name="address[zip]" value="{{form.zip}}" size="40" onKeyUp="AjaxZip3.zip2addr(this,'','address[province]','address[city]', 'address[address1]');" /></td>
</tr>
<tr id="address_province_container_new" style="display: none">
<td class="label"><label for="address_province_new">{{ 'customer.addresses.province' | t }}</label></td>
<td class="value">
<select id="address_province_new" class="address_form" name="address[province]" data-default="{{form.province}}"></select>
</td>
</tr>
<tr>
<td class="label"><label for="address_city_new">{{ 'customer.addresses.city' | t }}</label></td>
<td class="value"><input type="text" id="address_city_new" class="address_form" name="address[city]" value="{{form.city}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_address1_new">{{ 'customer.addresses.address1' | t }}</label></td>
<td class="value"><input type="text" id="address_address1_new" class="address_form" name="address[address1]" value="{{form.address1}}" size="40" /></td>
</tr>
<tr style="display:none;">
<td class="label"><label for="address_address2_new">{{ 'customer.addresses.address2' | t }}</label></td>
<td class="value"><input type="text" id="address_address2_new" class="address_form" name="address[address2]" value="{{form.address2}}" size="40" /></td>
</tr>
<tr>
<td class="label"><label for="address_phone_new">{{ 'customer.addresses.phone' | t }}</label></td>
<td class="value"><input type="text" id="address_phone_new" class="address_form" name="address[phone]" value="{{form.phone}}" size="40" /></td>
</tr>
<tr>
<td class="label"></td>
<td class="value"><label>{{ form.set_as_default_checkbox }} {{ 'customer.addresses.set_default' | t }}</label></td>
</tr>
</table>
<div class="action_bottom">
<p>
<input type="submit" value="{{ 'customer.addresses.add' | t | escape }}" />
</p>
</div>
{% endform %}
</div>
<script src="{{ 'shopify_common.js' | shopify_asset_url }}"></script>基本的には、デフォルトで存在する/template/customers/addresses.liquidの中の「{% form ‘customer_address’, customer.new_address %}」〜「{% endform %}」をコピペしている。
一つカスタマイズしていることとしては、「キャンセルボタン（<span class=”note”><a href=”#” onclick=”$(‘#add_address’).toggle(); return false;”>{{ ‘customer.addresses.cancel’ | t }}</a></span>）」は無くしていることくらいか。（ここでユーザーに登録をキャンセルさせたくないため）
手順その２ 次に、完了（サンクス）ページを作成する
次に、住所登録完了後に遷移させたいページ（完了ページ）を作成する。
今回は仮に「/pages/register_completed」を完了ページのURLとした。
僕は新規住所登録ページと同様、コード編集画面→templateディレクトリで新しいpage用のliquidファイル（register_completed.liquid）を作る という流れで作ったが、
このページの内容はとりあえず、「会員登録が完了したよ、ありがとね」っていう表示がされる固定ページであれば作り方はなんでも良いので、作り方は自由です。（Shopify 固定ページ 作成 で色々出てくると思います）
手順その３ 会員登録→住所登録ページへ遷移するためにjsで一工夫する
手順その２までで、とりあえず顧客に表示させたいオリジナルなページ類は作成完了となる。
が、このままではもちろんこのページに顧客は辿り着けない。なのでjsで一工夫。
会員登録フォームを送信したら、住所登録ページへ遷移する（冒頭記述の実現フローでいう③）ように、記述をする。
記述する箇所はまぁ人それぞれだろうが、僕はtheme.liquidの一番下に書いた。
theme.liquidの一番下
<script>
$(document).ready(function(){
var $returnTo = $('<input type="hidden" name="return_to" value="/pages/address-new" />'); //address-newページに遷移させるためのinput要素 を変数「returnTo」として宣言
if ($('#create_customer').length > 0){ //もし新規会員登録フォームだったら
$returnTo.insertBefore($('#create_customer input[type="submit"]')); // 変数returnToを、送信ボタンの前に入れてね
} else if ($('#g-recaptcha').length && location.hash != "#contact_form"){ //それか、もし「Google Recaptchaページであり、かつ、urlのhash(一番後ろの#以降の記述)がcontact_form」ならば
$returnTo.insertBefore($('.shopify-challenge__container input[type="submit"]')); // 変数returnToを、送信ボタンの前に入れてね
}
});
</script>こんな感じ。
上記のコードの中のコメントに何をしているかも書かせていただいているが、
要するに、
「新規会員フォームと、新規会員フォーム送信後のGoogle recaptchaフォームは、送信後「pages/address-new」に飛ぶようにしてね」
っていうコードを追記させるようにしている。
手順その４ 住所登録ページ→サンクスページへ遷移させるために、formタグ内に一手間
次に、住所登録ページの入力後にサンクスページに飛ぶ（実現フロー④）ように、formタグ内に一手間加える。
具体的には、 <input type="submit" value="{{ 'customer.addresses.add' | t | escape }}" /> の直前に遷移先を変更するinputタグを挿入する。
{% form 'customer_address', customer.new_address %}
<h4 id="add_address_title">{{ 'customer.addresses.add_new' | t }}</h4>
<table class="customer_address_table">
<tr>
<td class="label"><label for="address_last_name_new">{{ 'customer.addresses.last_name' | t }}</label></td>
<td class="value"><input type="text" id="address_last_name_new" class="address_form" name="address[last_name]" value="{{form.last_name}}" size="40" /></td>
</tr>
中略
<tr>
<td class="label"><label for="address_phone_new">{{ 'customer.addresses.phone' | t }}</label></td>
<td class="value"><input type="text" id="address_phone_new" class="address_form" name="address[phone]" value="{{form.phone}}" size="40" /></td>
</tr>
<tr>
<td class="label"></td>
<td class="value"><label>{{ form.set_as_default_checkbox }} {{ 'customer.addresses.set_default' | t }}</label></td>
</tr>
</table>
<div class="action_bottom">
<p>
<input type="hidden" name="return_to" value="/pages/register_completed" />
<input type="submit" value="{{ 'customer.addresses.add' | t | escape }}" />
</p>
</div>
{% endform %}こんな感じ。
<input type=”hidden” name=”return_to” value=”/pages/register_completed” />
この記述で、住所登録後、register_completedに遷移するようになった。
inputタグを入れることでフォーム送信後の遷移先URLを変更する、というのはまぁまぁメジャーな手法だと思うが、
Shopifyの会員登録のフォームにおいては、recaptchaページが挟まることがあるので、jsでinputタグを挿入というちょっとだけテクニカルなことをしなければならなかった。（recaptchaページはコード編集画面から編集できないので）
会員登録時の顧客導線もある程度自由に色々できる、ということがわかったのでとりあえず身になりました。