デザイン講座

ホーム > デザイン講座 > テンプレートで出来るデザインカスタマイズ > 憧れの「横型商品一覧」を導入しよう!

憧れの「横型商品一覧」を導入しよう!

心意気006
2008.11.13 (更新日: 2012.02.22)

皆さんお久しぶりです、キンタです。
ホンットもう、マキシマムお久しぶりです。

キンタ先生、長期休暇してました。
・・・あ、いや、仕事してなかったワケじゃないですよ(汗

EC-CUBEの構築案件をですね、そりゃーーーーもう!バリバリやってたんですよ。

学校で先生やる時間すら削って、バリバリ、バリバリ。

1ヶ月も2ヶ月も、秋も冬も、バリバリ、バリバリ。

雨が降ろうが、風が吹こうが、落雷で「うわ、停電しちゃうんじゃね!?」なんていう時ですらも、バリバリ、ゴロゴロ、Ctrl+S、バリバリでゴリゴリ。

と、いうわけで・・・

けっこう経験値稼いできましたよ。フフン。

テンプレカスタマイズに使えそうなネタは、また記事に書いていきますね。




さてさて、今日は前回(えーっと、前回っていつだろう・・・)の「なにかとお世話になるSmarty関数について(その3)」で告知したとおり・・・ついにデザインカスタイマイズの授業です!

ヤッホイ!
やっと美術らしい授業に!

・・・さてと、早速本題に移るとしましょうかw

憧れの横型リストデザイン・・・って?
さて、今回デザインをカスタマイズをするのは、この箇所です↓



見ての通り、「商品一覧」のページですね。

そして今回の授業では、ここを以下のような感じにバリバリっとカスタマイズしようかと思います。



これ、けっこう色々なところで人気らしいですw
確かに、商品一覧がデザイン的に華やいで、なにより写真が賑やかに活きてくるから良いですよねぇ。

画像やCSSでデザインを上手く付け加えれば、ほんとに色んな演出が施せますし・・・そういう所が人気の秘訣ってところなんでしょうね。


しかし、それだけ人気な割には、なかなか実現が難しいのも、このカスタマイズの特徴の一つ。

なぜ実現が難しいかと言うと・・・

「CSSとSmartyを大活用しなければならないから」

に、尽きますw

CSSだけじゃ成り立ちませんし、Smartyだけでもデザインが活きてこない・・・という理由で、それぞれを十分に理解しておかないと導入が難しいわけです。

「どこかに掲載されていたソースを貼り付けたけどレイアウト崩壊、そして諦めた(涙」

なんてホロ苦い経験が過去にある方。

今回はCSSとSmarty、両方をじっくりマスターしつつ、導入を実現しましょう!

ではでは、次に進みます。

ここから先は、会員限定の特別公開記事になっております。
ここから先は、会員限定の特別公開記事になっております。
ここから先は、会員限定の特別公開記事になっております。
ここから先は、会員限定の特別公開記事になっております。

このページを見ている人は、以下のページも参照しているようです・・・!

>> EC-CUBEの学校のページ参照は、レコメンドエンジン「楽レコ」でレコメンデーションしています!

レビュー

レビューによるご意見・ご質問は会員登録された方のみとなっております。
  • ★★★★★ できた! 2009/06/21
    レビュアー:ike

    やりました!できました!
    念願の横並び!ありがとうござます。
    ひとつ問題が・・・
    商品の表示点数をモバイルに合わせ5点にしていたのですが、せっかくの横並びですので12点にしました。するとモバイルでメモリオーバーでページを表示することができなくなりました。
    モバイルとPCの商品の表示点数を別々に設定することはできないでしょうか?

  • なるほど・・・確かにモバイルはアレですね。 2009/06/23
    レビュアー:キンタ

    どうもキンタです。
    コメントありがとうございます。

    確かにモバイルはメモリオーバーの可能性も考えないといけませんね。

    もしこれがPC側での話なら、section関数に「max=5」なんかの記述を足せば解決!・・・とも思ったのですが、「前へ、次へ」のページ送りのことを考えると・・・これはphp側を調整する必要がありそうです。

    ここら辺の話は、もしかするとホマン先生のテリトリーかもしれませんが・・・「応急処置」ということで代わりにお答えします。

    まず、プログラム本体が格納されている「data」フォルダを参照してください。
    そして、以下のファイルを探して見ましょう。

    /data/class/pages/products/LC_Page_Products_List.php

    そしてこのphpファイル中の「Page のプロセス(モバイル)」以降の箇所に、

    ==================================
    //最小表示件数を選択
    $this->disp_number = current(array_keys($this->arrPRODUCTLISTMAX));
    ==================================

    という箇所があるかと思います。
    これを・・・

    ==================================
    //最小表示件数を選択
    //$this->disp_number = current(array_keys($this->arrPRODUCTLISTMAX));
    $this->disp_number = 5;
    ==================================

    という風に書き換えてみてください。
    これで、ページ送り1ページあたりの表示個数が「5」に設定されるはずです。

    ここらへん、管理画面の「パラメータ設定」なんかで数値管理できるともっとイイんですが・・・とりあえず応急処置っていうことで。

    必ずバックアップをとってお試しくださいね。

  • ★★★★★ ありがとうございます 2009/06/27
    レビュアー:ike

    いつもいつも本当にありがとうございます!
    問題なく表示点数を変更できました。
    また何かありましたらよろしくお願いします!

  • 横並びできました!! 2009/06/29
    レビュアー:maya-

    ずっと、横並びにあこがれてただけに、今回の講座はとてもうれしかったです。
    まだまだ、内容は理解できていないところが多いのですが、少しずつ勉強していきたいと思います。

  • ★★★★★ メニューが消える!? 2009/07/17
    レビュアー:chubo

    できました!
    ありがとうございました。

    しかし商品点数が少ない商品一覧では左側のブロック表示が切れてしまうようになりました・・・。どうすればよろしいでしょうか?

  • ★★★★★ 出来ました!! 2009/09/24
    レビュアー:tmn

    ずっとやりたいカスタマイズではあったのですが、Smarty部分でいつもつまずいていました。
    おかげさまで、意味を理解しながらカスタマイズできました。

    キンタ先生、1箇所修正点を見つけましたのでご報告しておきます。

    Smartyカスタマイズ部分、<!--▼1つ目の商品-->内の、
    <!--商品名-->
    <h3>
    <a href=">!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProducts[cnt].product_id}-->"><!--{$arrProducts[cnt].name|escape}--></a>
    </h3>
    の部分ですが、
    <a href=">⇒<a href="<

    ですよね!?

  • ★★★★★ 横型商品一覧できましたが・・・ 2009/12/16
    レビュアー:kix

    横型商品一覧ができましたが、
    横型商品一覧にカゴに入れるボタンをつける方法ってあるのですか?
    素人質問ですが、どなたかご教授お願いします。

  • ★★ あれ? 2010/01/22
    レビュアー:たったもりけ

    同じようにやってみましたが
    表示順番が少しおかしくなりませんか?

  • ★★★★ 4列目の4番目の商品が表示されません 2010/02/04
    レビュアー:ビギナー

    いつもこのサイトを参考にさせていただいております。

    横型商品一覧表示を試してみたのですが、4列目の4番目の商品が表示されません。
    この状況は、2ページ目以降も同様です。

    4列目以外の1〜3列目までは正常に4商品とも表示されております。

    考えられる対処法はあるでしょうか?

  • ★★★ 初歩的なんですが・・・・ 2010/03/08
    レビュアー:taotao

    そのファイルにソースを書けばいいのか、教えていただけませんでしょうか?
    ファイルが見つからず苦しんでます。
    ちなみにEC-CUBEバージョン 2.41です。

  • ★★★★★ どこに… 2010/03/12
    レビュアー:超初心者

    すみません(涙

    <!--{section name=cnt loop=$arrProducts step=4}-->
    <div class="item-line">



    <!-- ▼1つめの商品 -->
    <!--{assign var=id value=$arrProducts[cnt].product_id}-->
    <div class="item-box-wrap">
    以下の構成文はどこにどのように貼り付けてみればいいのか教えていただけないでしょうか。

    自分的にはLC_Page_Products_List.phpに張りるけるのかなとは思うのですが…

    スミマセンがよろしくお願いします

  • ★★★★★ 4段目の4つ目の商品だけが表示されない件 2010/03/12
    レビュアー:roots

    商品リスト表示数の設定じゃないでしょうか。
    「システム設定」→「マスターデータ管理」→ mtb_product_list_max を選択で、
    ID:15 値:15件となっているところを、それぞれ任意の数値に変更すれば、1ページ16件ずつ表示されます。

  • ★★★★★ Re: 4段目の4つ目の商品だけが表示されない件 2010/04/10
    レビュアー:ecbeginner

    roots 様
    ありがとうございます。
    おかげさまで無事解決致しました!

    また、お礼が遅くなりましたことお詫び致します。

  • ★★★ おはずかしながら... 2010/05/21
    レビュアー:ど素人

    どなたか助けてください。
    ソースを公開されていますが、
    このソースどこに使用すればいいんでしょう?

    使い始めて間もないので、ec-cubeについて
    まったく素人なのでなにをするにしろ
    困っております。

  • ★★★★★ 問題なく出来ました♪ 2010/06/11
    レビュアー:ばすこ

    説明を参考にさせていただいて憧れの横型表示に成功しました♪
    ありがとうございます。

  • ★★★ オススメ商品でも出来たのですが、コメントにバグが… 2010/08/20
    レビュアー:ヤリミズ

    商品一覧で上手にできました!ありがとうございます。

    調子にのって、オススメ商品(当サイトでは新着中古車)でも利用したのですが、IEで見ると「4つめの商品」のコメントが9文字だけ重複して他のブロックの下に表示されるというバグが起こりました。

    原因はなんでしょうか?また、解決方法のはございますか??

  • ★★★★★ 勉強になりました! 2010/09/07
    レビュアー:たすく

    コピペして気付いたのですが、
    他の方もおっしゃっていましたが、
    ソースの106行目「<」が「>」になってしまっていました。

    何はともあれ!凄く勉強になりましたm(_ _)m

  • 縦並びのまま 2010/09/20
    レビュアー:初心者

    いつも参考にさせて頂いております

    横型商品一覧に憧れてこの授業を参考にしてみて何度も挑戦しているのですが横並びになると思いきや縦並びのままになってしまいます

    バージョンは2.4系です

    変更箇所はeccube/html/products/list.php のデフォルトは
    ーーーーーーーーーーーーーーーーーーーー
    <!--{section name=cnt loop=$arrProducts}-->
    <!--{assign var=id value=$arrProducts[cnt].product_id}-->
    <!--▼商品ここから-->
    <div class="listarea">



    ーーーーーーーーーーーーーーーーーーーー
    をこちらのサイトにあったSmartyをコピペし上記コメントでtmnさんが指摘している通りに修正

    CSSは html/user_data/packages/default/css/にあるproducts.cssの中にある
    ーーーーーーーーーーーーーーーーーーーー
    /* 商品一覧
    ----------------------------------------*/
    .item-line {
    width: 630px;
    margin: 0;



    を商品詳細の上部に張り付けました

    CSSもしくはSmartyの変更場所が間違っているのでしょうか?

    以上になります

    アドバイス頂けたらと思います

  • ★★★★★ わかりやすくて感激です。 2011/01/24
    レビュアー:ぽよ

    説明がわかりやすくて、記述内容を理解しながら4列表示にカスタマイズすることができました。
    構造を理解できたので、3列表示、2列表示へのアレンジも「一撃」でできました。
    ありがとうございました。

この記事に対するトラックバック

この記事のトラックバック先URL

ECの「勝ち組」だけが知っている 売り上げUPの秘密はこちら