Shopifyテーマ「Dawn」のマイページでYubinBangoを実装する際に都道府県のプルダウンにも適用させたよという話

タイトルの通りだが、ShpopifyのOS2.0デフォルトテーマ「Dawn」でのマイページで使われている都道府県のvalueがローマ字表記のため、YubinBangoを使った都道府県選択がスルーされてしまう現象を解決してみました。

そこまでややこしい実装ではなかったですが、しばらくこの対応が続きそうなので備忘録として。
YubinBangoの使い方や設定の方法は、公式のgithubを見てください。

アプローチ

• YubinBangoでキャッチした都道府県名をhiddenフィールドに保存
• 都道府県のselectタグからhiddenフィールドの値と合致するoptionを検出
• 検出したoptionに対してselectedを付与して選択状態にする

リファレンス

YubinBango
https://github.com/yubinbango/yubinbango

サンプルコード

YubinBangoの設定を行なった後、以下のコードを main-addresses.liquid の<script>内に設置してもらうと動きます。

YubinBangoで値を取得埋め込むタイミングをobserverで監視しようとも思ったけど、ひとまずsetTimeoutで逃げております。ツッコミは色々とありますが、ひとまず使えるコードにはなっているので、ぜひ改善案を欲しいところではあります！

function changeRegion(){

const addressForms = document.getElementsByTagName('form');
Array.prototype.forEach.call(addressForms, (item) => {
  if( item.classList.contains('h-adr') === true ){
    var postalCode = item.querySelector('.p-postal-code');
    var region = item.querySelector('.p-region');
    var provinceList = item.querySelector('.address-province').options;
    var timerId;
    var selectIndex;
    postalCode.addEventListener('keyup', (e)=>{
      clearTimeout(timerId);
      timerId = setTimeout(()=>{
        if( region.value != '' ) {
          Array.prototype.forEach.call(provinceList, (pref, i) => {
            if( pref.innerText === region.value ){
              selectIndex = i;
            }
          });
          provinceList[selectIndex].setAttribute('selected', true);
        }
      }, 300 );
    });
  }
});
}
window.addEventListener('DOMContentLoaded', changeRegion);

注意事項

• エラー処理などは書いていませんので、使用の際は適宜記述してください
• 設置の方法や不具合などのヘルプサポートは対応できかねますが、もっとこういうコードの方がいいですよというご意見はドシドシいただきたいです。
• 上記コードを使用した際に発生した不具合について責任を負いかねますのでご了承ください。