Как сделать кнопку «показать все товары» в 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()); , поставить здесь нужные селекторы, и после этого кнопка заработает.

На этом все. В следующей статье рассмотрим возможность создания кнопки, которая позволит менять количество товаров, которое отображается на странице категории.