EC-CUBE4で利用している郵便番号ライブラリの変更

EC-CUBE4 PHP

EC-CUBE Advent Calendar 2020 6日目の記事です。

EC-CUBE4で会員登録等に住所補完を目的として利用している郵便番号ライブラリですが、こちらのyubinbangoライブラリを利用しています。

github.com

このライブラリは非常に便利なのですが、EC-CUBEにもissueが上がっているように一度入力した郵便番号へフォーカスを当てると、住所の項目が消えてしまいます。

github.com

通常利用している分にはそこまで大きな問題ではありませんが、どうしても不便だという方もいるため、別の郵便番号ライブラリを反映して対応するようにします。

ajaxzip3の利用

yubinbangoライブラリと同一作者が作成されているajaxzip3を利用します。

github.com

GitHubのREADMEにも記載されている通り、yubinbangoライブラリをオススメしているため、特に不都合がない方は無理に変更する必要はありません。

ソース変更箇所

郵便番号の住所補完を行なっている箇所は以下となります。

src/Eccube/Resource/template/default/Contact/index.twig
src/Eccube/Resource/template/default/Entry/index.twig
src/Eccube/Resource/template/default/Mypage/change.twig
src/Eccube/Resource/template/default/Mypage/delivery_edit.twig
src/Eccube/Resource/template/default/Shopping/nonmember.twig
src/Eccube/Resource/template/default/Shopping/shipping_edit.twig
src/Eccube/Resource/template/default/Shopping/shipping_multiple_edit.twig
src/Eccube/Resource/template/admin/Customer/delivery_edit.twig
src/Eccube/Resource/template/admin/Customer/edit.twig
src/Eccube/Resource/template/admin/Order/edit.twig
src/Eccube/Resource/template/admin/Order/shipping.twig
src/Eccube/Resource/template/admin/Setting/Shop/shop_master.twig

このtwigファイル内に記載されている箇所を以下のように変更します。

<script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
↓
<script src="//yubinbango.github.io/ajaxzip3/ajaxzip3.js" charset="UTF-8"></script>

次に、この郵便番号を利用できるようにfunction.jsへ処理を追加します。

処理内容はこちらを参考にさせてもらっています。

qiita.com

  • html/template/default/js/function.js
var postalHandler = function() {
    $postal = $('.p-postal-code');
    $region = $('.p-region-id');
    $locality = $('.p-locality');

    AjaxZip3.zip2addr($postal[0].name, '', $region[0].name, $locality[0].name, '', '', false);
};
$(function() {

    var postalHandler = function() {
        $postal = $('.p-postal-code');
        $region = $('.p-region-id');
        $locality = $('.p-locality');

        AjaxZip3.zip2addr($postal[0].name, '', $region[0].name, $locality[0].name, '', '', false);
    };
    $('.p-postal-code').change(function() {
        if ($(this).val().length >= 7) {
            postalHandler();
        }
    });

});
  • html/template/admin/assets/js/function.js
$(function() {

    var postalHandler = function(){
        $postal = $('.p-postal-code');
        $region = $('.p-region-id');
        $locality = $('.p-locality');

        AjaxZip3.zip2addr($postal[0].name, '', $region[0].name, $locality[0].name, '', '', false);
    };
    $('.p-postal-code').change(function(){
        if ($(this).val().length >= 7) {
            postalHandler();
        }
    });

});

また、app/template/admin/Order/edit.twigファイルのみ以下の処理を{% block javascript %}〜{% endblock javascript %}内へ記述します。

  • app/template/admin/Order/edit.twig
var postalHandler = function(id) {
    $postal = $(id + ' .p-postal-code');
    $region = $(id + ' .p-region-id');
    $locality = $(id + ' .p-locality');

    AjaxZip3.zip2addr($postal[0].name, '', $region[0].name, $locality[0].name, '', '', false);
};

$('#shippingInfo .p-postal-code').change(function() {
    if ($(this).val().length >= 7) {
        postalHandler('#shippingInfo');
    }
});
$('#ordererInfo .p-postal-code').change(function() {
    if ($(this).val().length >= 7) {
        postalHandler('#ordererInfo');
    }
});

以上でajaxzip3が利用できるようになり、郵便番号へフォーカスを当てても一度入力した住所が消えることはありません。

一点対応できていない箇所として、 p-street-addressとp-extended-addressが対応できていませんので、そちらも適用させたい方は、

EC-CUBE4で郵便番号にTABでフォーカス移動すると番地が消える - Qiita

の処理をfunction.jsへ適用させるようにしてください。