4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

EC-CUBEAdvent Calendar 2015

Day 9

【EC-CUBE3/非公式手法】フロントエンド全画面にJSでゴキゲン ( 簡易版 )

Last updated at Posted at 2015-12-08

アっあどべんとカレンダー!?

Gitterに突然ながれた「Advent Calnder」やりませんか??

やりましょう!!( いろいろな人の声 )
おーーーやろうやろう!!( 私。。 )

と持ち前のかる~いノリでよくわからずに付けたタイトルが、「☆..。聖なる夜のEC-CUBE...。☆」
あーー我ながら、クリスマスをカウントするに相応しいタイトル!!イカス☆

数日後。。

あー他の日もちらほら埋まってきとりますね。
ふーんどんなタイトルなんだろ。。
えーーなになに。。。。。。ってめっちゃ技術についてガチ説明じゃないっすかぁぁぁあってもうタイトルしくったわ。。(泣)

めげずに書くものありきではなくタイトルに内容をよせていく

いやダイジョウブEC-CUBEが聖なる感じなったらいいわけで、EC-CUBEのロゴにサンタの帽子をかぶせてみたりとか。。。

なんかRedHat赤帽風なのでなしっ!!

クリスマス、Christmas、キリスト、サンタ、コーラー、トナカイ、バギー真っ赤なお鼻菊池桃子??んーーつながらんなぁ。。汗

ちなみにですがサンタクロース村が破産すんぜんだったようです。
※新オーナー登場で「サンタ・オフィス」が破産を免れる!滞納税金20万ユーロを支払い
さらにサンタクロースからもらった手紙に対する子供たちのサンタへの返信がステキすぎますので抜粋
サンタさんへのお返事
なかでも下記は秀逸です
なかなか文学的なうえに優しさに(泣)
えっなんさい!?
えっなんで!?

あーーこの子供たちの豊かな発想にあやかりたい。。

あっ雪!!

管理画面に雪を降らす!!

そう雪、クリスマス商戦で戦っているであろう、EC-CUBEのオーナー様方にささやかなプレゼントとして、雪を降らせる!!ワムは。。流さない!!
んーーいい感じですやん!

ここから体系的に

取り得る方法

1.EC-CUBE直接カスタマイズ→みんなからディスられる
2.テンプレート→よさげだが、センスが。。
3.プラグイン→まさしくこの内容向きイィっ!!

さっそくプラグインで

負けました。。(泣)
プラグインのイベントでMiddleWareのAfterあたりで、Responseのコンテンツをクロールしながら、Body要素にApeendでグー!!
公式の仕様書見てくださいませ

早速実装したら、動かねーよ!!

Afterイベントの引数にはなぜかイベントディスパッチャーしかはいってねーよ!!

そこでタバコを吸いながらみなさんのお知恵を拝借
→他のプラグインを見る
→DI( Pimple )でどうやらRequestが取れてそう!!
ってことはapp['response']で取れそうな気配。。。。

エラーメッセージが。。
Woops ( Symfony( Silex?? )のエラーメッセージってtypoとか口語調で悔しさが増します )

やめさせてもらうわ!!

プラグインに挑戦してわかった事まとめ

※Controllerに差し込むイベントはFilterResponseEventでこちらはRequest取得可能です
※App全体のfook(before/after)はDIでしかHttpkernel系オブジェクトを取得できず、取得できるのはRequstのみっぽいです

このままでは間に合わんって事でフロント画面に雪を降らせます

ここから駆け足でいきたいと思います!

プラグイン

まずは雪を降らすためのjQueryプラグインです
JQuery-Snowfall

必要なファイル

src/snowfall.jquery.js
上記のみです。
参考1
参考2

実現方法

1.管理画面のファイルアップロードでJSを保存
2.ブロック管理機能でプラグインの読み込みと呼び出しを行います
3.ページ編集でブロック配備して完了!!

ファイルアップロード

まずは管理画面にログインしてください
次に以下の画面から前述の「snowfall.jquery.js」をアップロードします
該当画面 : コンテンツ管理 > ファイル管理

※ファイルはそのままでもフォルダをきっても、その辺はご自由にやっちゃってください

ブロックでプラグインの読み込みと設定

以下の画面からブロックを「新規作成」します
該当画面 : コンテンツ管理 > ブロック管理

画面を開いて「新規入力」をポチッ
「ブロック名」、「ファイル名」は自分で覚えられる範囲でご自由に設定してください
さてさてブロック内に以下の感じで「読み込み・呼び出し」を記述!

<script src="{{ app.config.admin_urlpath }}/../../user_data/{フォルダを任意できった場合はフォルダ名}/snowfall.jquery.js"></script>
<script>
(function () {
    document.body.className  = "darkBg";
    $(document).snowfall({shadow : true, deviceorientation : true, round : true, minSize: 5, maxSize:8});
})();
</script>

ブロックを配備

以下画面から先ほど作成の「ブロック」を配置します
該当画面 : コンテンツ管理 > ページ管理
ページ一覧から TOPページ > レイアウト編集

画面右に作成したブロックが表示されていると思うので、ドラッグして「#contents_bottom」の
一番したでドロップ「全ページ」にチェックをつけます

でっ 「登録」ボタンぽちっ!!!

☆..。聖なる夜のEC-CUBE...。☆

さてここでお好きなミュージックをスタート!!
シャンパンの用意とターキーが焼き上がったらフロント画面にアクセス!!!!

あーーーーーーーナゴム!!

さてさて明日は@tao_sさんです!!
宜しくお願いします!

4
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?