バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

質問 > フロント機能 > [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列表示にしたい。
>このようなサイトのようにレイアウトが崩れてしまいます。

先ほどサイトを拝見させていただいた限りでは崩れていないようなので既に解決済みですかね。


----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当:田中利宏

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


----------------
他社システムからEC-CUBEへの移行などお気軽にご相談ください。
福岡のホームページ制作会社 ECカンパニー
担当:田中利宏

istn
投稿日時: 2011/12/8 22:41
対応状況: 解決済
常連
登録日: 2011/11/10
居住地:
投稿: 31
Re: [EC-CUBE2.11.4]商品一覧ページを横3列表示にしたい。
ありがとうございます
おかげ様で解決致しました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


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

統計情報

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

投稿数ランキング

1
seasoft
7369
2
468
3217
3
AMUAMU
2712
4
nanasess
2314
5
umebius
2085
6
yuh
1819
7
h_tanaka
1677
8
red
1570
9
mcontact
1342
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.