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

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

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

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

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

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

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

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

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

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

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

<!--{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とスマホでテンプレートが分かれている場合に、スマホだけ表示数を少なくするといったこともできますね。

参考になれば幸いです。