EC-CUBEにBootstrapを入れてレスポンシブ化する方法

このエントリーをはてなブックマークに追加
Pocket

EC-CUBE2.13系にBootstrapを導入する方法を紹介します。

EC-CUBEの最新版はEC-CUBE3が公開されており、こちらはデフォルトでBootstrapが入ってるもよう。一方で安定板の2.13系では導入されていません。

簡単にレスポンシブデザインにできたり、様々なコンポーネントが用意されてたりなど、大変便利なBootstrapを2.13でも使いたい！という方のために、このページではBootstrapをEC-CUBE2.13に導入する手順をざっくりと解説していきたいと思います。

※レスポンシブ化というタイトルですが、スマホ対応は別記事になっております。

EC-CUBE2.13にBootstrapを導入する

では実際にBootstrapを導入していきましょう。ここではEC-CUBE2.13.5とBootstrap3.3.6を使用します。Bootstrapの詳しい使い方などは以下の記事一覧を参考にしてみてください。
Bootstrapの使い方一覧

ここではデフォルトテンプレートをコピーして新しくテンプレートを作りそちらをカスタマイズしていきます。

Bootstrapをダウンロード

まずはBootstrapをダウンロードします。ダウンロードファイルは３つ用意されていますが、Bootstrapを使うだけなら左のDownload Bootstrapボタンを押せばOK。
Bootstrap Download
EC-CUBEをレスポンシブ化する方法-01

EC-CUBEテンプレートからBootstrapを読み込む

ダウンロードすると、bootstrap–3.3.6-distという名前のzipファイルがあるのでこれを解凍しましょう。すると以下のような３つのフォルダがでてきます。
EC-CUBEをレスポンシブ化する方法-02

出てきたフォルダの中身をEC-CUBEテンプレートのパッケージフォルダにコピーします。ファイルが複数あるので、どのファイルをコピーすればいいか分からない！という場合は全てコピーしてかまいません。

場所は、html/user_data/packages/テンプレート名/になります。

CSSファイルとjsファイルはすでにあるフォルダの中に入れればOK。fontsはフォルダごとコピーします。ここではテンプレート名にbootstrapという名前をつけたので、bootstrap以下のパッケージフォルダに入れていきます。
EC-CUBEをレスポンシブ化する方法-03

次にテンプレートからファイルを読み込めるようにheadタグを修正していきます。

data/Smarty/templates/テンプレート名/site_frame.tplを開いて以下の２行を追加します。記述する場所が分からない場合はheadの閉じタグ直前に入れればOKです。

<link rel="stylesheet" href="<!–{$TPL_URLPATH}–>css/bootstrap.min.css" type="text/css" media="all" />
<script type="text/javascript" src="<!–{$TPL_URLPATH}–>js/bootstrap.min.js"></script>

これでBootstrapを使う準備ができました。ここからは実際にBootstrapを使って画面のレイアウトを変更していきます。

BootstrapのGridを使って全体のレイアウトを作る

デフォルトのスタイルを外してBootstrapを入れた直後は、レイアウトが指定されていないので以下のように崩れて表示されます。
EC-CUBEをレスポンシブ化する方法-04

この状態から、Bootstrapのclassをタグに入れていく作業を始めます。量が結構多いので大変ですが、まずは全体のレイアウトから作っていきましょう。

Bootstrapでレイアウトを作るには、BootstrapのGridシステムを使うことになります。グリッドを使ったレイアウトの作り方は以下のページを参考にしてみてください。
初心者のためのBootstarpの簡単な使い方

ここでは左カラムレイアウトになるように修正していきます。EC-CUBEのデフォルトテンプレートにBootstrapのグリッドを入れると、こんな感じになりました。
※コードが長くなるので中身のコンテンツ部分はカットしてます

site_main.tpl

<body class="<!--{$tpl_page_class_name|h}-->">
    <!--{$GLOBAL_ERR}-->
    <noscript>
        <p>JavaScript を有効にしてご利用下さい.</p>
    </noscript>

    <div class="frame_outer">
        <a name="top" id="top"></a>

        <!--{* ▼HeaderHeaderTop COLUMN*}-->
        <!--{if $arrPageLayout.HeaderTopNavi|@count > 0}-->
            <div id="headertopcolumn">
              <div class="container">
                <!-- コンテンツ -->
              </div>
            </div>
        <!--{/if}-->
        <!--{* ▲HeaderHeaderTop COLUMN*}-->
        <!--{* ▼HEADER *}-->
        <div id="header_wrap">
            <div id="header" class="clearfix">
              <div class="container">
                <div id="logo_area">
                    <!-- コンテンツ -->
                </div>
                <div id="header_utility">
                    <!-- コンテンツ -->
                </div>
              </div>
            </div>
        </div>
        <!--{* ▲HEADER *}-->

        <div id="container" class="clearfix">
          <div class="container">
            <div class="row">

              <!--{* ▼TOP COLUMN*}-->
              <!--{if $arrPageLayout.TopNavi|@count > 0}-->
                  <div id="topcolumn" class="col-xs-12">
                      <!-- コンテンツ -->
                  </div>
              <!--{/if}-->
              <!--{* ▲TOP COLUMN*}-->

              <!--{* ▼LEFT COLUMN *}-->
              <!--{if $arrPageLayout.LeftNavi|@count > 0}-->
                  <div id="leftcolumn" class="side_column col-xs-3">
                      <!-- コンテンツ -->
                  </div>
              <!--{/if}-->
              <!--{* ▲LEFT COLUMN *}-->

              <!--{* ▼CENTER COLUMN *}-->
              <div id="main_column" class="col-xs-9">
                  <!-- コンテンツ -->
              </div>
              <!--{* ▲CENTER COLUMN *}-->

              <!--{* ▼RIGHT COLUMN *}-->
              <!--{if $arrPageLayout.RightNavi|@count > 0}-->
                  <div id="rightcolumn" class="side_column">
                      <!-- コンテンツ -->
                  </div>
              <!--{/if}-->
              <!--{* ▲RIGHT COLUMN *}-->

              <!--{* ▼BOTTOM COLUMN*}-->
              <!--{if $arrPageLayout.BottomNavi|@count > 0}-->
                  <div id="bottomcolumn" class="col-xs-12">
                      <!-- コンテンツ -->
                  </div>
              <!--{/if}-->
              <!--{* ▲BOTTOM COLUMN*}-->

            </div>
          </div>

        </div>

        <!--{* ▼FOOTER *}-->
        <!--{if $arrPageLayout.footer_chk != 2}-->
          <div id="footer_wrap">
              <div id="footer" class="clearfix">
                <div class="container">
                  <!-- コンテンツ -->
                </div>
              </div>
          </div>
        <!--{/if}-->
        <!--{* ▲FOOTER *}-->
        <!--{* ▼FooterBottom COLUMN*}-->
        <!--{if $arrPageLayout.FooterBottomNavi|@count > 0}-->
            <div id="footerbottomcolumn">
              <div class="container">
                <!-- コンテンツ -->
              </div>
            </div>
        <!--{/if}-->
        <!--{* ▲FooterBottom COLUMN*}-->
    </div>

</body>

containerやrowなどのclassは、デフォルトテンプレートのdivタグなどに無理矢理ねじ込んでもいいのですが、構造を分かりやすくするため新しくdivタグを作ってます。ここではデフォルトテンプレートのコードを極力残しつつBootstrap化を行っていますが、必要なければ不要なコードを削除してください。

ここまでできると以下のようになります。
EC-CUBEをレスポンシブ化する方法-05

サイドバーに設置されているブロックはまだ修正していないので崩れてますが、全体的には問題ありません。

EC-CUBEの各ブロックをBootstrap化する

続いてブロックをBootstrap化します。リストやテーブル、フォーム、ボタンがメインなのでこれらにBootstrapのclassをつけていけば簡単にBootstrap化が可能です。

おすすめ商品はグリッドレイアウトを入れ子状にするとうまく表示できます

<div class="block_outer clearfix">
    <div id="recommend_area" class="panel panel-default">
        <div class="panel-heading">
          <h2 class="h5">おすすめ商品情報</h2>
        </div>
        <div class="block_body clearfix panel-body">
          <div class="row">
            <!--{foreach from=$arrBestProducts item=arrProduct name="recommend_products"}-->
              <div class="col-xs-6">
                <div class="product_item clearfix">
                  <div class="row">
                    <div class="col-xs-4">
                      <div class="productImage">
                          <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->">
                              <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_list_image|sfNoImageMainList|h}-->" class="img-responsive" alt="<!--{$arrProduct.name|h}-->" />
                          </a>
                      </div>
                    </div>
                    <div class="col-xs-8">
                      <div class="productContents">
                          <h3>
                              <a href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrProduct.product_id|u}-->"><!--{$arrProduct.name|h}--></a>
                          </h3>
                          <p class="sale_price">
                              <!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)： <span class="price"><!--{$arrProduct.price02_min_inctax|n2s}--> 円</span>
                          </p>
                          <p class="mini comment"><!--{$arrProduct.comment|h|nl2br}--></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
                <!--{if $smarty.foreach.recommend_products.iteration % 2 === 0}-->
                    <div class="clear"></div>
                <!--{/if}-->
            <!--{/foreach}-->
          </div>
        </div>
    </div>
</div>

ここまでできるとブロックは以下のようになります。各ブロックは見た目を整えるため、Bootstrapのpanelコンポーネントを使用しました。
EC-CUBEをレスポンシブ化する方法-06

この時点でタイトルやボタンなどは画像を外しています。ヘッダー部分のリンクも横並びのテキストにしています。

EC-CUBEの各ページをBootstrap化する

最後にEC-CUBEの各ページをカスタマイズしていきます。こちらもブロックと同様、リスト、テーブル、フォーム、ボタンが主な変更点になります。

商品一覧ページは基本的にはデフォルトのレイアウトを維持するようにBootstrap化しています。カートボタンの部分にはBootstrapのwellクラスを利用し、数量のフォームとボタンをリスト化することで横並びにしています。
EC-CUBEをレスポンシブ化する方法-07

詳細ページの場合は価格や関連カテゴリなどdlタグの部分がやや崩れて見えるので、実際に使用する際は修正加える必要があるかもしれませんね。
EC-CUBEをレスポンシブ化する方法-08

その他のページも同様にBootstrapクラスを追加していきます。デフォルトテンプレートをベースに使う場合は、すでにあるdivタグにBootstrapを入れるのか、新しく追加するのかを考えながら作業する必要があるので注意が必要です。

まとめ

ここまででPC画面のレイアウトが完成しました、このあとスマホ画面の最適化を行っていきます。少し長くなったのでまた次回にしますが、最適化の主な作業は、スマホ画面でのレイアウトの修正や非表示にしたいコンテンツの指定などを行います。

Bootstrapの使用方法についてはこのブログでも紹介していますので参考にしてみて下さい。また、以下のような書籍も出版されているので、これからBootstrapを始める方はこちらもおすすめ。

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!