[welcart]会員情報編集リンクの自作

マジなんなんですかねこれ。

もともとの動作とか
やっていく

もともとの動作とか

<ul class="member_submenu">
    <li class="member-edit"><a href="#edit"><?php esc_html_e( 'To member information editing', 'usces' ); ?></a></li>
    <?php do_action( 'usces_action_member_submenu_list' ); ?>
    <li class="member-logout"><?php usces_loginout(); ?></li>
</ul>

テンプレートでは「#edit」となってるけど、画面上では「?usces_page=member_edit」になる。

これをクリックすると「会員情報を編集するには本人認証が必要です。ご登録のメールアドレスに認証メールを送信してもよろしいですか？」のアラートが出て、「OK」を押すと遷移する。

ということで、２つのjsを仕込んでる事がわかる。

リンク先変更：「#edit」→「?usces_page=member_edit」
リンク押下時：アラートを噛ませる

で、このページを自作したらこの動作にならなかった。
多分js側での指定が関係してるんですね、しかも<a>ピンポイントでの指定じゃなくて親要素込みのだるい事になってるくさい。
hrefで指定したらいいじゃんね。

しかしなんでこんなことしたんでしょうね。

もともとのjsを使い回すための条件を探すのもめんどくさいし、自作する。

やっていく

こんなかんじにする。

<a href="#edit">会員情報の編集</a>

で、こう。

$(function(){
    //リンク先変更
    $('a[href="#edit"]').addClass('linkEdit').attr('href','?usces_page=member_edit');
    //遷移前に確認を挟む
    $('a.linkEdit').on('click',function(event){
        const resultConfirm = confirm('会員情報を編集するには本人認証が必要です。ご登録のメールアドレスに認証メールを送信してもよろしいですか？');
        if (!resultConfirm) {
            event.preventDefault();
        }
    })
})

これでOK。

読み込み時にリンク先を変更するついでにセレクタを属性からclass依存に変えたかったから「.linkEdit」を付けてみた。