［EC-CUBE覚書（ver2.4）］トップのオススメ商品の列数を変更する

2010年10月8日2012年7月15日

実は今までデフォルトの２列をfloatにしてごまかしていたのですが、
行を増やす修正があったので、ついでにがっつり取り組んでみたら、できました！

特に公式フォーラムのここのページと紹介されてたページが一番参考になりました。
おすすめ商品の表示を変えたい｜EC-CUBE 開発コミュニティ – フォーラム

WIZ-WORDPRESS│EC-CUBE-LABO – EC-CUBE おすすめ商品の列を増やす

オススメの表示について。1列や3列、4列表示できるかどうか？｜EC-CUBE 開発コミュニティ – フォーラム

で、完成したのが以下。

・欲しい列の数分のブロックを作成する
・各々のブロックの
の[step=X]の値を、増やした数に合わせて修正
・列の最後のブロックだけは、とする
・それぞれのブロックの「cnt［数字］」を全て書き換え
・列の最後のブロックのClass名は、「recomendleft」から「recomendright」に変更したほうがよいかも。

ちょっとモヤモヤしてるのが、列の最後のブロックだけが、step=1にするとこ。

<!--▼おすすめ情報ここから-->
<!--{if count($arrBestProducts) > 0}-->
<div id="recomendarea">
  <h2>
    <img src="<!--{$TPL_DIR}-->img/top/osusume.jpg" width="700" height="29" alt="おすすめ情報" />
  </h2>
  <!--{section name=cnt loop=$arrBestProducts step=4}-->
  <div class="recomendblock">
    <div class="recomendleft">
    <!--{if $arrBestProducts[cnt].main_list_image != ""}-->
      <!--{assign var=image_path value="`$arrBestProducts[cnt].main_list_image`"}-->
    <!--{else}-->
      <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
    <!--{/if}-->

      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[cnt].product_id}-->">
        <img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=170&height=170" alt="<!--{$arrBestProducts[cnt].name|escape}-->" /></a>
      <h3>
        <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[cnt].product_id}-->"><!--{$arrBestProducts[cnt].name|escape}--></a>
      </h3>

<!--{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}-->

      <p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
  <!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
  <!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円
        </span>
      </p>
      <p class="mini"><!--{$arrBestProducts[cnt].comment|escape|nl2br}--></p>
    </div>

<!-- おすすめ商品２つめ -->
    <div class="recomendleft">
      <!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2` }-->
      <!--{if $arrBestProducts[$cnt2]|count > 0}-->
        <!--{if $arrBestProducts[$cnt2].main_list_image != ""}-->
          <!--{assign var=image_path value="`$arrBestProducts[$cnt2].main_list_image`"}-->
        <!--{else}-->
          <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
        <!--{/if}-->

      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt2].product_id}-->">
        <img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt2].name|escape}-->" /></a>
      <h3>
      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt2].product_id}-->"><!--{$arrBestProducts[$cnt2].name|escape}--></a>
      </h3>

<!--{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}-->

      <p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
  <!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
  <!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</span>
      </p>

      <p class="mini"><!--{$arrBestProducts[$cnt2].comment|escape|nl2br}--></p>
      <!--{/if}-->
    </div>
<!-- おすすめ商品２つめ終了 -->

<!-- おすすめ商品３つめ -->
    <div class="recomendleft">
      <!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-3` }-->
      <!--{if $arrBestProducts[$cnt3]|count > 0}-->
        <!--{if $arrBestProducts[$cnt3].main_list_image != ""}-->
          <!--{assign var=image_path value="`$arrBestProducts[$cnt3].main_list_image`"}-->
        <!--{else}-->
          <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
        <!--{/if}-->

      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt3].product_id}-->">
        <img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt3].name|escape}-->" /></a>
      <h3>
      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt3].product_id}-->"><!--{$arrBestProducts[$cnt3].name|escape}--></a>
      </h3>

<!--{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}-->

      <p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
  <!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
  <!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</span>
      </p>

      <p class="mini"><!--{$arrBestProducts[$cnt3].comment|escape|nl2br}--></p>
      <!--{/if}-->
    </div>
<!-- おすすめ商品３つめ終了 -->

<!-- おすすめ商品４つめ -->
    <div class="recomendright">
      <!--{assign var=cnt4 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }-->
      <!--{if $arrBestProducts[$cnt4]|count > 0}-->
        <!--{if $arrBestProducts[$cnt4].main_list_image != ""}-->
          <!--{assign var=image_path value="`$arrBestProducts[$cnt4].main_list_image`"}-->
        <!--{else}-->
          <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
        <!--{/if}-->

      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt4].product_id}-->">
        <img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt4].name|escape}-->" /></a>
      <h3>
      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt4].product_id}-->"><!--{$arrBestProducts[$cnt4].name|escape}--></a>
      </h3>

<!--{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}-->

      <p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
  <!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
  <!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</span>
      </p>

      <p class="mini"><!--{$arrBestProducts[$cnt4].comment|escape|nl2br}--></p>
      <!--{/if}-->
    </div>
<!-- おすすめ商品４つめ終了 -->

  </div>
  <!--{/section}-->
</div>
<!--{/if}-->
<!--▲おすすめ情報ここまで-->




デフォルトの２列のオススメ商品ブロックのソース

<!--▼おすすめ情報ここから-->
<!--{if count($arrBestProducts) > 0}-->
<div id="recomendarea">
  <h2>
    <img src="<!--{$TPL_DIR}-->img/top/osusume.jpg" width="700" height="29" alt="おすすめ情報" />
  </h2>
  <!--{section name=cnt loop=$arrBestProducts step=2}-->
  <div class="recomendblock">
    <div class="recomendleft">
    <!--{if $arrBestProducts[cnt].main_list_image != ""}-->
      <!--{assign var=image_path value="`$arrBestProducts[cnt].main_list_image`"}-->
    <!--{else}-->
      <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
    <!--{/if}-->

      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[cnt].product_id}-->">
        <img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=170&height=170" alt="<!--{$arrBestProducts[cnt].name|escape}-->" /></a>
      <h3>
        <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[cnt].product_id}-->"><!--{$arrBestProducts[cnt].name|escape}--></a>
      </h3>

<!--{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}-->

      <p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
  <!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
  <!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円
        </span>
      </p>
      <p class="mini"><!--{$arrBestProducts[cnt].comment|escape|nl2br}--></p>
    </div>

    <div class="recomendright">
      <!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1` }-->
      <!--{if $arrBestProducts[$cnt2]|count > 0}-->
        <!--{if $arrBestProducts[$cnt2].main_list_image != ""}-->
          <!--{assign var=image_path value="`$arrBestProducts[$cnt2].main_list_image`"}-->
        <!--{else}-->
          <!--{assign var=image_path value="`$smarty.const.NO_IMAGE_DIR`"}-->
        <!--{/if}-->

      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt2].product_id}-->">
        <img src="<!--{$smarty.const.SITE_URL}-->resize_image.php?image=<!--{$image_path|sfRmDupSlash}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt2].name|escape}-->" /></a>
      <h3>
      <a href="<!--{$smarty.const.URL_DIR}-->products/detail.php?product_id=<!--{$arrBestProducts[$cnt2].product_id}-->"><!--{$arrBestProducts[$cnt2].name|escape}--></a>
      </h3>

<!--{assign var=price01 value=`$arrBestProducts[$cnt2].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[$cnt2].price02_min`}-->

      <p>価格<span class="mini">(税込)</span>：<span class="price">
<!--{if $price02 == ""}-->
  <!--{$price01|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{else}-->
  <!--{$price02|sfPreTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}-->
<!--{/if}-->円</span>
      </p>

      <p class="mini"><!--{$arrBestProducts[$cnt2].comment|escape|nl2br}--></p>
      <!--{/if}-->
    </div>
  </div>
  <!--{/section}-->
</div>
<!--{/if}-->
<!--▲おすすめ情報ここまで-->