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

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

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

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

bin/console eccube:plugin:generate

無限スクロールの実装

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

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

{% block javascript %}
    <script src="//unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    <script>
        $(function () {
            var nextURL;

            function updateNextURL(doc) {
                nextURL = $(doc).find('ul.ec-pager a:contains("次へ")').attr('href');
                // 2ページ目以降のカートボタンが動作しないので非表示
                $(doc).find('li.ec-shelfGrid__item form, li.ec-shelfGrid__item .ec-productRole__btn').hide();
            }

            updateNextURL(document);

            var $container = $('.ec-layoutRole__main').infiniteScroll({
                path: function() {
                    return nextURL;
                },
                append: '.ec-shelfRole',
                history: true,
                hideNav: '.ec-pagerRole',
            });
            
            $container.on('load.infiniteScroll', function(event, response) {
                updateNextURL(response);
            });
        });
    </script>
{% endblock %}

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

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

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

<?php

namespace Plugin\InfiniteScroll;

use Symfony\Component\EventDispatcher\EventSubscriberInterface;
use Eccube\Event\TemplateEvent;

class Event implements EventSubscriberInterface
{
    /**
     * @return array
     */
    public static function getSubscribedEvents()
    {
        return [
            'Product/list.twig' => 'addAsset'
        ];
    }
    
    public function addAsset(TemplateEvent $event)
    {
        $event->addSnippet('@InfiniteScroll/default/js/script.twig');
    }
}

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

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

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

以上で完成です。

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

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

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

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

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