Пример реализации динамической подгрузки товаров в каталоге.
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 < total">
<div class="col-xs-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());
}
После всех описанных манипуляций, при нажатии на кнопку "Показать еще" или при достижении конца страницы будут подгружаться товары.
Пытаюсь аналогично изменить xls/тдс шаблоны для Информационной системы и ничего не выходит . Подскажите как сделать аякс подгрузку для статей/новостей ?
Делать аналогично, корректно заменяя shop на informationsystem с учетом регистра. Текст ошибки посмотрите в консоли браузера.