アカウントページの都道府県プルダウン表示順変更について

[miz]

お世話になっております。

現在Prestigeのテーマを使っていますが、account/addressのページの住所登録formにある都道府県のプルダウンを北海道から始まる一般的な表示順に変えたいです。

現在はアルファベット順になっているのですが、どこで何を変ればいいのかわからず、質問いたします。

<アカウントページでの表示順>

 

ちなみにチェックアウトのところはちゃんと自動設定になっていたため、アカウントページだけ修正すればいいかと思っています。

Liquid objectの all_country_option_tagsで順番変えればいいとのコミュニティのアンサーを見たのですが、それをどこで変えれるのかすらわからない状態です。

customer.addresses.province formをどこで変えれるのか教えていただけますでしょうか。

何卒よろしくお願いします。

[Jizo_Inagaki]

Prestigeは使っていないので想像になりますが、おそらくtemplates内のcustomerで、addresses.liquidかaccount.liquidというファイル名のあたりにあるのではと思います。

[miz]

お世話になっております。

お返事ありがとうございます。

そもそもの話でall_country_option_tagsの設定場所がわからないのです。

address のところには該当の単語は見つかったのですが、その他のページでは見当たらなかったです。

all_country_option_tagsの場所をご教示いただけますでしょうか。

よろしくお願いします！

[Jizo_Inagaki · Accepted solution]

確認いただきありがとうございます。

Debutの場合、{{ all_country_option_tags }}もaddresses.liquidにありましたので、私ではご対応が難しいかもしれません。

一応調べましたら、以下がこの件に該当するのではと思います。

https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAQ-A/%E3%82%A2%E3%82%AB%E3%82%A6%...

{{ all_country_option_tags }}に関しましては、上記にあるようにShopify側から値が出力されているため、こちらからその設定を変更することはできないと思われます。

参考:
https://shopify.dev/docs/themes/liquid/reference/objects/all-country-option-tags
https://github.com/S...

テーマによるため一概には言えませんが、調べたところDebutでは{{ all_country_option_tags }}が生成した国選択のoptionタグのdata-provinces属性をJSで取得し、国選択に応じて動的にprovinceに値を設定して動作させているようでした。

この点から、先ほどの参考コミュニティのURLにあるように、JSで後からdata-provinces内の値を書き換える方法が考えられます。

他方、個人的に思いついたことがあり試したらできたという程度なのでお勧めできるものではないですが、以下のような方法でも順序入れ替れ変えができましたので、一応記載します。

■趣旨

• replaceフィルターでサブリージョンの配列を丸ごと、都道府県番号順に書き換える

■サンプルコード

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フィルターは文字列を書き換えるようなので、書き換え対象の文字列に記号まで含めて指定できればまとめて置換できるのではと考え、いくつか試したところ上記のコードが動作した次第です。

Debutかつフォームの動作のみを確認し、かつ、かなり無理やりなため動作は保証できませんので、その点は留意ください。

※この手法の可否に関しまして他の方のご意見も伺えればと思います

[miz]

jizo様

お世話になっております！

ご丁寧にご教示いただき誠にありがとうございます！

ご教示いただいた内容で登録しましたら、無事に北海道からの表示順になりました！ 

大変助かります！

今後とも何卒よろしくお願いします！

[drumsoft]

（解決済みですが、探している方がいるかもしれないので）ぺージ表示後にJavascriptで並べ替えるソリューションを投稿します。 window.onload の中に追加してください。県名で並び替えるので少しだけ（Shopifyによる）変更に強いかも…？

// sort province options
(
  pcodes => document.querySelectorAll('select[name="address[province]"]').forEach(
    select => Array.from(select.options).sort(
      (a,b) => pcodes[a.textContent] - pcodes[b.textContent]
    ).forEach(
      option => select.appendChild(option)
    )
  )
)({"北海道":1,"青森県":2,"岩手県":3,"宮城県":4,"秋田県":5,"山形県":6,"福島県":7,"茨城県":8,"栃木県":9,"群馬県":10,"埼玉県":11,"千葉県":12,"東京都":13,"神奈川県":14,"新潟県":15,"富山県":16,"石川県":17,"福井県":18,"山梨県":19,"長野県":20,"岐阜県":21,"静岡県":22,"愛知県":23,"三重県":24,"滋賀県":25,"京都府":26,"大阪府":27,"兵庫県":28,"奈良県":29,"和歌山県":30,"鳥取県":31,"島根県":32,"岡山県":33,"広島県":34,"山口県":35,"徳島県":36,"香川県":37,"愛媛県":38,"高知県":39,"福岡県":40,"佐賀県":41,"長崎県":42,"熊本県":43,"大分県":44,"宮崎県":45,"鹿児島県":46,"沖縄県":47});