EC-CUBE カテゴリーブロックの使い方とカスタマイズ方法

Pocket

EC-CUBEカテゴリブロックの使い方とカスタマイズ方法
EC-CUBEのカテゴリブロックではカテゴリ一覧をツリー形式で取得し、表示してくれます。これは複数階層のカテゴリーがある場合に便利な機能。

このページではカテゴリーブロックとカテゴリークラスの使い方を紹介します。

EC-CUBEカテゴリーブロックの使い方

カテゴリクラスとブロックのファイル構成

EC-CUBEのカテゴリブロックのカスタマイズに必要なファイルは以下の場所にあります。

  • data->class->pages->frontparts->bloc->LC…Category.php
  • data->class_extends->pages_extends->frontparts->bloc->LC…Category.php
  • html->frontparts->bloc->category.php
  • data->Smarty->templates->template_name->frontparts->bloc->category.tpl
  • data->Smarty->templates->template_name->frontparts->bloc->category_tree_fork.tpl
  • html->user_data->packages->template_name->css->bloc.css

カテゴリーブロックの見た目をカスタマイズ

EC-CUBEのカテゴリーパネルのスタイルをカスタマイズするには、bloc.cssを編集します。デフォルトでは160行目あたりからカテゴリブロックのスタイルが設定されています。
bloc-category-css

カテゴリブロックで使えるデータ一覧

EC-CUBEのカテゴリクラスでは現在のページのカテゴリとカテゴリツリーを取得できます。

  • $arrCat : メインカテゴリ、モバイルのみ
  • $tpl_category_id : 現在のページのカテゴリIDを取得
  • $arrTree : カテゴリー一覧をツリーで取得

データの出力方法

データを個別に取り出すには以下のようにします。

// 現在のページのカテゴリを取得
<!--{$tpl_category_id[0]}-->

デフォルトのカテゴリーブロックではcategory.tplからcategory_tree_fork.tplを呼び出しています。category_tree_fork.tplではカテゴリツリーの繰り返し処理を行っているのですが、少し分かりにくいですね。

簡単に解説するとこんな感じです。

<ul>
  <!--{foreach from=$children item=child}-->
    <li>
       // リストの表示処理、省略
      
       // もし現在のカテゴリにchildrenがセットされてれば、
      <!--{if isset($child.children|smarty:nodefaults)}-->

        // 現在のカテゴリループ内でcategory_tree_fork.tplを読み込み
        // その際ループで使用する配列は親カテゴリのchildren配列
        <!--{include 
            file="`$smarty.const.TEMPLATE_REALDIR`frontparts/bloc/category_tree_fork.tpl" 
            children=$child.children
            display=$disp_child
        }-->

      <!--{/if}-->
    </li>
  <!--{/foreach}-->
</ul>

要は小カテゴリがあれば、小カテゴリーの配列を使ってテンプレートを読み込むということです。