Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
この記事にトラックバックする(FC2ブログユーザー)
http://eccubememo.blog52.fc2.com/tb.php/21-0594c00b

トラックバック

コメント

コメントの投稿

コメントの投稿
管理者にだけ表示を許可する

EC-CUBEでAjax

ということでajaxサンプル。何かと便利ですよ。
というかECCUBE関係なく色んなところで使えますし。
Ajaxやってみるかとちょっと調べてみたらあちこちに色んなこと書いてあってウンザリするけど実際やることはコレだけなんですけど。みたいな。

・このサンプルでやること
管理画面の「受注管理」→「ステータス管理」で注文番号のとこをクリックしたら受注詳細画面がポップアップで表示されますが、このポップアップの画面でajaxで「メモ」欄を入力・保存するという若干横着なことをします。
いやまぁこれはあくまでサンプルの為なので。

このサンプルではajax送信先でDB更新してるけど、送信先で何をしようと通信方法は一緒なので、送信先のサーバー側でphpなどでやることを変えれば画面のリロードや画面遷移なしで検索して検索結果を返すことも、メールを送信したりすることも問題なく可能です。
例えば、商品の「品切れ中」表示の横に「問い合わせ」ボタンを付けて「問い合わせ」ボタン押下でテキストボックスと送信ボタンを表示(これは普通にjavascriptで)させて→(ajax)→ メール送信 ということも、画面を更新することなく、とか。

・ポップアップの受注詳細画面(若干カスタマイズしてるので標準とは違うけど気にしない)
ajaxサンプル1


・入力
ajaxサンプル2

・保存
ajaxサンプル3


手順1)
data/Smarty/templates/default/admin/order/disp.tpl(のhtmlのbody部)に以下のhtmlを追記。
______________________________________________________________________
<textarea cols="120" rows="4" id="note" name="note" style="ime-mode:active;"><!--{$arrForm["note"].value}--></textarea>
<input type="button" value="保存" onclick="javascript:RequestByPost();" />
______________________________________________________________________

手順2)
data/Smarty/templates/default/admin/order/disp.tpl(のhtmlヘッダ部)に以下のjavascriptを追記。
______________________________________________________________________

<script type="text/javascript" language="JavaScript">
//<![CDATA[
function createXMLHttpRequest(){
  /* XMLHttpRequest オブジェクトを作成する */
    if(window.addEventListener){
        ;/* Firefox 用 */
        ;return new XMLHttpRequest();
    }else{
        /* IE 用 */
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}
function XMLHttpRequestByPost(){
  /* リクエストを送る */
    var request = createXMLHttpRequest();

    //POST送信
    request.open("POST", "/admin/order/send_message.php" , true);
    request.onreadystatechange = readyStateChangeHandler;
    request.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded");
    request.send("order_id=" + document.getElementById('order_id').value + "&note=" + document.getElementById('note').value);

    //ステータス( 読み込み中か完了か) が変更されたら、readyStateChangeHandler を実行
    function readyStateChangeHandler(){
        switch(request.readyState){
        case 4:
        //完了の場合、send_message.phpから送られたデータを表示
          if(request.status == 200){
              document.getElementById('result').innerHTML = request.responseText;
          } else {
              document.getElementById('result').innerHTML = "通信エラー";
          }
          break;
        default:
          document.getElementById('result').innerHTML = "保存中..";
          break;
        }
    }
}
function RequestByPost(){
    XMLHttpRequestByPost();
}
//]]<
</script>
______________________________________________________________________

手順3)
data/class/pages/admin/order/ 下に LC_Page_Admin_Send_Msg.phpを作成。

LC_Page_Admin_Send_Msg.php
______________________________________________________________________
<?php
class LC_Page_Admin_Send_Msg {
  function process() {
    $objQuery = new SC_Query();
    if ((isset($_POST['order_id']))&&($_POST['order_id'] != "")) {
        if ($_POST['order_id'] > 0) {
            $note = trim($_POST['note']);
            $order_id = trim($_POST['order_id']);
            $arrUpdate["note"] = $note;
            $where = "order_id = ?";
            $objQuery->update("dtb_order", $arrUpdate, $where, array($order_id));
            echo "保存しました。";
        }
    }
  exit;
  }
  function destroy() {
  }
}
?>
______________________________________________________________________

手順4)
/admin/order/下(dataディレクトリの下じゃない方)に send_message.phpを作成。

/admin/order/send_message.php
______________________________________________________________________
<?php

// {{{ requires
require_once("/var/www/hogehoge.com/httpdocs/admin/require.php"); // admin/require.phpのフルパス
require_once(CLASS_PATH . "pages/admin/order/LC_Page_Admin_Send_Msg.php");

$objPage = new LC_Page_Admin_Send_Msg();
register_shutdown_function(array($objPage, "destroy"));
$objPage->process();
?>
______________________________________________________________________


以上!

この記事にトラックバックする(FC2ブログユーザー)
http://eccubememo.blog52.fc2.com/tb.php/21-0594c00b

トラックバック

コメント

コメントの投稿

コメントの投稿
管理者にだけ表示を許可する

Appendix

プロフィール

modezo

Author:modezo
モデゾー

思いたって書き始めたのが随分出来てからなので実は書くことがあんまりない。

全記事表示リンク

全ての記事を表示する

 

newsing

にほんブログ村 IT技術ブログ 自社サイト運用へ
にほんブログ村

ブランド和牛一覧
近江牛ステーキ・しゃぶしゃぶ
SEOTOOLS999|相互リンクSEO-P-Link ver3.5
匹夫の勇|相互リンクSEO-P-Link ver3.5
頓珍漢|相互リンクSEO-P-Link ver3.5

Googleページランク表示ツール PagerankExplore

あわせて読みたい

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。