EC-CUBEの「おすすめ商品」ブロックで表示する商品数を制限する方法

EC-CUBEの「おすすめ商品」ブロックで表示する商品数を制限する方法

スポンサードリンク
EC-CUBEの「おすすめ商品」ブロックで表示する商品数を制限する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • 大量にアクセスを呼び込みザクザク稼げてしまう21世紀最強の無料ツールを発見!!
  • このエントリーをはてなブックマークに追加

EC-CUBEには、デフォルトで「おすすめ商品」というブロックが存在しています。おすすめ商品ブロックを設置すると、EC-CUBE管理画面の[コンテンツ管理] – [おすすめ商品管理]で登録した商品が表示されます。

そのままだと、おすすめ商品に登録した商品がすべて表示されますが、表示する商品数を制限したい場合もあるかと思います。そんな時のために、おすすめ商品の表示数を制限する方法をご紹介いたします。

おすすめ商品ブロックの表示数を変更する方法

まずはおすすめ商品ブロックの編集画面を開きましょう。

おすすめ商品の表示数を制限するには、foreachの後に以下を追加してあげます。

recommend.tpl
<!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
<!--{if $smarty.foreach.recommend_products.index < 5 }-->

上記の例だと、おすすめ商品が5つまで表示されます。「5」の部分を表示させたい数に変更してください。

foreachの閉じタグの前にifの閉じタグもお忘れなく。

recommend.tpl
<!--{/if}-->
<!--{/foreach}-->

ブロック全体としては、以下のようになります。

recommend.tpl
<!--{if count($arrBestProducts) > 0}-->
<div class="block_outer clearfix">
<div id="recommend_area">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_recommend.png" alt="*" class="title_icon" /></h2>
<div class="block_body clearfix">
<!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
<!--{if $smarty.foreach.recommend_products.index < 5 }-->
<div class="product_item clearfix">
<div class="productImage">
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->">
<img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" style="max-width: 80px;max-height: 80px;" alt="<!--{$arrProduct.name|h}-->" />
</a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
</h3>
<p class="sale_price">
<!--{$smarty.const.SALE_PRICE_TITLE}-->(税込): <span class="price"><!--{$arrProduct.price02_min_inctax|n2s}--> 円</span>
</p>
<p class="mini comment"><!--{$arrProduct.comment|h|nl2br}--></p>
</div>
</div>
<!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}-->
<div class="clear"></div>
<!--{/if}-->
<!--{/if}-->
<!--{/foreach}-->
</div>
</div>
</div>
<!--{/if}-->

あとがき

PCとスマホでテンプレートが分かれている場合に、スマホだけ表示数を少なくするといったこともできますね。

参考になれば幸いです。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。