concrete5 のブロックで ajax を実装してみた

concrete5(ホームページ作成・運用ソフト、CMS)のカスタマイズ方法です。今回はブロック(concrete5でのコンテンツの単位)で ajax 処理を行ってみました。

今回は、QUICKNEM で使っている、NEM(XEM)と日本円の為替レートをajaxで表示するブロックを例に取り上げます。

※今回は、ブロックを作るorカスタマイズしたことがある人向けの記事です。

ブロックの controller.php で ajax 用のエンドポイントを作る

以下のようにします。

// action_XXXで、リクエストを受けるURLを設定する。
public function action_getprice(){
    $data = $this->getPrice();
    // jsonデータを返す
    $this->app->make('helper/ajax')->sendResult($data);
}

// データベースからデータを取ってくる処理
// データは連想配列で返す
protected function getPrice() {
    $db = Database::getActiveConnection();
    $price = $db->fetchAssoc("SELECT vwap, inserted FROM ounziwCryptoPrice ORDER BY inserted DESC", array());
    return $price;
}

ブロックの view.js で ajax を実行する

concrete5では jQuery が同梱されているので、jQueryでデータ取得します。(vue.js等を使う場合は、js読み込みの設定が必要になります。)

$(document).ready(function(){
    jQuery.ajax({
        url: $('span.xemratio').data('url'),
        dataType: 'json',
        type: 'post',
        success: function(response) {
            $('span.xemratio').text(response.vwap);
            $('span.xemdate').text(response.inserted);
        }
    });
    return false;
});

ちなみに view.phpは下記のようにしています。

<?php defined('C5_EXECUTE') or die("Access Denied.");?>
<p>
    1XEM = <span data-url="<?php echo $view->action('getprice')?>" class="xemratio"></span> 円(レート取得日時: <span class="xemdate"></span>)
</p>

こうすることで、ajaxでデータを取得することができました。