質問 > フロント機能 > [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列にて表示をしたいと思っております。 どなたかお分かりになる方、教えて頂けると幸いです。 |
tanaca |
投稿日時: 2011/12/4 11:43
対応状況: −−−
|
仙人 登録日: 2010/11/28 居住地: 福岡県 投稿: 332 |
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 テンプレートはデフォルトですか?
contents.cssの div.list_area { の内容が原因のような気がします。 |
istn |
投稿日時: 2011/12/4 17:08
対応状況: −−−
|
常連 登録日: 2011/11/10 居住地: 投稿: 31 |
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 いえ、テンプレートはデフォルトではなく
http://store.ec-cube.net/products/detail.php?product_id=182 こちらの無料のテンプレートを使っております。 |
istn |
投稿日時: 2011/12/4 19:54
対応状況: −−−
|
常連 登録日: 2011/11/10 居住地: 投稿: 31 |
Re: [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 cssを編集したりし、なんとか3列表示ができるようになりました。 ですが、レイアウトが一部崩れてしまったりしてしまいます。 cssの知識があったら簡単に直せるのかもしれませんが…ほぼ無知ですので行き詰っております。 このようなサイトのようにレイアウトが崩れてしまいます。 http://mobilean.net/products/list.php?category_id=1 コメント等が少ない商品があるページは、列と列の間が空いてしまっても問題ありませんので、行をしっかりと整えたいです。 尚、CSSは下記です。 /* レイアウト ----------------------------------------------- */ #is_list_area { padding: 0 0 30px 0; width: 100%; overflow: hidden; position: relative; clear: both; } #is_list_area #page_navi_top { } #is_list_area #page_navi_bottom{ clear: both; } div.is_listphoto { clear: all; text-align:center; padding-top: 10px; /*float: left;*/ } div.is_listphoto img { clear: both; } /* メインカラム用 1カラム時*/ #one_maincolumn div.is_product_area { border: solid 1px #CCC; margin: 0 10px 10px 0; padding-bottom:10px; width: 246px; /* サイズ調整 */ min-height: 330px; /*overflow: auto; clear: both;*/ float: left; } #one_maincolumn div.is_product_bloc { margin: 0 4px; /*float: right;*/ width: 94%; } #one_maincolumn div.is_listphoto .picture { width: 130px; /* サイズ調整 */ border: solid 1px #fff; } /* メインカラム用 2カラム時*/ #two_maincolumn_right div.is_product_area, #two_maincolumn_left div.is_product_area{ border: solid 1px #CCC; margin: 0 10px 10px 0; padding-bottom:10px; width: 240px; /* サイズ調整 */ min-height: 350px; /*overflow: auto; clear: both;*/ float: left; } #two_maincolumn_right div.is_product_bloc , #two_maincolumn_left div.is_product_bloc { margin: 0 4px; padding: 0 5px; /*float: right;*/ width: 94%; } #two_maincolumn_right div.is_listphoto .picture, #two_maincolumn_left div.is_listphoto .picture { width: 130px; /* サイズ調整 */ border: solid 1px #fff; } /* メインカラム用 3カラム時*/ #three_maincolumn div.is_product_area { border: solid 1px #CCC; margin: 0 10px 10px 0; padding-bottom:10px; width: 180px; /* サイズ調整 */ min-height: 320px; /*overflow: auto; clear: both;*/ float: left; } #three_maincolumn div.is_product_bloc { margin: 0 4px; /*float: right;*/ width: 94%; } #three_maincolumn div.is_listphoto .picture { width: 130px; /* サイズ調整 */ border: solid 1px #fff; } /* 商品情報 各種設定 ----------------------------------------------- */ /* 商品ステータス */ div.is_product_bloc ul.status_icon { margin: 10px 0; width: 100%; } div.is_product_bloc ul.status_icon li { margin-right: 5px; float: left; } /* 商品名 */ div.is_product_bloc h3 { font-weight: bold; font-size: 100%; } /* コメント */ div.is_product_bloc .listcomment { margin: 0 0 10px 0; text-align: left; font-size: 90%; color: #666; } /* 商品詳細を見る */ div.is_product_bloc .detail_btn { text-align: center; /*margin-bottom: 10px;*/ } /* 価格 */ div.is_product_bloc .pricebox { margin: 0 0 10px 0; font-size: 90%; } /* 買い物かご */ div.is_product_bloc .cart_area { padding: 10px; border: 1px solid #7C7C7C; background-color: #F2F1F1; width: auto; } /* 規格 */ div.is_product_bloc .classlist { margin-bottom: 10px; padding-bottom: 10px; background: url("../img/background/line_dot_02.gif") repeat-x bottom ; } div.is_product_bloc dl { width: 100%; } div.is_product_bloc dt { display: inline-block; vertical-align: top; } div.is_product_bloc dd { padding-bottom: 10px; display: inline-block; } div.is_product_bloc dd p.attention { margin-top: 5px; } /* カゴに入れる */ div.is_product_bloc .cartin { margin: 0; float :right; } div.is_product_bloc .cartin .quantity { padding: 3px 10px 0 0; width: 150px; float :left; text-align: right; } div.is_product_bloc .cartin .quantity .box { width: 70px; } div.is_product_bloc .cartin_btn { width: 160px; float :left; } |
tanaca |
投稿日時: 2011/12/5 11:59
対応状況: −−−
|
仙人 登録日: 2010/11/28 居住地: 福岡県 投稿: 332 |
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 >このようなサイトのようにレイアウトが崩れてしまいます。
先ほどサイトを拝見させていただいた限りでは崩れていないようなので既に解決済みですかね。
|
istn |
投稿日時: 2011/12/5 22:13
対応状況: −−−
|
常連 登録日: 2011/11/10 居住地: 投稿: 31 |
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 いえ、そちらのサイトは参考にさせていただいたサイトですのでうまくできておりません。
簡単なレイアウトを書きますと下記のようになってしまいます。 ●●● ●● ● ●●● ... 例えがとても悪くてすみません。 どうやら画像のサイズが縦長?の画像があるのが原因みたいなのですが… |
tanaca |
投稿日時: 2011/12/6 13:17
対応状況: −−−
|
仙人 登録日: 2010/11/28 居住地: 福岡県 投稿: 332 |
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 失礼しました、勘違いでしたね。
おそらく高さが揃わないためのレイアウト崩れだと思いますので 以下のスレッドが参考になるのではないでしょうか。 http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=8406&forum=10&post_id=40836#forumpost40836
|
istn |
投稿日時: 2011/12/8 22:41
対応状況: 解決済
|
常連 登録日: 2011/11/10 居住地: 投稿: 31 |
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 ありがとうございます
おかげ様で解決致しました。 |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |