« || »

 EC-CUBE4用 スクロールページャー

2020. 2. 2 (日)

いわゆる無限スクロールに対応させるものですが、EC-CUBE4に特化させたかったので既存の無限スクロール支援ライブラリは使用していません。
普段は私自身jQueryもあまり使いませんが、EC-CUBE4がデフォルトで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アイコンメーカー

« || »

Comments are closed.