[wp]welcartの会員登録にyubinbango.jsを導入したい

2025.06.06

すげーめんどい

仕様の理解

会員登録の一部の項目は関数で出力する。

<?php uesces_addressform( 'member', usces_memberinfo( null ), 'echo' ); ?>

こんな感じになる。

    <tr id="name_row" class="inp1">
    <th width="127" scope="row"><em>＊</em>お名前</th><td class="name_td"><span class="member_name">姓</span><input name="member[name1]" id="name1" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td><td class="name_td"><span class="member_name">名</span><input name="member[name2]" id="name2" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td></tr><tr id="furikana_row" class="inp1">
    <th scope="row">フリガナ</th><td><span class="member_furigana">セイ</span><input name="member[name3]" id="name3" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td><td><span class="member_furigana">メイ</span><input name="member[name4]" id="name4" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td></tr><tr id="zipcode_row">
    <th scope="row"><em>＊</em>郵便番号</th>
    <td colspan="2"><input name="member[zipcode]" id="zipcode" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: inactive" />100-1000</td>
    </tr><input type="hidden" name="member[country]" id="member_country" value="JP"><tr id="states_row">
    <th scope="row"><em>＊</em>都道府県</th>
    <td colspan="2"><select name="member[pref]" id="member_pref" class="pref">	<option value="--選択--">--選択--</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
    </select>
    </td>
    </tr>
    <tr id="address1_row" class="inp2">
    <th scope="row"><em>＊</em>市区郡町村</th>
    <td colspan="2"><input name="member[address1]" id="address1" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" />横浜市上北町</td>
    </tr>
    <tr id="address2_row">
    <th scope="row"><em>＊</em>番地</th>
    <td colspan="2"><input name="member[address2]" id="address2" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" />3-24-555</td>
    </tr>
    <tr id="address3_row">
    <th scope="row">ビル名</th>
    <td colspan="2"><input name="member[address3]" id="address3" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" />通販ビル4F</td>
    </tr>
    <tr id="tel_row">
    <th scope="row"><em>＊</em>電話番号</th>
    <td colspan="2"><input name="member[tel]" id="tel" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: inactive" />1000-10-1000</td>
    </tr>
    <tr id="fax_row">
    <th scope="row">FAX番号</th>
    <td colspan="2"><input name="member[fax]" id="fax" type="text" value="" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: inactive" />1000-10-1000</td>
    </tr>

yubinbango.jsを導入するにあたり、該当項目にclassを付けたりする必要がある。

だめだった話

フォームタグはnameなりidなりが付いてるので問題なく各項目を指定できる。
だからjsでclassを付与したら、エラーを吐いて動かなかった。

$(function(){

$('form').addClass('h-adr');
$('<span class="p-country-name" style="display:none;">Japan</span>').prependTo('form.h-adr');
$('input[name="member[zipcode]"]').addClass('p-postal-code');
$('select[name="member[pref]"]').addClass('p-region');
$('input[name="member[address1]"]').addClass('p-locality p-street-address');
$('input[name="member[address2]"]').addClass('p-extended-address');
$('input[name="member[address3]"]').addClass('');

})

読み込みと発火の関係なんだろうと思うけどそのへんを詰めるのはだるかったので諦めた。

代用で乗り切った

yubinbango.js用のフォームタグを設置して、本来のフォームタグにvalueを移植する感じ。

<form>がベタ打ちだから.h-adrを追加する（.h-adrでラッピングしてもいい）。
そしてこれを仕込む。

<span class="p-country-name" style="display:none;">Japan</span>
<input type="text" name="input_zip" class="p-postal-code">
<input type="text" name="input_adr01" id="input_adr01" class="p-region" placeholder="都道府県" readonly>
<input type="text" name="input_adr02" id="input_adr02" class="p-locality p-street-address" placeholder="市区郡町村">
<input type="text" name="input_adr03" id="input_adr03" class="p-extended-address" placeholder="丁目・番地">
<input type="text" name="input_adr04" id="input_adr04" class="" placeholder="建物名">

で、こうする。

$(function(){

$('input[name="input_zip"],input[name="input_adr01"],input[name="input_adr02"],input[name="input_adr03"],input[name="input_adr04"]').on('change',function(){
    let zipVal = $('#adr_list input[name="input_zip"]').val();
    let adr01Val = $('#adr_list input[name="input_adr01"]').val();
    let adr02Val = $('#adr_list input[name="input_adr02"]').val();
    let adr03Val = $('#adr_list input[name="input_adr03"]').val();
    let adr04Val = $('#adr_list input[name="input_adr04"]').val();
    $('input[name="member[zipcode]"]').val(zipVal);
    $('select[name="member[pref]"]').val(adr01Val);
    $('input[name="member[address1]"]').val(adr02Val);
    $('input[name="member[address2]"]').val(adr03Val);
    $('input[name="member[address3]"]').val(adr04Val);
})

})

住所のどっかをいじったら住所の全部を移す感じ。
yubinbango.jsは郵便番号入れたら市区町村まで出るし、妥当かなと思う。

フォーカスが外れないと発火しないからちょっと危険ではある。

運用としては、「既存の住所項目を非表示にしてyubinbango対応の項目を置換する」ということになる。

スポンサーリンク

コメント

タイトルとURLをコピーしました