EC-CUBE 商品一覧ページのカスタマイズ方法

Pocket

page-product-list

EC-CUBE 商品一覧ページのカスタマイズ方法

商品一覧ページのファイル構成

EC-CUBEの商品一覧ページのカスタマイズに必要なファイルは以下の場所にあります。

  • data->class->pages->products->LC…Products_List.php
  • data->class_extends->pages_extends->products->LC…Products_List_Ex.php
  • html->products->list.php
  • data->Smarty->templates->template_name->products->list.tpl
  • html->user_data->packages->template_name->css->contents.css

上の2つがクラスファイル。取得したいデータを変更したい場合はここを変更します。3つめはコントローラ。4つめがテンプレート。HTMLの構造を変更するときはここを変更します。最後がCSSファイル。テンプレートファイル内のpackagesフォルダにもCSSがありますが、ここを変更してもスタイルが変わらないので注意。

商品情報一覧ページの見た目をカスタマイズ

EC-CUBEの商品情報一覧のスタイルをカスタマイズするには、主にcontents.cssを編集します。デフォルトでは190行目あたりからおすすめ商品のスタイルが設定されています。
page-product-list-css

商品一覧ページで使えるデータ一覧

EC-CUBEのlist.phpクラスで使えるデータ、配列は以下の通り。action関数内で飛び交う変数や配列は多いですが、実際使うのは少なめです。

  • $arrSearch : 検索条件の配列、カテゴリーとかメーカーとか
  • $arrProducts : ID別の商品情報配列、ステータスもくっついてる
  • $tpl_subtitle : ページタイトル
  • $disp_number : ページの表示件数
  • $tpl_pageno : 現在のページナンバー?

$arrProductsから取得できるデータ配列は以下の通り。

array(4) {
  [2]=>
  array(26) {
    ["product_id"]=>
    string(1) "2"
    ["product_code_min"]=>
    string(7) "nabe-01"
    ["product_code_max"]=>
    string(7) "nabe-01"
    ["name"]=>
    string(9) "おなべ"
    ["comment1"]=>
    NULL
    ["comment2"]=>
    NULL
    ["comment3"]=>
    string(17) "鍋,なべ,ナベ"
    ["main_list_comment"]=>
    string(30) "一人用からあります。"
    ["main_image"]=>
    string(11) "nabe260.jpg"
    ["main_list_image"]=>
    string(11) "nabe130.jpg"
    ["price01_min"]=>
    string(4) "1700"
    ["price01_max"]=>
    string(4) "1700"
    ["price02_min"]=>
    string(4) "1650"
    ["price02_max"]=>
    string(4) "1650"
    ["stock_min"]=>
    string(2) "97"
    ["stock_max"]=>
    string(2) "97"
    ["stock_unlimited_min"]=>
    string(1) "0"
    ["stock_unlimited_max"]=>
    string(1) "0"
    ["deliv_date_id"]=>
    string(1) "3"
    ["status"]=>
    string(1) "1"
    ["del_flg"]=>
    string(1) "0"
    ["update_date"]=>
    string(19) "2014-06-26 15:02:50"
    ["price01_min_inctax"]=>
    float(1836)
    ["price01_max_inctax"]=>
    float(1836)
    ["price02_min_inctax"]=>
    float(1782)
    ["price02_max_inctax"]=>
    float(1782)
  }
}

データの出力方法

商品情報は普通の配列なのでforeachやsection関数で繰り返し処理をすることで取得できます。

<!--{foreach from=$arrProducts item=arrProduct name=arrProducts}-->

  // ここに商品情報を表示

<!--{foreachelse}-->

  // 商品がなかった場合の処理、デフォルトでは以下のテンプレートを呼び出し
        <!--{include file="frontparts/search_zero.tpl"}-->

<!--{/foreach}-->