Shopifyでアカウントの住所追加変更ページで県の並び順を変更する

Cat WEBサイト構築Tag by cubismer
Shopify

Shopifyにログインしたユーザーに表示される、アカウントの住所変更ページにある県のドロップダウンの順序を変更する方法のメモです。チェックアウト画面では問題がないようなのでなぜここはこうなのかとは思いますが。

前提

  • Debutテーマ使用
  • example.myshopify.com/account/addressesのようなURLのアカウントの住所変更ページが対象
  • 国のドロップダウンリストを変更すると、連動して県(provinces)のドロップダウンリストの値も切り替わる
  • 県のドロップダウンリスト内の順序を都道府県番号順に変更する

後述しますが、調べた限りでは県のドロップダウンリストの設定自体を変更する手段はありません。

サンプルコード

以下がサンプルコードですが、試したらできたという程度のため動作は保証できず、使用を勧めるものではない点を了解ください。

addresses.liquidにある{{ all_country_option_tags }}を以下のように丸ごと書き換えます。


{{ 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","沖縄県"]'}}

手法としては単純で、replaceフィルターで県の値を丸ごと書き換えているだけです。

具体的には、本来アルファベット順で並んでいるものを都道府県番号順に変更していますが、この際に[]やエスケープされている"(ダブルクオート)まで含めて初期状態と揃えることで、丸ごと一つの文字列として置換している点がポイントです。

all_country_option_tagsオブジェクトと県

{{ all_country_option_tags }}は国選択用のドロップダウンリストを出力します。

このリスト内のoptionタグにはdata-provinces属性があり、ここに対してShopify側でサブリージョン(=県や州など)をJSONエンコードした状態で設定されます。

Debutテーマなどは国選択のプルダウンリストの選択項目に連動し、このdata-provincesの値をJavascriptで取得して、サブリージョン用のプルダウンリストの生成と変更を行っています。

これらの動作とドキュメントの内容から、テーマやユーザー側ではどうやっても元データの値自体を変更することはできません。

補足用参考URL

他の方法として、上記２つ目の「解決済み: アカウントページの都道府県プルダウンの表示順について – Shopify Community」のページで示されているJSによる値の書き換えも検討できます。

この場合、書き換え対象は{{ all_country_option_tags }}で生成されたoption内のdata-provincesとなるはずです。

結び

試したものの、無茶な作り方なので実行を勧め難いサンプルです。

一応日本語以外の言語での利用や、この件が今後のアップデートで解消された際に起こることを以下のように想定はしています。

  • ストアの言語が変更された場合は漢字の件名は設定されないため置換の影響は受けず、その際のリスクは「並び替えが無効になる」程度
  • 海外の方に都道府県番号順の並びはわかりにくい可能性が高く、そもそも順番を並べ替える必要性が非常に低い

つまり、置換対象となる文字列が変われば置換は動作せず無害なため、急いで修正する必要はないはずです。
もちろんこの処理が無駄になったなら早めに削除する方が良いですが。

補足

この件は一応フォーラムに書き込んでいます。

3人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄