Ajax_product_load.js

document.addEventListener("DOMContentLoaded", function(event) {



var pagination_exist = true; // оставить пагинацию и добавить кнопку
var button_more = true; // true наличие кнопки "загрузить ещё" false - автозагрузка при прокрутке в конец страницы
var arrow_top = true;// - выводить стрелочку "вверх"

var button_more_html = '<div class="text-center"><a href="#" class="load_more">Загрузить ешё</a></div>';
var button_more_style = '<style>a.load_more {display:inline-block; margin:0 auto 20px auto; padding: 0.5em 2em; border: 1px solid #069; border-radius: 5px; text-decoration:none; text-transform:uppercase;}</style>';
var arrow_top_html = '<a id="arrow_top" style="display:none;" onclick="scroll_to_top();"></a>';
var additional_style = '<style>\
#ajax_loader{width:100%;height:30px;margin-top:15px;text-align:center;border:none!important;}\
#arrow_top{background: url("/image/chevron_up.png") no-repeat transparent;background-size: cover;position: fixed;bottom: 50px;right: 15px;cursor: pointer;height: 50px;width: 50px;}\
</style>';
$('head').append(additional_style);

var top_offset = 100; // высота отступа от верха окна, запускающего arrow_top
var window_height = 0; // высота окна
var product_block_offset = 0; // отступ от верха окна блока, содержащего контейнеры

var product_block = '.catalog'; // определяет div, содержащий товары
var pages_count = {}; // счетчик массива ссылок пагинации

var pages = []; // массив для ссылок пагинации
var waiting = false;

function getNextProductPage(pages, pages_count) {
    if (waiting) return;
    if (pages_count.val >= pages.length) return;
    waiting = true;
    $(product_block).parent().after('<div id="ajax_loader"><img src="/image/ajax-loader-horizontal.gif" /></div>');
    $.ajax({
        url:pages[pages_count.val],
        type:"GET",
        data:'',
        success:function (data) {
            $data = $(data);
            $('#ajax_loader').remove();
            if ($data) {
                if ($data.find('.catalog').length > 0) {
                    $(product_block).parent().append($data.find('.catalog').parent().html());
                    if (product_block == '.catalog') {
                        $('#grid-view').trigger('click')};
                    } else {
                        $(product_block).parent().append($data.find('.catalog').parent().html());
                        if (product_block == '.catalog') {$('#list-view').trigger('click')};
                    }
                    if (pagination_exist) {
                        $('.pagination').html($data.find('.pagination'));
                    }
                }
                waiting = false;
            }
    });
    if (pages_count.val + 1 >= pages.length) { $('.load_more').hide(); };
    pages_count.val++;
}

function getProductBlock() {
    if ($('.catalog').length > 0) {
        product_block = '.catalog';
    } else {
        product_block = '.catalog';
    }
    return product_block;
}

window.scroll_to_top = function () {
    $('html, body').animate({
        scrollTop: 0
    }, 300, function() {
        $('.arrow_top').remove();
    });
}

    window_height = $(window).height();
    product_block = getProductBlock();
    var button_more_block = button_more_style + button_more_html;

    if(arrow_top) {$('body').append(arrow_top_html); arrow_top = $('#arrow_top'); }

    if ($(product_block).length > 0) {
        product_block_offset = $(product_block).offset().top;
    var href = $('.pagination').find('li:last a').attr('href');
        $('.pagination').each(function(){
            if (href) {
                TotalPages = href.substring(href.indexOf("page=")+5);
                First_index = $(this).find('li.active span').html();
                i = parseInt(First_index) + 1;
                while (i <= TotalPages) {
                    pages.push(href.substring(0,href.indexOf("page=")+5) + i);
                    i++;
                }
            }
        });
        $(window).scroll(function(){
            if (arrow_top) {
                if ($(document).scrollTop() > top_offset) {
                    $('#arrow_top').show();
                } else {
                    $('#arrow_top').hide();
                }
            }
        });
        if (button_more && href) {
            $('.pagination').parent().before(button_more_block);
            if (!pagination_exist) {
                $('.pagination').parent().remove();
            } else {
                $('.pagination').parent().find('.text-right').remove();
            }
            $('.load_more').click( function(event) {
                event.preventDefault();
                getNextProductPage(pages, pages_count);
            });
        } else if (href) {
            $('.pagination').parent().hide();
            $(window).scroll(function(){
                product_block = getProductBlock();
                product_block_height = $(product_block).parent().height();
                if (pages.length > 0) {
                    if((product_block_offset+product_block_height-window_height)<($(this).scrollTop())){
                        getNextProductPage(pages, pages_count);
                    }
                }
            });
        }
    }
});