EC-Cube3のチェックした商品プラグインの追随ボックス化 | Webクリエイターな備忘録

このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。 Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。

EC-Cube3のチェックした商品プラグインの追随ボックス化

EC-Cube3のチェックした商品プラグインの追随ボックス化
最近の備忘録が、イベント参加情報(?)になっているので、久しぶりに備忘録を掲載します。(でもまだイベント参加の報告あります、書けてませんが(ノД`)・゜・。)
今回は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;
	}
}

出来上がったのが、こちらの様な感じになります。
チェックした商品プラグインの追随ボックス
動きも良く、見栄えもいい感じではないでしょうか。

今回は、ここまでです(>.<)

今回の記事で参考にさせて頂いたサイト

[jQuery] 特定の要素内だけスクロールに追随するサイドバーを作る方法

コメントは受け付けていません。