{% put scripts %}
    <script>
        $(function () {
            $.subscribe('mall.products.load.start', function () {
                $('.mall-products').find('.mall-loader').css({opacity: 1, visibility: 'visible'})
            });

            $.subscribe('mall.products.load.complete', function () {
                $.request('{{ __SELF__ }}::onRun', {
                    update: {'{{ __SELF__ }}::entries': '.mall-products'},
                });
            });

            $('body').on('click', '.mall-pagination--products a', function (e) {
                e.preventDefault()
                $.publish('mall.products.load.start')

                history.replaceState(null, '', $(this).attr('href'))
                $.publish('mall.products.load.complete')

                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            })
        })
    </script>
{% endput %}
