acmailerとwelcartをjqueryで連動させるメモ

今回はメルマガ発行cgiとwelcartを連動させるメモです。
色々終わったと思ってたのですが、相変わらずメルマガの存在を忘れていて再びコーディング…。phpで書くよりもjqueryで書いたほうが後々楽かな？と思ってjqueryを使いました。

jqueryを使ってwelcartと完全に連動させる

以前も少し紹介した事のあるメルマガ発行cgi『acmailer(エーシーメーラー)』
メルマガ機能の無いwelcartを補ってくれる上に、著作権を表示すれば無料で使用させていただける素晴らしいcgiです。
全てを自分の管理下のサーバー内で出来るのも何となく色々安心。

ただ、welcartデフォルトの機能じゃないので通常は連動しないのですが、調べてみるとphpやjqueryを使って連動させてる方がいらっしゃる。
参考にさせて頂いたのは↓
http://tomoosuzuki.blogspot.jp/2014/06/welcartacmailerjquery.html

なるほど。やっぱりjquery1本の方がいらっしゃるようで、コード考えるのも面倒でほぼコピペさせていただいて使おうと思ったのですが…　動かない(汗)

で、色々調べたらブラウザが原因かな？
コードも手直ししながら調べたので何とも言えませんが、Firefoxでは全く動かなかった。
僕はFirefoxユーザーでFirefoxで動かないのは気持ち悪いので、結局書きなおす事に。

多分ですがFirefoxだと、1つの要素に対してjavascriptとjqueryを動かすとドチラかが動かないんだと思う。通常はjqueryが後だからjqueryが動かない。

changeを使ってタイムリーに連動

input要素でやると、何かと面倒なコードになるからchangeを使って、何か変わる度にcgiをリアルタイムで実行する事にしました。
コードはこんな感じ。

jQuery(function ($) {
    
    $('#newmember input[name="custom_member[mailmagazinem][受け取る]"]').change(function(){
    var mailaddress = $('#newmember input[name="member[mailaddress1]"]').val();
    if ($(this).is(':checked')) {
            $.ajax({
                type: "POST",
                url: "https://*****.***/acmailer3/reg.cgi",
                data: "email=" + mailaddress + "&reg=add&encode=文字コード",
                timeout: 5000,
                dataType: 'text'
            });  
    } else {
            $.ajax({
                type: "POST",
                url: "https://*****.***/acmailer3/reg.cgi",
                data: "email=" + mailaddress + "&reg=del&encode=文字コード",
                timeout: 5000,
                dataType: 'text'
            });
    }
    });
    
    if (0 < $("#memberinfo .customer_form").size()) {
        var mailaddress0 = $('.customer_form input[name="member[mailaddress1]"]').attr('value');
        var regdata0 = "email=" + mailaddress0 + "&reg=del&encode=文字コード";
        
            $('#memberinfo input[name="custom_member[mailmagazinem][受け取る]"]').change(function(){
                var mailaddress1 = $('.customer_form input[name="member[mailaddress1]"]').val();
                if ($(this).is(':checked')) {
                    $.ajax({
                        type: "POST",
                        url: "https://*****.***/acmailer3/reg.cgi",
                        data: "email=" + mailaddress1 + "&reg=add&encode=文字コード",
                        timeout: 5000,
                        dataType: 'text'
                    });  
                } else {
                    $.ajax({
                        type: "POST",
                        url: "https://*****.***/acmailer3/reg.cgi",
                        data: "email=" + mailaddress1 + "&reg=del&encode=文字コード",
                        timeout: 5000,
                        dataType: 'text'
                    });
                }
            });
        
        $('.customer_form input[name="member[mailaddress1]"]').change(function(){
            var mailaddress2 = $('.customer_form input[name="member[mailaddress1]"]').val();
            if ($('#memberinfo input[name="custom_member[mailmagazinem][受け取る]"]').is(':checked')) {
            $.ajax({
                type: "POST",
                url: "https://*****.***/acmailer3/reg.cgi",
                data: regdata0,
                timeout: 5000,
                dataType: 'text'
            }).done(function(data){
                mailaddress0 = $('.customer_form input[name="member[mailaddress1]"]').val();
                regdata0 = "email=" + mailaddress0 + "&reg=del&encode=文字コード";
            });
            $.ajax({
                type: "POST",
                url: "https://*****.***/acmailer3/reg.cgi",
                data: "email=" + mailaddress2 + "&reg=add&encode=文字コード",
                timeout: 5000,
                dataType: 'text'
            });
            }
        });
        
        $('.send input[name="deletemember"]').hide();
        $('.send input[name="deletemember"]').after('<input name="pre_deletemember" type="submit" value="会員情報を削除する">');
        
        $('#memberinfo .send input[name="pre_deletemember"]').on('click',function () {
            if(confirm('メールマガジンが解除されます。よろしいですか？')==true){
            $.ajax({
                type: "POST",
                url: "https://*****.***/acmailer3/reg.cgi",
                data: regdata0,
                timeout: 5000,
                dataType: 'text'
            });
            deletemember_check();
           }
        }); 
    }
});

function deletemember_check(){
  var ret = confirm("会員に関する全ての情報が削除されます。よろしいですか？");
  if (ret == true){
    jQuery(function(){
      $('.send input[name="pre_deletemember"]').after(
        '<input name="deletemember" value="会員情報を削除する" type="hidden">'
      );
    });
  }
}

メンバー登録ページにはチェックボックスタイプで『受け取る』の1つだけにする。
チェックボックに変化があるとプログラムが走ります。
checkedになると、メールアドレスをcgiに投げる。チェックが外れた場合も削除としてcgiにデータを送る。

基本的には新規登録ページも情報変更ページも同じなんですが、情報変更ページはアドレスが変わる事もあると思うので、アドレスの入力値が変化があればプログラムが走るようにセット。
この時に、もしかするとアドレス書き間違いがあるかも知れないから、1つ前の入力値もGETしておく。
そして、常に1つ前のアドレスは削除に送り、現在のアドレスは登録に送る。

この動きの条件は、チェックボックスにチェックがある場合にifで条件指定。

ついでに前述の通り、チェックボックスに変化があるとcgiにデータを投げているので、外れた時点でメルマガは解除される。

一番問題だったのは、会員情報削除との連動。
コレはどうしてもinput要素で行う必要があったので、動きを2段階にした。

参考にさせて頂いたサイト様では、新しい関数の中でメルマガ解除と情報削除を同時に行う感じにだったのですが、それだとFirefoxでは動かない。もしかすると他のブラウザでも動かない可能性がある(IEとクロームは動いてた)ので、1つ1つ確実に処理をさせるように変更。

まずはメルマガ解除のアラートを出して、その後情報削除のアラートを出す。
情報削除のアラートが出る時にはすでにメルマガは解除されているので確実に動くはず。

Firefox,IE,クロームでは完璧だった。
けど、サファリが手元に無いので分からない(汗)　後で誰かのマックかipad借りないと分からないけど、ホトンドの場所でjqueryのみを使う感じになっているので多分大丈夫だと思う。

まとめ

当たり前ですがjqueryとjavascriptの同時実行はチョット問題があるッポイですね。
もし上に書いたコードを使いたい場合は、ウチのサイトと条件を揃える必要がありますよ。テキストエディタで見れば基本的名流れは分かりやすいでしょうから、変えるべき部分は変えて下さい。

ついでにajaxって本当に便利ですが、今思えばそこも関数にしたほうがシンプルになった気がします。少し軽くなるくらいだからやらないけど。

余談ですが、同じようなコードをカートページにも使う事でソッチも連動させられます。

ではでは

---

---