2016.09.30

2,034

ドロワーメニュー(Slidebars.js)をEC-CUBEに組み込む方法

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

こんにちは、タクロウです。
今回はドロワーメニュー(Slidebars.js)をEC-CUBEに組み込む方法をお伝えします。

▼ 動作保障

・バージョン0.10.3のSlidebars.js一式
・EC-CUBE2.13系

▼ 基本設定

まず基本的なSlidebars.jsの説明は下記サイト様の記事が非常にわかりやすいのでこちらをお読みください。

ウェブマスターがウェブのことを書いたら」様
http://tuono034s.com/web-entry/1791/

▼ EC-CUBEに組み込むためにやる作業

  1. ドロワーメニュー部分のHTMLをブロック化する
  2. site_main.tplファイルを更新
  3. slidebars.cssを更新

 

1.ドロワーメニュー部分のHTMLをブロック化する

ドロワーを開くためのコードと、開いた先のコードをまとめてEC-CUBEのブロックに記述します。
※下記のようなコード
<div class="sb-slide">
   <p class="sb-toggle-left">左を開く</p>
</div>
<div class="sb-slidebar sb-left">
ここが表示されます
</div>

このブロックをsite_main.tplからインクルードで呼びだします。

2.site_main.tplファイルを更新

▼ ブロックのインクルードタグを書く
bodyタグ直下にブロックを呼び出すインクルードタグを記述
<!--{include file="frontparts/bloc/ブロック名.tpl"}-->

※ここに直接コードを書いてもいいんですが、更新の利便性を考えてブロック化しています。


▼ ドロワーを動かすためにid="sb-site" を追加する
<div data-role="page" data-keep-native=".data-role-none" data-theme="f" >

<div data-role="page" data-keep-native=".data-role-none" data-theme="f" id="sb-site">

!注意!
<div id="sb-site">配下にブロックがあっては正常に動作しないので、下記のように書いてください。

<body>
 <!--{include file="frontparts/bloc/ブロック名.tpl"}-->
 <div ~省略~ id="sb-site">
 </div>
</body>

3.slidebars.cssを更新

ページ内リンクが動かないを解消

slidebars.cssのoverflow(overflow-x)が影響してページ内リンクができなくなります

body, html {
 overflow-x: hidden;←これ
 width:100%
}

かといってこのコードを丸ごと消すとドロワーの動きが不安定になります。
解決策としてbody, htmlにかかったoverflow-xは削除して
ドロワーで開く部分にoverflow-xを設定して解消しました。

↓こういう感じ
.sb-left {
 left: 0;
 overflow-x: hidden;
 width:90% !important;
}
.sb-right {
 right: 0;
 overflow-x: hidden;
 width:90% !important;
}

開閉メニュー(アコーディオン)の動作を安定させる

ドロワーメニュー内でアコーディオンメニューを組み込んだのですが、メニューを開いてスクロールするとメニューが真っ白になってしまいました。
これもslidebars.css内のコードが邪魔をしていて、下記コードを削除したら動作が安定しました。

↓まるっと削除
.sb-slidebar, .sb-slidebar * {
-webkit-transform:translateZ(0px)
}

まとめ

ブロックを作って、普段あまり触らないsite_main.tplファイルにインクルードタグ書いて、
ドロワー入れたらページ内リンク動かない、、
アコーディオンもなんか変になっちゃった、、

といろいろ手間ですけど、実際便利だしかっこいいので是非導入してみてください。

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

株式会社ヘノブファクトリー|バックエンド
この記事の投稿者:

次