ECCUBE3にyubinbango.jsを導入する

環境

ECCUBE3.0.15

参考URL

yubinbango.jsの公式ドキュメント
Ajaxzip3コールバックに関するページ

yubinbango.jsとは

郵便番号を入力するだけで都道府県や住所を自動入力してくれるjavascriptのライブラリです。
似たようなライブラリにAjaxzip3があるのですが、それの後継ライブラリです。

Ajaxzip3とyubinbango.js違い

yubinbango.jsの良いところ
1.郵便番号が全角入力でも動作する。
2.keyupイベントで都道府県や住所を自動入力する為、クリック数が1回少なくなるので楽。
3.Ajaxzip3よりも軽量。
yubinbango.jsの悪いところ
1.Ajaxzip3にあったonSuccsessのコールバック関数がない。
2.名前が少しださい(主観)。

ECCUBE3への導入方法

ECCUBE3のデフォルトの住所自動入力には「Ajaxzip3」を使用しています。
これをyubinbango.jsの公式ドキュメントの手順に従って導入します。
ECCUBE3に導入する時に困る点は二つあります。
1.郵便番号が2つのフォームに分かれている。
2.都道府県のフォームがセレクトボックスとなっている。
郵便番号が2つに分かれているに関しては、”p-postal-code”クラスを2つのフォームに設定すれば良いです。
都道府県のフォームがセレクトボックスに関しては、ドキュメントに書いておらず少し実装に時間かかりました。
都道府県のフォームに”p-region-id”クラスを付与すれば、大丈夫です。
ECCUBE3の都道府県のフォームは、valueとして都道府県コードを使用しているため、p-region-idクラスを付与してセレクトボックスのvalueが都道府県コードであるということを定義しないといけないです。
簡単ですが、これで導入完了です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

山中 雅彦

大分でWebシステム受託開発会社のバックエンドエンジニアとして働いてます。 Laravel5でのシステム開発を中心に仕事してます。 高校卒業後に鉄鋼会社で電気整備の仕事をする傍ら、HTML、CSS、JS、PHP、MySQL、サーバ関連技術を独学で勉強。 2017年9月にWebシステム開発会社に入社し、システム開発をしています。 Web技術全般が好きなPHPerです。