Как сделать кнопку «показать все товары» в shop script

Наверное, многие замечали на страницах товарных категорий кнопку, благодаря которой, можно было вывести сразу все продукты, которые к ней относятся. В целом, нельзя сказать, что это очень важная функция, но в базовых вариантах тем дизайна, которые предоставляет shop-script, данная возможность все-таки отсутствует. Особой сложности данный код, не представляет, поэтому предлагаю сразу перейти к делу.
Сразу же небольшое замечание: для того, чтобы данный функционал работал соответствующим образом, нужно отключить автоматическую загрузку списка товаров, иначе весь код будет попросту бесполезен.( как это сделать написать здесь).
Ну а теперь непосредственно к алгоритму:
В зависимости от Вашего желания, можно либо отредактировать файл темы(category.html), либо написать небольшой плагин и воспользоваться хуком frontend_category.
{literal}
<script type="text/javascript">
$(function(){
$(".show_all").click(function(){
var max_count = $(".show_all_info").data("pages_count");// общее количество страниц
var next_page = $(".show_all_info").data("page");// текущая страница
if (next_page >= max_count) return false;
$(".show_all").append("<i class='icon16 loading'></i>");
function getAllPages(next_page, max_count){
$.get(window.location.href, {page:next_page}, function(data){// Отправляем запрос на сервер
var data = $(data);
$("#product-list .thumbs.product-list").append(data.find(".thumbs.product-list").html());// выбираем из полученных данных информацию о товарах
if (next_page < max_count) {// если это не последняя страница, то продолжаем
next_page++;
$(".show_all_info").data("page", next_page);
return getAllPages(next_page, max_count);
}
else {
$(".show_all .icon16").remove();
return false;
}
});
}
getAllPages(next_page, max_count);
return false;
});
});
</script>
{/literal}
<div>
<a style="cursor:pointer;" class="show_all">Показать все товары</a>
</div>
<input type="hidden" class="show_all_info" data-page="2" data-pages_count="{$pages_count}">
Что касается адаптации данного кода, то по сути, остается узнать, каким образом в Вашей теме дизайна реализован вывод товаров, соответственно, остается отредактировать строку $("#product-list .thumbs.product-list").append(data.find(".thumbs.product-list").html()); , поставить здесь нужные селекторы, и после этого кнопка заработает.
На этом все. В следующей статье рассмотрим возможность создания кнопки, которая позволит менять количество товаров, которое отображается на странице категории.
Для того, чтобы выразить экспертное мнение, нужно авторизироваться