EC-Cube3のチェックした商品プラグインの追随ボックス化
2016年08月7日 タグ: EC-Cube
最近の備忘録が、イベント参加情報(?)になっているので、久しぶりに備忘録を掲載します。(でもまだイベント参加の報告あります、書けてませんが(ノД`)・゜・。)
今回はEC-Cube3ネタで、ショッピングサイトなんかでよく実装されている、
画面横に「チェックした商品」が、スクロールしても追いかけてくるボックスを作ってみました。
EC-Cube3のプラグインをインストール
今回は、EC-Cube3の「最近チェックした商品プラグイン」の追随ボックス化!!してみます。
使用したプラグインは、こちらの物を使わせて頂きました、感謝してます。
EC-Cuebのオーナーズストアにログインした状態で、「購入する」ボタンをクリック!
「利用するサイト」の選択画面でプラグインを利用するサイトを選択して一番下の「購入」ボタンをクリック、「ご注文完了」画面がでたら購入完了です。
EC-Cube3の管理画面にログインし、「オーナーズストア」-「プラグイン」-「購入済みプラグイン」よりインストールできます。
インストールできたらプラグイン「最近チェックした商品プラグイン」を有効化すればOKです。
最近チェックした商品プラグインのカスタム
有効化したプラグインは、EC-Cube3の管理画面-コンテンツ管理-ページ管理-TOPページ-レイアウト編集の「未使用ブロック」にありますので、「#contents_bottom」エリアにドロップしときます。
初期状態は、下記の様な感じです。
これをスクロールに追随するブロックへと変更していきます。
カスタム作業
カスタムと言っても、大それた事をする訳ではなく、CSSとjavascript(jQuery)を使用して見た目と動きを実装するのがメイン作業となります。
少しだけプラグインのテンプレートファイルを修正するのですが、こちらの作業が少し疲れます。
まずは下記の参考にさせて頂いたサイトより、サイドブロックがスクロールに追随するためのjavascriptの記述を参考に、EC-Cube3で使用されているタグの記述に変更します。
次にCSSファイルを編集し、自分好みのデザインに変更していきます。
今回は、追随ブロックをパソコンで見た場合のみ表示したいので、メディアクエリーの最大サイズに記述し、その他の画面サイズの場合は、通常のプラグイン表示にさせます。
追記したCSSは、下記になります。
@media (min-width: 1200px) { /* ==================================================================================== 追随サードバー Setting ==================================================================================== */ #checkeditem { width: 10%; padding: 0 1%; position: absolute; top: 85px; right: 0; border: 1px solid #CCC; border-radius: 5px 0 0 5px; } .front_page #contents #checkeditem .row { padding: 0; } .front_page #contents #checkeditem .heading{ background: #f8f8f8; margin: 5% 0; padding: 5% 0; } .front_page #contents #checkeditem .heading01 { background: transparent; font-size: 50%; text-align: center; padding: 5% 0; margin: 0; float: none; } .front_page #contents #checkeditem .heading02 { background: transparent; font-size: 60%; text-align: center; padding: 0; margin: 0; } }
出来上がったのが、こちらの様な感じになります。
動きも良く、見栄えもいい感じではないでしょうか。
今回は、ここまでです(>.<)