a-blog cmsで、カスタムフィールドを使った複雑な表示切り換えをする

これは、a-blog cms Advent Calendar 2013の、18日目の記事です。

カスタマイズの記事を書くの、ものすごく久しぶりな気がするのですが。



CMSで商品情報などを掲載する場合、カスタムフィールドで「価格」「個数」「単位」を設定すれば、上のような表示は難しくありません。

ですが、下の画像のように
「単位がグラムだったときだけ、100グラムあたりの価格を掲載したい」
「表記方法も変更したい」
と言われた場合、どうすればいいでしょうか。



以前のa-blog cmsは、カスタムフィールドをPHPで加工することができなかったので、「100グラムあたりの価格」のフィールドを別途作らなければなりませんでした。

ですが、バージョン1.6からは「フック」を使うことで自動計算が可能になっています。

ちょっと難しいですが、その方法をご紹介します。

カスタムフィールドを作る



まず、カスタムフィールドを作ります。
これについてはa-blog cmsの普通の制作手順と同じです。入力も普通に行います。

ここでは、フィールド名を以下のようにしています。

価格Price
個数Quantity
単位Unit

フックを作る

次に、エントリーページだけで有効になる、グローバル変数を作ります。

a-blog cms本体に含まれている「/php/ACMS/User/Hook.php」というファイルを開くと、後半に以下のような箇所があります。

    /**
     * グローバル変数の拡張
     *
     * @param array $globalVars
     */
    public function extendsGlobalVars($globalVars)
    {

        // $globalVars->set('key', 'var');

    }

これを、以下のように書き替えて、上書き保存してください。

    /**
     * グローバル変数の拡張
     *
     * @param array $globalVars
     */
    public function extendsGlobalVars($globalVars)
    {

        if( EID ){
            $entry_field = loadEntryField(EID);
            $entry_field_unit = $entry_field->get('Unit');

            if($entry_field_unit == 'グラム') {
                $entry_field_price = $entry_field->get('Price');
                $entry_field_quantity = $entry_field->get('Quantity');
                $entry_field_100 = round($entry_field_price / $entry_field_quantity * 100, 1);
                $globalVars->setField('PRICELIST', 'b');
                $globalVars->setField('G100', $entry_field_100);
            } else {
                $globalVars->setField('PRICELIST', 'a');
            }

        }

    }

細かい説明はここでは割愛しますが、以下のようなグローバル変数を作っています。

  1. 表示しているのがエントリーテンプレートだったら
  2. そのエントリーのカスタムフィールドの「Unit」を抜き出して
  3. 値が「グラム」だったら、グローバル変数の「PRICELIST」の値を「b」にする
  4. また、100グラムあたりの価格を計算し、グローバル変数の「G100」の値をその価格にする
  5. 値が「グラム」ではなかったら、グローバル変数の「PRICELIST」の値を「a」にする

価格表示部分をインクルードにする

a-blog cmsに慣れている人はなんとなくわかってきたと思いますが…

エントリーテンプレートの、価格を表示する部分をインクルードにして、さっきのグローバル変数「PRICELIST」の値を、ファイル名に含めます。

<!--#include file="/include/pricelist_%{PRICELIST}.html"-->

値が「a」なら読み込まれるファイル名は「/include/pricelist_a.html」、
値が「b」なら読み込まれるファイル名は「/include/pricelist_b.html」になります。

価格表示部分のファイルを作る

価格表示部分は、二種類のファイルを作ります。

ポイントは、/include/pricelist_b.htmlの方です。
「100グラムあたりの価格」が、グローバル変数で表示されています。

/include/pricelist_a.html

<div style="margin: 2em 0; padding: 10px 10px 5px; background: #FFEECC;">
<p>{Quantity}{Unit} <b><span style="font-size: 200%;">{Price}[number_format]</span>円</b></p>
</div>

/include/pricelist_b.html

<div style="margin: 2em 0; padding: 10px 10px 5px; background: #FFCCEE;">
<p><b>{Quantity}グラム <span style="font-size: 200%;">{Price}[number_format]</span>円</b> (100グラムあたり %{G100}円)</p>
</div>

以上で完成です。

ページを表示してみると、単位がグラムのときと、そうでないときで表示方法が変わります。

補足

このカスタマイズはかなり初歩の方で、PHPを本格的に書ける人であれば、APIを駆使してかなり高度な加工をフックを作ることもできます。

ですが、a-blog cmsは本来、プログラムをほとんど書かずに構築できるよう設計されたCMSなので、このあたりは、どうしても対応できないときの奥の手と考えた方が良いでしょう。
見た目だけ変えるのであれば、JavaScriptのDOM操作の方がお手軽で、メンテナンスが容易だと思います。

フックとグローバル変数の作成の詳しい解説は、アップルップル山本さんの記事を参照ください。


この記事をシェアする

この記事を書いた人

フロントエンドエンジニア

うぇびん

愛知県豊橋市の、荒ぶるフリーランスおばさんエンジニア。主な業務はCMSの構築、ウェブ制作全般。a-blog cms・WordPress・MTなど。マイクラ歴12年。得意な魔法はバイオだけど、そろそろ魔人さんにクラスチェンジしてフレアを撃ちたい。
個人のTwitter: @webbingstudio