How To: Динамическая подгрузка контента на страницу (ajax-подгрузка)

Пример реализации динамической подгрузки товаров в каталоге.

1. Редактируем XSL-шаблон каталога товаров. В нём, в самом начале темплейта <xsl:template match="/shop"> добавляем скрипт:

<xsl:if test="not(/shop/ajax/node())">
    <SCRIPT type="text/javascript">
        <xsl:comment>
            <xsl:text disable-output-escaping="yes">
                <![CDATA[
                    $(function() {
                        $(window).scroll(function() {
                            if($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
                                $('div.products-grid-ajax a.load-more-items')
                                    .click()
                                    .prop('onclick', null)
                                    .off('click');
                            }
                        });
                    });
                ]]>
            </xsl:text>
        </xsl:comment>
    </SCRIPT>
</xsl:if>

2. Добавим кнопку "Показать еще". Для этого в этом же XSL-шаблоне каталога товаров меняем блок:

<!-- Выводим товары магазина -->
<div class="row products-grid">
    <xsl:apply-templates select="shop_item" />
</div>

на:

<!-- Выводим товары магазина -->
<div class="row products-grid products-grid-ajax">
    <xsl:apply-templates select="shop_item" />

    <xsl:if test="(page + 1) * limit &lt; total">
        <div class="col-12">
            <a class="btn btn-primary full-width margin-top-30 load-more-items" onclick="$(this).find('i').addClass('fa-spin'); $.showShopItems('{.//shop_group[@id=$group]/url}page-{/shop/page + 2}/')">
                <i class="fa fa-refresh"></i>
                Показать еще
            </a>
        </div>
    </xsl:if>
</div>

3. При нажатии на кнопку или при достижении конца страницы будет отправляться ajax-запрос функцией showShopItems. Добавим обработку js-функции в основной макет сайта, вкладка "Javascript":

$(function() {
    $.extend({
        showShopItems: function(path){
            jQuery.ajax({
                url: path,
                type: 'POST',
                data: { 'ajaxLoadItems': true },
                dataType: 'json',
                success: function(answer){
                    var jDiv = $('<div>').html(answer),
                        jDivItems = $('div.products-grid-ajax');

                    jDivItems.find('a.load-more-items').remove();
                    jDivItems.append(
                        jDiv.find('div.products-grid-ajax').children()
                    );

                    // Pagination
                    $('.pagination').after(jDiv.find('.pagination')).remove();
                }
            });
        }
    });
});

4. Переходим в код настроек типовой динамической страницы интернет-магазина, переносим после parseUrl() все ограничения и сортировки, которые были заданы ниже в коде настроек и динамической страницы, затем после них добавляем:

$Shop_Controller_Show
    ->limit($limit)
    ->parseUrl();

// ... сюда перенести все ограничения и сортировки выборки, обычный фильтр (если есть) заменить на быстрый ...

Добавляем PHP-обработку ответа для ajax-запроса:

// Ajax upload items
if (!is_null(Core_Array::getRequest('ajaxLoadItems')))
{
    $xslName = Core_Array::get(Core_Page::instance()->libParams, 'shopXsl');

    ob_start();

    $Shop_Controller_Show
        ->xsl(
            Core_Entity::factory('Xsl')->getByName($xslName)
        );

        $Shop_Controller_Show->addEntity(
            Core::factory('Core_Xml_Entity')
                ->name('ajax')
                ->value(1)
        );

        $Shop_Controller_Show->show();

    Core::showJson(ob_get_clean());
}

После всех описанных манипуляций, при нажатии на кнопку "Показать еще" или при достижении конца страницы будут подгружаться товары.

Комментарии