バージョン選択

フォーラム

メニュー

オンライン状況

145 人のユーザが現在オンラインです。 (135 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 145
もっと...

サイト内検索

質問 > フロント機能 > [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列にて表示をしたいと思っております。

どなたかお分かりになる方、教えて頂けると幸いです。
フラット表示 前のトピック | 次のトピック


題名 投稿者 日時
 » [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 istn 2011/12/3 19:50
     Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 tanaca 2011/12/4 11:43
       Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 istn 2011/12/4 17:08
       Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 istn 2011/12/4 19:54
         Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 tanaca 2011/12/5 11:59
           Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 istn 2011/12/5 22:13
             Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 tanaca 2011/12/6 13:17
               Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。 istn 2011/12/8 22:41

 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は90,120名です
総投稿数は110,323件です

投稿数ランキング

1
seasoft
7369
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1682
8
red
1571
9
mcontact
1351
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.