EC-CUBEにTwitterBootStrapのボタンを設置してみる

さてさて、今回は、EC-CUBEにTwitterBootstrapのあのボタンを設置してみようと思います。

今回は商品詳細ページのカートに入れるボタンを変更してみます。
イメージはこちら。じゃん！

EC-CUBEの不満要素？というか微妙な作りの一つの点は、ボタンが全て画像で出来てるんですね。
なので、ちょっとボタンの文字を変えようとした場合、画像ごと作りなおさなければなりません。

また、ボタンの色合いを変えたい場合なども全てのボタン画像を作りなおさなければなりません。
CSSで作ってあれば、もっと便利なのに。。なんて思う方もいるのではないでしょうか。

ということで、ボタンをBootstrapを使ってCSSで作り変えてみたいと思います。

では、下準備として、まずはBootstrapのホームページに行って、ボタン部分のCSSをもらってきます。
http://twitter.github.com/bootstrap/customize.html
ついでにアイコン画像ももらって来ましょう。
こんな感じです。

そして、ダウンロードしたファイルを以下に格納します。
html/user_data/packages/default/css
bootstrap.css

html/user_data/packages/default/img
glyphicons-halflings-white.png
glyphicons-halflings.png

そして商品詳細画面を修正します。
data/Smarty/templates/default/products/detail.tpl
まずは頭の部分で、bootstrap.cssの読み込み

<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/products.js"></script>
<script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.js"></script>
<link rel="stylesheet" type="text/css" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.facebox/facebox.css" media="screen" />
//↓↓↓↓追加　　25行目あたり
<link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/bootstrap.css" type="text/css" media="all" />
<script type="text/javascript">//<![CDATA[
// 規格2に選択肢を割り当てる。

続いてボタン部分を修正

 <div class="cartin">
    <div class="cartin_btn">
        <div id="cartbtn_default">
            <!--★カゴに入れる★-->

            <!--  //削除   244行目あたり
            <a href="javascript:void(document.form1.submit())" onmouseover="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_cartin_on.jpg','cart');" onmouseout="chgImg('<!--{$TPL_URLPATH}-->img/button/btn_cartin.jpg','cart');">
                <img src="<!--{$TPL_URLPATH}-->img/button/btn_cartin.jpg" alt="カゴに入れる" name="cart" id="cart" /></a>
            //削除   -->
　　　　　　　<!-- //ここから２行追加 -->
            <a href="javascript:void(document.form1.submit())" >
                <button class="btn-primary cart-btn"><i class="icon-shopping-cart icon-white"></i>  CartIn!!!</button>
            </a>
        </div>
    </div>
</div>

ここで、気づいた方もいるかもしれませんが、buttonのclass指定をcart-btnにしています。
bootstrapではボタンのクラス名はbtnですが、実はec-cubeでもbtnのclass定義がされているため、かぶってしまいます。
そこで、bootstrap側はcart-btnに変更します。

ということで、bootstrapのcssも変更
.btnの定義を全てcart-btnに変更します。

こんな感じです。

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cart-btn {  //　←ココ
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  color: #333333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);

これで、完成です。
で、実際表示してみると。。。

素敵なCSSボタンが出来ました。