Closed4
Shopifyテーマ住所周りのローカライズ調整
Kazuki Yonemoto課題
Shopifyのテーマシステムを利用すればフロントの構築工数を抑えることができる。
ただし、公式テーマであっても以下のような課題があると感じている。
- 住所周りのローカライズ
- フォームバリデーションがゆるい
- フォントサイズが日本語に適していない
特に日本語サポートテーマが少ないため、デザイン面でも一定の調整は必要になると考えておいた方がいい。
このスクラップでは住所周辺の最適化についてまとめていく。
Kazuki Yonemoto住所情報の出力
多くのテーマではformat_addressのような形で住所情報が丸め込まれているが、日本国内でのみの販売を想定する場合では国名が出力されたりなど不要な情報が一緒に出力されてしまう。
請求先住所の例
<div class="address">{{ order.billing_address | format_address }}</div>
↓に変更
<div class="address">
<p>{{ order.billing_address.last_name }} {{ order.billing_address.first_name }}</p>
<p>{{ order.billing_address.zip }}</p>
<p>{{ order.billing_address.province }}</p>
<p>{{ order.billing_address.city }}</p>
<p>{{ order.billing_address.address1 }}</p>
<p>{{ order.billing_address.address2 }}</p>
</div>
不要な空タグが出力されないようにさらに条件分岐を入れておくのがベスト。
Kazuki Yonemoto郵便番号のバリデーション
HTMLベースでバリデーションをかけておく場合。
pattern="\d{3}-?\d{4}" の正規表現で日本の郵便号フォーマットに合わせる。
autocomplete="postal-code"で住所入力の補完を行う。
<div class="address-item">
<label class="address-label" for="zip">{{ 'customer.addresses.zip' | t }}</label>
<input type="text" pattern="\d{3}-?\d{4}" title="半角数字で入力してください!" id="zip" class="address-input" name="address[zip]" value="" size="8" maxlength="8" autocomplete="postal-code" required>
</div>
※ ブラウザ依存なく厳密に行うにはJSを使った方がいい。
バリデーションライブラリ
郵便番号での入力補完
郵便番号の入力から住所情報の補完を厳密に行いたい場合はJSで処理を追加する。このあたりの補完がデフォルトでついてるテーマはあまりみたことがない。
YubinBango.jsを利用することで工数を圧縮できる。
Kazuki Yonemoto都道府県の並び順
標準だとローマ字表記のアルファベット順になってしまう。
テーマによって出力方法が様々でベストな対処方法というのはないように思われる。
liquidで対応できる場合は次のように差し替える。
{{ all_country_option_tags | replace: '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"],["Gifu","岐阜県"],["Gunma","群馬県"],["Hiroshima","広島県"],["Hokkaidō","北海道"],["Hyōgo","兵庫県"],["Ibaraki","茨城県"],["Ishikawa","石川県"],["Iwate","岩手県"],["Kagawa","香川県"],["Kagoshima","鹿児島県"],["Kanagawa","神奈川県"],["Kumamoto","熊本県"],["Kyōto","京都府"],["Kōchi","高知県"],["Mie","三重県"],["Miyagi","宮城県"],["Miyazaki","宮崎県"],["Nagano","長野県"],["Nagasaki","長崎県"],["Nara","奈良県"],["Niigata","新潟県"],["Okayama","岡山県"],["Okinawa","沖縄県"],["Saga","佐賀県"],["Saitama","埼玉県"],["Shiga","滋賀県"],["Shimane","島根県"],["Shizuoka","静岡県"],["Tochigi","栃木県"],["Tokushima","徳島県"],["Tottori","鳥取県"],["Toyama","富山県"],["Tōkyō","東京都"],["Wakayama","和歌山県"],["Yamagata","山形県"],["Yamaguchi","山口県"],["Yamanashi","山梨県"],["Ōita","大分県"],["Ōsaka","大阪府"]', '["Hokkaidō","北海道"],["Aomori","青森県"],["Iwate","岩手県"],["Miyagi","宮城県"],["Akita","秋田県"],["Yamagata","山形県"],["Fukushima","福島県"],["Ibaraki","茨城県"],["Tochigi","栃木県"],["Gunma","群馬県"],["Saitama","埼玉県"],["Chiba","千葉県"],["Tōkyō","東京都"],["Kanagawa","神奈川県"],["Niigata","新潟県"],["Toyama","富山県"],["Ishikawa","石川県"],["Fukui","福井県"],["Yamanashi","山梨県"],["Nagano","長野県"],["Gifu","岐阜県"],["Shizuoka","静岡県"],["Aichi","愛知県"],["Mie","三重県"],["Shiga","滋賀県"],["Kyōto","京都府"],["Ōsaka","大阪府"],["Hyōgo","兵庫県"],["Nara","奈良県"],["Wakayama","和歌山県"],["Tottori","鳥取県"],["Shimane","島根県"],["Okayama","岡山県"],["Hiroshima","広島県"],["Yamaguchi","山口県"],["Tokushima","徳島県"],["Kagawa","香川県"],["Ehime","愛媛県"],["Kōchi","高知県"],["Fukuoka","福岡県"],["Saga","佐賀県"],["Nagasaki","長崎県"],["Kumamoto","熊本県"],["Ōita","大分県"],["Miyazaki","宮崎県"],["Kagoshima","鹿児島県"],["Okinawa","沖縄県"]'}}
ただし、JSを用いて出力されているテーマの場合は{{ all_country_option_tags }}のような記述がテンプレートに見つからない。JSで出力されている箇所を直接修正できるのがベストだが、特定が困難な場合は別途JSでオーバーライドする方法を検討することになる。（できればこれは避けたい）
次のような要素を用意してselectタグ内を書き換える。
const provinceList = `
<option value="Hokkaidō">北海道</option>
<option value="Aomori">青森県</option>
<option value="Iwate">岩手県</option>
<option value="Miyagi">宮城県</option>
<option value="Akita">秋田県</option>
<option value="Yamagata">山形県</option>
<option value="Fukushima">福島県</option>
<option value="Ibaraki">茨城県</option>
<option value="Tochigi">栃木県</option>
<option value="Gunma">群馬県</option>
<option value="Saitama">埼玉県</option>
<option value="Chiba">千葉県</option>
<option value="Tōkyō">東京都</option>
<option value="Kanagawa">神奈川県</option>
<option value="Niigata">新潟県</option>
<option value="Toyama">富山県</option>
<option value="Ishikawa">石川県</option>
<option value="Fukui">福井県</option>
<option value="Yamanashi">山梨県</option>
<option value="Nagano">長野県</option>
<option value="Gifu">岐阜県</option>
<option value="Shizuoka">静岡県</option>
<option value="Aichi">愛知県</option>
<option value="Mie">三重県</option>
<option value="Shiga">滋賀県</option>
<option value="Kyōto">京都府</option>
<option value="Ōsaka">大阪府</option>
<option value="Hyōgo">兵庫県</option>
<option value="Nara">奈良県</option>
<option value="Wakayama">和歌山県</option>
<option value="Tottori">鳥取県</option>
<option value="Shimane">島根県</option>
<option value="Okayama">岡山県</option>
<option value="Hiroshima">広島県</option>
<option value="Yamaguchi">山口県</option>
<option value="Tokushima">徳島県</option>
<option value="Kagawa">香川県</option>
<option value="Ehime">愛媛県</option>
<option value="Kōchi">高知県</option>
<option value="Fukuoka">福岡県</option>
<option value="Saga">佐賀県</option>
<option value="Nagasaki">長崎県</option>
<option value="Kumamoto">熊本県</option>
<option value="Ōita">大分県</option>
<option value="Miyazaki">宮崎県</option>
<option value="Kagoshima">鹿児島県</option>
<option value="Okinawa">沖縄県</option>
`;
optionのDOMを一度取得してソートして書き換えようかと思ったが、結局DOMを直接上書いてるのでソートの処理とかが面倒に感じて直接ぶち込むようにした。。。
※ 登録済みの住所フォームではselectedが初期化されてしまうため、再設置することを忘れずに処理を書く必要がある。
ありがたい記事見つけた🙏
このスクラップは2022/03/17にクローズされました