【EC-CUBE4】商品一覧を無限スクロールに対応するプラグインを作る方法

EC-CUBE4で商品一覧を無限スクロールに対応するプラグインを作る方法です。

まずは以下のコマンドでプラグインの雛形を作ります。

プラグインコードはなんでも良いのですが、今回は「InfiniteScroll」にしてください。

無限スクロールの実装

まずは無限スクロールをjavascriptで実装します。

自動生成されたプラグイン一式内にResource/tempalte/default/jsディレクトリを作り、以下のscript.twigファイルを設置して下さい。

無限スクロール対応すると2ページ目以降の「カートに入れる」ボタンが機能しないのでボタンを非表示にしています。

javascriptを商品一覧ページで出力

上記で作成したjavascriptを商品一覧ページで出力させるようにEvent.phpにイベントを登録します。

商品一覧ページ用のテンプレートファイル「Product/list.twig」にjavascriptを読み込ませるようイベントで登録しています。

$event->addSnippetでjavascriptのパスを指定するとページの下部にjavascriptが出力されるようになります。

プラグインのインストールと有効化

以上で完成です。

プラグインのインストールと有効化を行うと商品一覧ページにて無限スクロールが実行されます。

このプラグインのファイル一式はこちら

Infinite Scrollのライセンスについて

Infinite Scrollを商用で使用する場合、有料ライセンスが必要です。

ライセンスについてはこちら

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください