EC-CUBE4用 スクロールページャー
いわゆる無限スクロールに対応させるものですが、EC-CUBE4に特化させたかったので既存の無限スクロール支援ライブラリは使用していません。
私自身は普段はjQueryもあまり使いませんが、EC-CUBE4がデフォルトでjQueryを使用しているので今回はjQueryについては使用しました。
ファイルダウンロード
verticalScrollPager.js の中身を html/user_data/assets/js/customize.js へ、
verticalScrollPager.css の中身を html/user_data/assets/css/customize.css へ
それぞれコピペすれば導入完了です。
ブラウザキャッシュが邪魔になる場合がありますので、その場合は必要に応じてキャッシュ対策等も行なってください。
デフォルトでスクロールでのページングになっていますが、件数/並び順プルダウンの上にある指アイコンをクリックすることで従来のページ遷移にも切り替えられます。(押すごとにトグル切替)
スクロールでのページング時にも現表示ページ数確認用も兼ねて画面下部に従来の遷移型ページャーを表示させていますが、邪魔であればページャー部分の余白部分か、スクロールページ内にあるページ区切り帯のページ数表示部分をクリックすれば消すことができます。
再度押すと再び表示します。
通常のページ遷移で途中ページから表示させた場合、それより若いページへスクロールで遡る動作には対応していません。
使用をやめる場合は、customize.js、customize.cssへそれぞれコピーした該当コードを削除するだけで元に戻ります。
次ページローディング中に画面下部へ表示させているCSSアイコンは、以下のサイトで作成したCSSコードを使わせていただきました。
CSSだけで作るloadingアイコンメーカー