EC-CUBE おすすめ商品の使い方とカスタマイズ方法

Pocket

EC-CUBEおすすめ商品ブロックの使い方とカスタマイズ方法
おすすめ商品の表示はECサイトで一般的に採用されているコンテンツ。EC-CUBEでもおすすめ商品ブロックを使うことで簡単に実装できます。

デフォルトでは横長のレイアウトになっていますが、テンプレートをカスタマイズすればグリッドレイアウトの商品一覧を表示することも可能。

このページではEC-CUBEのおすすめ商品ブロックの使い方とカスタマイズ方法を紹介します。

EC-CUBEおすすめ商品ブロックの使い方

おすすめ商品クラスとブロックのファイル構成

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

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

おすすめ商品ブロックの見た目をカスタマイズ

EC-CUBEのおすすめ商品のスタイルをカスタマイズするには、bloc.cssを編集します。デフォルトでは330行目あたりからおすすめ商品のスタイルが設定されています。
bloc-recommend-css
おすすめブロックはデフォルトで横長のレイアウトになっていますが、CSSとテンプレートを少し修正するだけでグリッドレイアウトに変更することもできます。

おすすめ商品ブロックで使えるデータ一覧

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

  • $arrBestProducts : おすすめ商品一覧

この配列にはデータベースのdtb_best_productsとSC_Product.phpで設定されている商品情報が格納されています。
bloc-recommend-data

データの出力方法

おすすめリストは配列なので取り出すときはforeachを使って繰り返し処理を作ります。実際の使用方法などはデフォルトテンプレートを参照してください。

<!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
  <!-- ここに繰り返し処理 -->
  
  // 商品名
  <!--{$arrProduct.name|h}-->

  // 商品のURL
  <!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->

  // 商品価格
  <!--{$arrProduct.price02_min_inctax|number_format}-->

<!--{/foreach}-->