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

最近の備忘録が、イベント参加情報（？）になっているので、久しぶりに備忘録を掲載します。（でもまだイベント参加の報告あります、書けてませんが(ノД`)・゜・。）
今回は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] 特定の要素内だけスクロールに追随するサイドバーを作る方法