HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

WM WP Form の出力をカスタマイズする

WM WP Form の出力をカスタマイズする必要がでてしまいました。

自作のメール送信プログラムぐらい柔軟な対応はできないにしても、

例えば、WM WP Form で入力された項目で計算を行い表示するといった買い物かご的な動きをさせたい。

具体的には、
プルダウンで商品を選び、数量を入力されたら、商品のテーブルを参照して金額を計算する。
もちろん、それぞれの合計も求める。




ここまでは、WM WP Form の設定でOKです。

商品名から商品の価格表を引くので、価格表を引くときのキーをプルダウンに設定しておきます。
全角文字でもいいんですけど、ここは、商品コードを設定しておきます。

セレクトタグは、こんな感じに設定します。
[mwform_select
name=”item_value1_1″
id=”item_value1_1″
class=”item_value”
children=”:— 商品を選んでください —,
1107:アマランサス,
1106:デトロイト,
1104:レッドキャベツ,
1101:ルッコラ,
1102:カラシミズナ,
1103:クレソン,
1105:チコリ,
1108:ミックス”
post_raw=”true”
]

事前にいっておきますけど、MW WP Form Generator は、使わないでください。
MW WP Form Generatorは、便利なようで便利じゃない。というかプログラムをからませる場合融通がきかない。
しかも、form7 のようにデフォルトのページをつくってくれないので逆に作業効率が悪い。

単純にエントリーさせて送るだけなら・・・にしても必須項目をいちいち設定するのが面倒で手間がかかります。
同じくくりのものは、おなじくくりで設定させていないので手間がかかる。

まぁ、好き付きですけど。少なくとも今回のようにプログラムを介在させようとおもったら使わないのが一番。

もちろん、混在させることは可能です。プログラムの絡んだFORMを設定するときには、MW WP Form Generatorを無効化して作業すれば問題ありません。というかMW WP Form Generatorでなんでデフォルトの設定枠を残しておかなかったんだろう?

組み合わせればいいだけだとおもうんだけど・・・・

は、おいといて・・・

商品一覧のテーブルを引く

1、割り込みを設定(商品名、数量)
2、商品テーブルから選択された商品のデータを引いて金額を求める

といった処理が必要になります。

1、割り込みを設定(商品名、数量)

MW WP Form には、OnChange とか OnKeyup といった割り込みを設定できません。
そこで、JQueryのお世話になります。

JavaScript ファイルを MW WP Form に取り込む。(ついでにCSSも取り込む)

テーマのfunction.php に以下を足します。

function my_scripts_method() {
wp_enqueue_script(
'custom-script', ← CSS の取り込みとはここが違う
get_template_directory_uri() . '/js/cals_script.js', ← javascript file
array( 'jquery' ) ← CSS の取り込みとはここが違う
);
wp_enqueue_style(
'custom-style', ← JavaScript の取り込みとはここが違う
get_template_directory_uri() . '/js/cals_script.css' ← css file
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );


jQuery(document).ready(function($){
$(‘#item_value1_1’).change(function(){ calc(); });
$(‘#item_count1_1’).keyup(function(){ calc(); });
      :
});

item_value1_1 は、プルダウンの選択フィールドの ID
item_count1_1 は、数量のフィールドの ID

つまり、商品選択フィールドは、「change」されたら、数量は、keyが上がったら calc という関数を呼び出すということです。

2、商品テーブルから選択された商品のデータを引いて金額を求める

計算関数
function calc(){
var total=0;
var kin;
var elm_val;
var elm_cnt;
var elm_tol;
var element_t;
var lval;
//——————–
elm_val = document.getElementById('item_value1_1');
elm_cnt = document.getElementById('item_count1_1');
elm_tol = document.getElementById('item_total1_1'); ← 行の金額
kin = get_kin(elm_val.value,'pric'); ←ここで商品テーブルを引く
if(eval(kin)>0 && eval(elm_cnt.value)>0 && elm_cnt.value!=""){ ← 商品が見つかっていたら
lval=kin * eval(elm_cnt.value); ← 行の金額計算
elm_tol.value=lval; ← 行の金額フィールドへ金額を設定
total+=lval; ← 合計を計算
}else{
elm_cnt.value="";
elm_tol.value="";
}
     :
element_t = document.getElementById('total');
element_t.value = separate( eval(total) ); ← 合計フィールドへ合計を設定
// separate は、金額表示に変換する関数。
}
function separate(num){
// 数字を3けたごとにカンマで区切り、頭に 円マークを付ける
return '¥' + String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
// 商品テーブルを引く関数
function get_kin(code,type)
{
if(code=='5107'){ if(type='pric'){ return '620'; } else { if( type='gram' ){ return '10g'} } }
if(code=='5106'){ if(type='pric'){ return '620'; } else { if( type='gram' ){ return '10g'} } }

return '0';
}


送信内容の商品コードを商品名にして送信

ここが難問。
つまり、MW WP Form のフックを使用しないと実現できません。

送信本文には、
{item_value1_1} {item_count1_1}<cr>

のように書いておきます。

このままで「送信」すると単に商品コードと数量が表示されますので、
メール本文を作成するときにフックして商品コードを商品名と数量に変更します。

フックしたときの $Mail_raw->body は、設定してある書式のままです。
なので、設定してある書式を str_replace で差し替えてしまいます。

// 管理者宛メール本文作成時の割り込み
add_filter( 'mwform_admin_mail_raw_mw-wp-form-136', 'autoback_my_mail', 10, 3 );
// 自動返信メール本文作成時の割り込み
add_filter( 'mwform_auto_mail_raw_mw-wp-form-136', 'autoback_my_mail', 10, 3 );
//
function autoback_my_mail( $Mail_raw, $values, $Data) {
$mycode = $Data->get( 'item_value1_1' );
if($mycode == "){
$Mail_raw->body = str_replace('{item_value1_1} {item_count1_1}<cr>',",$Mail_raw->body); // 本文を変更
}else{
$retblk=get_mydb($mycode,"name")." {item_count1_1}".get_mydb($mycode,"unit");
$Mail_raw->body = str_replace('{item_value1_1} {item_count1_1}',$retblk,$Mail_raw->body); // 本文を変更
}

}
//— 商品DB
function get_mydb($code,$type){
if($code=='商品コード'){
if($type=='name'){ return '商品名'; }
if($type=='unit'){ return "; }
}
if($code=='5107'){
if($type=='name'){ return 'アマランサス'; }
if($type=='unit'){ return '個'; }
}
if($code=='5106'){

}



スポンサーリンク



問題は、確認画面にある。MW WP Form 確認画面の内容を変更する

問題は、確認画面にあります。つまり確認画面の作成部分にフックが存在していないのです。
片手落ち orz

そこで、直接 MW WP Form を改良してしまいます。

場所は、plugins/mw-wp-form/classes/services/class.exec-shortcode.php になります。

mwform_formkey にページコンテンツを作ってくる関数があります。

商品を選択してない行には 「— 商品を選んでください —」と表示されてしまいますので
それを空行におきかえてしまいます。

できるのは、そこまでです。

さらに細かく処理しようとすると HTMLを解析して処理させないといけなくなります。
なので、せめて 「— 商品を選んでください —」 だけは捨ててやろうということです。

具体的には、こんな感じ。
public function mwform_formkey( $attributes ) {
$view_flg = $this->view_flg;
$form_id = $this->get_form_id_by_mwform_formkey( $attributes );
$form_key = MWF_Functions::get_form_key_from_form_id( $form_id );
do_action( 'mwform_before_load_content_' . $form_key );
// 送信エラー画面
if ( $this->Data->get_send_error() ) {
$content = $this->get_send_error_page_content( $form_id );
}
// 入力画面
elseif ( $view_flg === 'input' ) {
$content = $this->get_input_page_content( $form_id );
}
// 確認画面
elseif ( $view_flg == 'confirm' ) {
$content = $this->get_confirm_page_content( $form_id );
}
// 完了画面
elseif ( $view_flg === 'complete' ) {
$content = $this->get_complete_page_content();
} else {
$content = ";
}
do_action( 'mwform_after_load_content_' . $form_key );
// ここから下をカスタマイズしました。
$rtext = do_shortcode( $content );
if ( $view_flg == 'confirm' && $form_id == '136' ) {
// — yuzu app (デバッグ用スナップショット)
$fp = fopen(get_template_directory()."/js/mwform_debug.txt", "a");
fwrite($fp, "============\n");
fwrite($fp, "val=".$rtext."\n");
fclose($fp);
// — /yuzu app
$rtext = str_replace("ordertbl","ordertbl ordertblline",$rtext);
$rtext = str_replace("— 商品を選んでください —",'<div style="height:26px;width: 240px;"></div>',$rtext);
}
return $rtext;
// ここから上をカスタマイズしました。
// —オリジナルはこんな感じでした。
// return do_shortcode( $content );
}


rtext にもどってくるのは、生粋の HTML 文なので、さらにつっこもうとおもったら do_shortcode で置き換えを行っている モジュールを探すことで可能になります。が・・・今回はそこまで時間がありませんでした。

お役に立てれば幸いです。

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー