質問 > フロント機能 > [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 |
フロント機能
フラット表示 | 前のトピック | 次のトピック |
投稿者 | スレッド |
---|---|
istn |
投稿日時: 2011/12/3 19:50
対応状況: −−−
|
常連 ![]() ![]() 登録日: 2011/11/10 居住地: 投稿: 31 |
[EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 [EC-CUBE] 2.11.4正式版
[レンタルサーバ] さくらインターネット スタンダードプラン [OS] FreeBSD 7.1-RELEASE-p16 i386 [PHP] PHP 5.2.17 [データベース] MySQL 5.5 [WEBサーバ] Apache/1.3.42 (Unix) mod_ssl/2.8.31 OpenSSL/0.9.8e お世話になっております。 http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=2412&forum=10 http://xoops.ec-cube.net/modules/newbb/viewtopic.php?viewmode=flat&topic_id=8977&forum=10 上記二つのページを参考に変更を加えて見ましたが買い物かごへ入れるボタンが消えただけで変更されませんでした。 どこをどう変更したらいいのか全くわからず行き詰っております。 現在の user_data/packages/テンプレート名/css/contents.css と data/Smarty/templates/テンプレート名/products/list.tpl は下記の通りです。 /* ============================================== ▼商品一覧 =============================================== */ /* ページ送り ----------------------------------------------- */ .pagenumber_area { padding-bottom: 10px; background: url("../img/background/line_dot_01.gif") repeat-x bottom ; } .pagecond_area { margin-bottom: 20px; padding: 10px; } .pagenumber_area { margin: 20px 0; } .pagecond_area { border: 1px solid #ccc; } .pagenumber_area .navi { width: 100%; text-align: left; } .pagenumber_area .navi li { display: inline; } .pagenumber_area .change { float: right; text-align: right; white-space: nowrap; color: #333; } /* レイアウト ----------------------------------------------- */ div.list_area { padding: 0 0 30px 0; width: 100%; overflow: auto; clear: both; } div.listphoto { float: left; } /* メインカラム用 1カラム時*/ #one_maincolumn div.listrightbloc { float: right; width: 74%; } /* メインカラム用 2カラム時*/ #two_maincolumn_right div.listrightbloc , #two_maincolumn_left div.listrightbloc { float: right; width: 80%; } /* メインカラム用 3カラム時*/ #three_maincolumn div.listrightbloc { float: right; width: 74%; } /* 商品情報 各種設定 ----------------------------------------------- */ /* 商品ステータス */ div.listrightbloc ul.status_icon { margin-bottom: 10px; width: 100%; } div.listrightbloc ul.status_icon li { margin-right: 5px; float: left; } /* 商品名 */ div.listrightbloc h3 { font-weight: bold; font-size: 120%; } /* コメント */ div.listrightbloc .listcomment { margin: 0 0 10px 0; text-align: left; color: #666; } /* 商品詳細を見る */ div.listrightbloc .detail_btn { margin-bottom: 20px; } /* 価格 */ div.listrightbloc .pricebox { margin: 0 0 10px 0; } /* 買い物かご */ div.listrightbloc .cart_area { padding: 10px; border: 1px solid #cee0f4; background-color: #e9f1fa; width: 94%; } /* 規格 */ div.listrightbloc .classlist { margin-bottom: 10px; padding-bottom: 10px; background: url("../img/background/line_dot_02.gif") repeat-x bottom ; } div.listrightbloc dl { width: 100%; } div.listrightbloc dt { display: inline-block; vertical-align: top; } div.listrightbloc dd { padding-bottom: 10px; display: inline-block; } div.listrightbloc dd p.attention { margin-top: 5px; } /* カゴに入れる */ div.listrightbloc .cartin { margin: 0; float :right; } div.listrightbloc .cartin .quantity { padding: 3px 10px 0 0; width: 150px; float :left; text-align: right; } div.listrightbloc .cartin .quantity .box { width: 70px; } div.listrightbloc .cartin_btn { width: 160px; float :left; } //////////////////////////// <!--▼商品--> <form name="product_form<!--{$id|h}-->" action="?" onsubmit="return false;"> <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" /> <div class="list_area clearfix"> <a name="product<!--{$id|h}-->"></a> <div class="listphoto"> <!--★画像★--> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" alt="<!--{$arrProduct.name|h}-->" class="picture" /></a> </div> <div class="listrightbloc"> <!--▼商品ステータス--> <!--{if count($productStatus[$id]) > 0}--> <ul class="status_icon clearfix"> <!--{foreach from=$productStatus[$id] item=status}--> <li> <img src="<!--{$TPL_URLPATH}--><!--{$arrSTATUS_IMAGE[$status]}-->" width="60" height="17" alt="<!--{$arrSTATUS[$status]}-->" /> </li> <!--{/foreach}--> </ul> <!--{/if}--> <!--▲商品ステータス--> <!--★商品名★--> <h3> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a> </h3> <!--★価格★--> <div class="pricebox sale_price"> <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込): <span class="price"> <span id="price02_default_<!--{$id}-->"> <!--{if $arrProduct.price02_min == $arrProduct.price02_max}--> <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> <!--{else}--> <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->〜<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}--> <!--{/if}--> </span><span id="price02_dynamic_<!--{$id}-->"></span> 円</span> </div> <!--★コメント★--> <div class="listcomment"><!--{$arrProduct.main_list_comment|h|nl2br}--></div> <!--★商品詳細を見る★--> <div class="detail_btn"> <!--{assign var=name value="detail`$id`"}--> <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_detail_on.jpg','<!--{$name}-->');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_detail.jpg','<!--{$name}-->');"> <img src="<!--{$TPL_URLPATH}-->img/button/btn_detail.jpg" alt="商品詳細を見る" name="<!--{$name}-->" id="<!--{$name}-->" /></a> </div> <!--▼買い物かご--> <input type="hidden" name="product_id" value="<!--{$id|h}-->" /> <input type="hidden" name="product_class_id" id="product_class_id<!--{$id|h}-->" value="<!--{$tpl_product_class_id[$id]}-->" /> <div class="cart_area clearfix"> <!--{if $tpl_stock_find[$id]}--> <!--{if $tpl_classcat_find1[$id]}--> <div class="classlist"> <dl class="size01 clearfix"> <!--▼規格1--> <dt><!--{$tpl_class_name1[$id]|h}-->:</dt> <dd> <select name="classcategory_id1" style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->"> <!--{html_options options=$arrClassCat1[$id] selected=$arrProduct.classcategory_id1}--> </select> <!--{if $arrErr.classcategory_id1 != ""}--> <p class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</p> <!--{/if}--> </dd> <!--▲規格1--> </dl> <!--{if $tpl_classcat_find2[$id]}--> <dl class="size02 clearfix"> <!--▼規格2--> <dt><!--{$tpl_class_name2[$id]|h}-->:</dt> <dd> <select name="classcategory_id2" style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->"> </select> <!--{if $arrErr.classcategory_id2 != ""}--> <p class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</p> <!--{/if}--> </dd> <!--▲規格2--> </dl> <!--{/if}--> </div> <!--{/if}--> <div class="cartin clearfix"> <div class="quantity"> 数量:<input type="text" name="quantity" class="box" value="<!--{$arrProduct.quantity|default:1|h}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" /> <!--{if $arrErr.quantity != ""}--> <br /><span class="attention"><!--{$arrErr.quantity}--></span> <!--{/if}--> </div> <div class="cartin_btn"> <!--★カゴに入れる★--> <div id="cartbtn_default_<!--{$id}-->"> <input type="image" id="cart<!--{$id}-->" src="<!--{$TPL_URLPATH}-->img/button/btn_cartin.jpg" alt="カゴに入れる" onclick="fnInCart(this.form); return false;" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_cartin_on.jpg', this);" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_cartin.jpg', this);" /> </div> <div class="attention" id="cartbtn_dynamic_<!--{$id}-->"></div> </div> </div> <!--{else}--> <div class="cartbtn attention">申し訳ございませんが、只今品切れ中です。</div> <!--{/if}--> </div> <!--▲買い物かご--> </div> </div> </form> <!--▲商品--> <!--{if $smarty.foreach.arrProducts.last}--> <!--▼ページナビ(下部)--> <form name="page_navi_bottom" id="page_navi_bottom" action="?"> <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" /> <!--{if $tpl_linemax > 0}--><!--{$smarty.capture.page_navi_body|smarty:nodefaults}--><!--{/if}--> </form> <!--▲ページナビ(下部)--> <!--{/if}--> <!--{foreachelse}--> <!--{include file="frontparts/search_zero.tpl"}--> <!--{/foreach}--> </div> <!--▲CONTENTS--> 試行錯誤し、いろいろと変更をしてみましたがうまく行きませんでした。 1列のみの表示ですと、商品が多い場合とても見にくいので3列にて表示をしたいと思っております。 どなたかお分かりになる方、教えて頂けると幸いです。 |
フラット表示 | 前のトピック | 次のトピック |
題名 | 投稿者 | 日時 |
---|---|---|
» ![]() |
istn | 2011/12/3 19:50 |
![]() |
tanaca | 2011/12/4 11:43 |
![]() |
istn | 2011/12/4 17:08 |
![]() |
istn | 2011/12/4 19:54 |
![]() |
tanaca | 2011/12/5 11:59 |
![]() |
istn | 2011/12/5 22:13 |
![]() |
tanaca | 2011/12/6 13:17 |
![]() |
istn | 2011/12/8 22:41 |
![](images/pixel.gif)