現在以下のようにコードを書いて、郵便番号から住所自動入力を実装しようと試みております。
しかし実際に郵便番号を入力してみると都道府県のプルダウンが内部的には変わっているようなのですが、
見た目はデフォルトの北海道のままになってしまいます。(手動で選択しなおすと変わります)
都道府県以降の住所は正しく入力されています。
修正方法をご教授いただけますと幸いです。
よろしくお願いいたします。
{{ 'customer.addresses.country' | t }} {{ 'customer.addresses.zip' | t }}こちらをご利用になっている、ということでよろしいでしょうか？
https://shanabrian.com/web/library/ajaxzip3.php
onKeyUp="AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字);"
と記載があり、都道府県は、3番目の引数となるようですね。
onKeyUp="AjaxZip3.zip2addr(this,'','address[province]','address[city]','address[address1]');"
質問者様の場合、3番目に、address[province]が指定されていますが、
記載いただいたコードを拝見しますと、
select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">
都道府県のnameは、address[country]になっているようです。
こちらの要素のnameを、address[province]に変更いただくのが良いように思いました。
しかし、下記の懸念があります。
各option要素のnameが日本語の都道府県になっていないと、
結局うまく動かないと思いますので、
その点を念のためご確認いただいた方が良いです。
また、replaceの記法を、私は、下記しか知らず、
https://shopify.github.io/liquid/filters/replace/
質問者様が記載されている下記の方法で、
日本語都道府県に書き変わるのかが心配です。
replace: '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"].....
上記の懸念は、ご確認いただき問題ないようでしたら無視いただいて大丈夫です。
ご参考まで。
(キュー田辺)
ご返信いただきありがとうございます。
address[country]からaddress[province]に変更してみましたが、うまく動作しませんでした。
この場合内部的に変わっていた都道府県も、変わらないようになってしまいました。
これは確認する方法などございますでしょうか。
あまり知識がなく申し訳ございません。
参考にされたのは下記でしょうか？
https://webutubutu.com/webdesign/8745
このコミュニティでも活躍されているJizo_Inagakiさんのサイトなので、
ご本人からアドバイスいただけると早いかもしれませんね。
しかし、上記のページを読んでいて分かったことがありますので、
下記のようにしてみてください。
まず、
select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">
のnameを、address[province]に変更いただきましたが、address[country]にお戻しください。
次に、
のように、nameにaddress[province]を持つselect要素がなければ追加お願いします。
(最初のご質問の投稿に掲載されたコードには見当たらなかったので、念のため、です。しかし、お話の流れ的に、どこかに、nameにaddress[province]を持つ要素があるように思うので、追加対応は不要なのではないかと思います。)
さらに、
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","大阪府"]', '["北海道","北海道"],["青森県","青森県"],["岩手県","岩手県"],["宮城県","宮城県"],["秋田県","秋田県"],["山形県","山形県"],["福島県","福島県"],["茨城県","茨城県"],["栃木県","栃木県"],["群馬県","群馬県"],["埼玉県","埼玉県"],["千葉県","千葉県"],["東京都","東京都"],["神奈川県","神奈川県"],["新潟県","新潟県"],["富山県","富山県"],["石川県","石川県"],["福井県","福井県"],["山梨県","山梨県"],["長野県","長野県"],["岐阜県","岐阜県"],["静岡県","静岡県"],["愛知県","愛知県"],["三重県","三重県"],["滋賀県","滋賀県"],["京都府","京都府"],["大阪府","大阪府"],["兵庫県","兵庫県"],["奈良県","奈良県"],["和歌山県","和歌山県"],["鳥取県","鳥取県"],["島根県","島根県"],["岡山県","岡山県"],["広島県","広島県"],["山口県","山口県"],["徳島県","徳島県"],["香川県","香川県"],["愛媛県","愛媛県"],["高知県","高知県"],["福岡県","福岡県"],["佐賀県","佐賀県"],["長崎県","長崎県"],["熊本県","熊本県"],["大分県","大分県"],["宮崎県","宮崎県"],["鹿児島県","鹿児島県"],["沖縄県","沖縄県"]'}}
こうすることで、
optionのvalueが日本語になり、AjaxZip3.zip2addrに対応されるのではないかと思います。
(前回の返信で、optionのnameとお伝えしましたが、valueの誤りでした。)
しかし、optionのvalueを日本語に変更してしまって、果たしてShopifyが正常に処理をしてくれるのかが分かりません。
上記をやってみていただいて、うまく表示されなかったり保存されない場合は、
optionのvalueは書き換えずに、
nameがaddress[province]のselect要素のselectedを変更する処理を作った方が良さそうです。
その場合は、このスレッドにてまたご相談ください。
即答は難しいかもしれませんが考えてみます。
ご参考まで。
(キュー田辺)
ありがとうございます。
all_country_option_tagsをいただいたコードへ置き換えてみましたが、最初のように北海道のまま見た目は変わりませんでした。
検証に必要な部分が抜けているかもしれませんので、コードすべてを添付しますのでご確認いただけますと幸いです。お時間を割いていただき感謝申し上げます。
いただいたコードをそのまま貼り付けてのテストはしていませんが、
下記のコードと、AjaxZip3.zip2addrを、合わせて利用することで、
郵便番号を入力した際に、都道府県も含めて自動的に変更されることを、
私の開発ストアの「マイページ > アドレス帳管理」にて確認できました。
{{ 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","大阪府"]', '["北海道","北海道"],["青森県","青森県"],["岩手県","岩手県"],["宮城県","宮城県"],["秋田県","秋田県"],["山形県","山形県"],["福島県","福島県"],["茨城県","茨城県"],["栃木県","栃木県"],["群馬県","群馬県"],["埼玉県","埼玉県"],["千葉県","千葉県"],["東京都","東京都"],["神奈川県","神奈川県"],["新潟県","新潟県"],["富山県","富山県"],["石川県","石川県"],["福井県","福井県"],["山梨県","山梨県"],["長野県","長野県"],["岐阜県","岐阜県"],["静岡県","静岡県"],["愛知県","愛知県"],["三重県","三重県"],["滋賀県","滋賀県"],["京都府","京都府"],["大阪府","大阪府"],["兵庫県","兵庫県"],["奈良県","奈良県"],["和歌山県","和歌山県"],["鳥取県","鳥取県"],["島根県","島根県"],["岡山県","岡山県"],["広島県","広島県"],["山口県","山口県"],["徳島県","徳島県"],["香川県","香川県"],["愛媛県","愛媛県"],["高知県","高知県"],["福岡県","福岡県"],["佐賀県","佐賀県"],["長崎県","長崎県"],["熊本県","熊本県"],["大分県","大分県"],["宮崎県","宮崎県"],["鹿児島県","鹿児島県"],["沖縄県","沖縄県"]'}}
いただいたコードを拝見しますと、
上記のコードが文字化けしてしまっているようでした。
おそらく、テキストファイルにされる際に文字化けしただけで、
実際のコードは文字化けしていないと思うのですが、
念のためコードをご確認ください。
(北海道と表示されている、とのことで問題ないと思いますが、念のため。)
さて、もし、文字化けが発生していない場合ですが、
Chromeのdeveloper toolsでの要素検証(F12を押すと立ち上がります)
を見ていただいて、
都道府県のoptionが、下記のようになっているか確認いただくのが良いかと思います。
もし、
なっていない場合や、
なっていても動いていない場合、
実際にサイトを見ながらでないと対応できなさそうです。
その場合は、個別にメッセージを頂戴できればと思います。
(キュー田辺)