EC-CUBEバージョン 2.11.1

トップページのおすすめ商品の部分のカスタマイズに挑戦しています。
http://www28.atwiki.jp/lucier/pages/14.html
などを参考に行っていますが、バージョンが違うせいなのか一向に前に進みません。

私が行いたいことは以下の通りです。

1：デフォルトで2列の画像を4列にしたい。
2：商品名、価格などを画像の下に配列したい。

皆様のご助言お待ちしています。
宜しくお願いいたします。

参考URLのコードをざっくり見てみましたが、
このブロックに関しては、2.11になっても変数名は変わっていないようですし、
2.4とほぼ同じカスタマイズ方法でいけそうな感じです。

まずは step=4 でループを回して、3列目の商品を表示させるカスタマイズを行い、
それがうまくいけば、4列目の商品を表示させるカスタマイズを行うといった具合に、
着実に進めていけばできると思います。


以下、余談です。（薦めているわけではありません）

このような列数を変えたいというご質問の時にいつも思うのですが、
loop を step=2 にして、飛び飛びでループさせなくても、
普通にループさせて、CSSで横並びにすればできるような気がするのですが、どうなんでしょう。
（異なるブラウザ間のCSSバグを排除できるというメリットはありますが。）

雰囲気としては以下のような感じでもできそうに思います。（未検証です）

<!--{section name=cnt loop=$arrBestProducts}-->
　　<div>オススメ商品の情報</div>
<!--{/section}-->

結果として、各々のオススメ商品が縦に表示される。
それをCSSで横並びに変更。

<style type="text/css">
　　div { float:left; width:150px; }
</style>

fukapさま

ご返答ありがとうございます。

今一度チャレンジしてみます。
初心者なもので、これからもご教授願えれば助かります。

宜しくお願いいたします。
ありがとうございました。

fukapさま

ご返答ありがとうございます。
4列の標示に成功しました。

あとは画像の下に、商品名及び価格などを移動したいと思います。
現在は横に配列されていますが、画像の下に移動するには、どの辺りを
修正すればよいのかご教授願います。

宜しくお願いいたします。

2.11.1 であれば、html/user_data/packages/default/css/bloc.css に、該当CSSが記述されていると思います。

各オススメ商品ブロックは、画像部分を div.productImage で、それ以外の部分を div.productContents で定義しており、
div.productImage に float:left が、div.productImage に float:right がかかっています。
このあたりを地道に無効にすれば、希望内容に近づくのではないでしょうか。
また、#recomend_area .bloc_body img の float も解除が必要かと思います。

> 普通にループさせて、CSSで横並びにすればできるような気がするのですが、どうなんでしょう。

できますよ。ただし、商品ごとのボックスの高さが可変の場合は、カラム数を意識した対応が必要です。

loop step で無くても対応可能ですね。私どもの場合ですと、foreach iteration (or index) 辺りの剰余で分岐させる事例が多いです。まぁ この辺りは、個々のサイトでのカスタマイズの場合、好みで良いと思います。

他にも jQuery プラグイン辺りで対応する方法もありますが・・・ 後々面倒なことになることも考えられるので、HTML (Smarty テンプレート) + CSS で解決した方が無難ですね。

----------------
Seasoft
こちらでの投稿は、アイディア程度に留めさせていただいております。
個別案件の作業は有償で承っております。お気軽にご相談ください。

fukapさま

何とか苦慮しながらトップページのおすすめ画像の部分を4列にレイアウトできました。
（商品名及び価格などは画像の下に配列できました）

しかし、商品一覧のレイアウトもずれてしまいました。
こちらは、通常通り縦並びの一覧にしたいと考えています。

また、画像サイズもパラメーター設定にて調整しましたが、サイズの大きさが変わらない状態です。

たびたび申し訳ございませんが、ご教授願います。
お願いばかりですみません。

どのような作業をされたかわからないのでなんとも言えませんが。

オススメ商品のカスタマイズを行う場合は、
html/user_data/packages/default/css/bloc.css と、
data/Smarty/templates/default/frontparts/bloc/recommend.tpl の
カスタマイズがメインになると思いますので、商品一覧ページには直接的には影響しないような気がします。

商品一覧ページの場合は、
user_data/packages/default/css/contents.css と、
data/Smarty/templates/default/products/list.tpl あたりが影響すると思いますので、
そのあたりでご自分でカスタマイズした箇所がないか確認してみると良いと思われます。

p.s.　seasoft様
foreachという方法もあるのですね。参考にさせていただきます。コメントありがとうございます！

fukap 様

色々とご教授頂き誠にありがとうございます。
何とか回復いたしました。

画像サイズの修正を行いましたが、修正できません。
recommend.tpl

*}-->
<!--{if count($arrBestProducts) > 0}-->
<div class="bloc_outer clearfix">
<div id="recomend_area">
<h2><img src="<!--{$TPL_URLPATH}-->img/title/tit_bloc_recommend.jpg" alt="*" class="title_icon" /></h2>
<!--{section name=cnt loop=$arrBestProducts step=4}-->
<div class="bloc_body clearfix">
<div class="recomendleft clearfix">
<div class="productImage">
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[cnt].product_id|u}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrBestProducts[cnt].main_list_image|sfNoImageMainList|h}-->&width=170&height=170" alt="<!--{$arrBestProducts[cnt].name|h}-->" /></a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[cnt].product_id|u}-->"><!--{$arrBestProducts[cnt].name|h}--></a>
</h3>
<!--{assign var=price01 value=`$arrBestProducts[cnt].price01_min`}-->
<!--{assign var=price02 value=`$arrBestProducts[cnt].price02_min`}-->
<p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
</p>
<p class="mini comment"><!--{$arrBestProducts[cnt].comment|h|nl2br}--></p>
</div>
</div>

<div class="recomendleft clearfix">
<div class="productImage">
<!--{assign var=cnt3 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-3`}-->
<!--{if $arrBestProducts[$cnt3]|count > 0}-->

<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[$cnt3].product_id|u}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrBestProducts[$cnt3].main_list_image|sfNoImageMainList|h}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt2].name|h}-->" /></a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[$cnt3].product_id|u}-->"><!--{$arrBestProducts[$cnt3].name|h}--></a>
</h3>

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

<p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
</p>
<p class="mini comment"><!--{$arrBestProducts[$cnt3].comment|h|nl2br}--></p>
<!--{/if}-->
</div>
</div>
<div class="recomendleft clearfix">
<div class="productImage">
<!--{assign var=cnt2 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-2`}-->
<!--{if $arrBestProducts[$cnt2]|count > 0}-->

<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[$cnt2].product_id|u}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrBestProducts[$cnt2].main_list_image|sfNoImageMainList|h}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt2].name|h}-->" /></a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[$cnt2].product_id|u}-->"><!--{$arrBestProducts[$cnt2].name|h}--></a>
</h3>

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

<p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
</p>
<p class="mini comment"><!--{$arrBestProducts[$cnt2].comment|h|nl2br}--></p>
<!--{/if}-->
</div>
</div>
<div class="recomendleft clearfix">
<div class="productImage">
<!--{assign var=cnt1 value=`$smarty.section.cnt.iteration*$smarty.section.cnt.step-1`}-->
<!--{if $arrBestProducts[$cnt1]|count > 0}-->

<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[$cnt1].product_id|u}-->">
<img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrBestProducts[$cnt1].main_list_image|sfNoImageMainList|h}-->&width=170&height=170" alt="<!--{$arrBestProducts[$cnt1].name|h}-->" /></a>
</div>
<div class="productContents">
<h3>
<a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrBestProducts[$cnt1].product_id|u}-->"><!--{$arrBestProducts[$cnt1].name|h}--></a>
</h3>

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

<p class="sale_price"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：
<span class="price"><!--{$price02|sfCalcIncTax:$arrInfo.tax:$arrInfo.tax_rule|number_format}--> 円</span>
</p>
<p class="mini comment"><!--{$arrBestProducts[$cnt1].comment|h|nl2br}--></p>
<!--{/if}-->
</div>
</div>

</div>
<!--{/section}-->
</div>
</div>
<!--{/if}-->

パラメーターでも行ってみましたが駄目でした。

ご教授お願いいたします。

resize_image.php のクエリ文字列内で、& を文字実体参照にするとか。