商品一覧をCSSのみで横並びに変更する〔EC-CUBE2.12〕

公開日:2013年1月13日

EC-CUBEの商品一覧をCSSで横並びに変更するメモです。(バージョン2.12)

20130301

(1)商品写真サイズを任意のサイズに変更する

システム設定 → パラメーター設定 → (一覧画像縦)(一覧画像横)という項目があるので数値を変更する。

ここでは、2カラム5列なので、商品写真は大きさは、120px×120pxにセットしました。

(2)contents.cssを変更

デザイン管理 → CSS設定 → contents.css の中で、商品一覧のレイアウトのCSSを変更する。

/* レイアウト
----------------------------------------------- */
div.list_area {
    /*padding: 0 0 30px 0; 元のCSSをコメントアウト*/
    /*width: 100%; 元のCSSをコメントアウト*/
    overflow: auto;
    overflow:hidden;
    float: left; /*(追加)横並びに変更のため*/
    width: 20%;  /* (追加)2カラムの場合で(横並び5商品/写真サイズ120×120)※任意で数値変更*/
    height:260px; /* (追加)1行分の高さを指定  ※任意で数値変更*/
}

div.listphoto {
   float: left;
}

/* メインカラム用 1カラム時*/
#one_maincolumn div.listrightbloc {
    float: right;
   /* width: 74%;元のCSSをコメントアウト*/
    width: 100%;/*追記*/
}

/* メインカラム用 2カラム時*/
#two_maincolumn_right div.listrightbloc,
#two_maincolumn_left div.listrightbloc {
    float: right;
   /* width: 80%;元のCSSをコメントアウト*/
    width: 100%;/*追記*/
}

/* メインカラム用 3カラム時*/
#three_maincolumn div.listrightbloc {
    float: right;
   /* width: 74%;元のCSSをコメントアウト*/
    width: 100%;/*追記*/
}

(3)任意の部分について

list_areaの、width

列数によって%を変更します。(写真の大きさも列数によって変更)
5列:width:20%
4列:width:25%
3列:width:33% という風に。。。

IE 6,7をCSSハック

IE 6,7では、list_areaの、widthを少し小さめの数値にしておかないと、横に入りきらず折れてしまいますので、width:20%の場合、IE6,7をCSSハックで19.8%に設定しました。

list_areaのheight

 写真とその下の商品名・値段等が表示された時の高さを記述しておかないと、上手く左端に折れず、歯抜けになってしまいます。そこで仕方なくlist_areaの高さを決めました。
商品登録する際に、商品名・コメントなどを極端に長いものにしなければ問題ないと思います。

[2013.07.20] この問題は、heightLine.jsというスクリプトで解決できました。
記事[float(フロート)したボックスの高さを揃えてくれるスクリプト heightLine.js)]

その他の注意点

 私は、商品一覧のレイアウトを2カラムで利用していますが、サイドカラムの幅を広めに変更しているのでメインカラム(商品一覧のエリア)が少し狭くなっています。
デフォルトのテンプレートでは、もう少しメインカラム(商品一覧のエリア)が広いので、写真サイズ:120×120にすると、少し商品と商品の間の隙間が広めになると思います。お好みで、写真の大きさを大きめに変更して調整してください。

(4)商品一覧ページの「カートエリア」と「商品詳細ボタン」「商品コメント」を隠す

デフォルトでは、カートと商品詳細ボタン、また、商品コメントが表示されていますが、できるだけ多くの商品を一覧したいので、私は手っ取り早くCSSで非表示にしてしまいました。
(表示したい場合はボタン画像を小さいものに変更して、CSSで位置調整する必要があると思います)

.listrightbloc .cart_area {
display:none;
}
.listrightbloc .detail_btn {
display:none;
}
.listrightbloc .listcomment {
display:none;
}

あとは、アイコンや金額の表示部分をCSSで調整をします。
contents.cssの中の、商品一覧の部分で、
「レイアウト」の下に続いている「商品情報 各種設定」という部分を変更

/* 商品情報 各種設定
----------------------------------------------- */
/* 商品ステータス */
div.listrightbloc ul.status_icon {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
}
div.listrightbloc ul.status_icon li {
    margin-right: 5px;
    float: left;
}

/* 商品名 */
div.listrightbloc h3 {
    font-weight: normal;
    font-size: 100%;
    margin-top: 5px;
    margin-right: 12px;
}

/* 価格 */
div.listrightbloc .pricebox {
    margin: 0 0px 5px 0;
}