Интеграция постраничной навигации (пагинатора)

На следующем шаге перейдем к настройке шаблона каталога товаров.

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

Можно начинать интеграцию необходимых элементов каталога.

Давайте откроем файл шаблона донора.

Как мы видим, первым элементом каталога в структуре данного макета является пагинатор.

Обратите внимание на его конструкцию.

Она представляет собой список элементов li с вложенными ссылками и спанами, а так же содержит различные классы.

Теперь перейдем к шаблонам магазина.

Нам нужен «верхний уровень для списка товаров в категории».

Закомментируем имеющуюся в шаблоне конструкцию.

Добавим только метку {pages}.

Она отвечает за вывод постраничной навигации.

Сохраним и перейдем на витрину.

Обновим страницу.

Метка вывела стандартный набор элементов, который в нашем случае излишний.

В рассматриваемом шаблоне навигация предусматривает только номера страниц каталога и стрелки перелистывания вперед и назад.

Чтобы убрать лишние элементы навигации, перейдем к настройкам сайта.

Вкладка «общие».

Убираем вывод ссылок на первую и последнюю страницы.

В полях со ссылками на предыдущую и следующую страницы текст нам не нужен, т.к. в шаблоне донора для этих элементов предусмотрена своя стилизация в виде стрелок. Сохраняем.

Далее переходим в раздел магазин.

Вкладка постраничный вывод товаров.

Удалим содержимое поля вывода ссылки на все товары.

Сохраним.

Перейдем на сайт и обновим страницу.

Сейчас пагинация выводит элементы в соответствии с нашими настройками.

Проинспектируем ее чтобы изучить структуру, сгенерированную движком.

Видим, что всё обёрнуто в блок div с классом pages.

Далее идет див со структурой элементов:

• Неактивный элемент – это спан с классом prev.
• Выбранный элемент – это тег b.
• Активные элементы представляют собой ссылки.
• Ссылка, перелистывающая страницу содержит класс “next”.

Теперь необходимо перенастроить стили и классы, используемые в структуре шаблона на новую структуру, которую сгенерировал движок.

Откроем файл style.css.

Внесем в него необходимые изменения.

Загружаем обновленный файл на сервер.

Вернемся на сайт.

Обновим страницу. Видим, что пагинатор приобрел нужный вид.

Далее перейдем к шаблону верхнего уровня списка товаров в категории.

Раcкомментируем код и оставим от его первоначального вида только блок с меткой вывода товаров {items}.

Сверху и снизу установим метки {pages}

Сохраним и перейдем на сайт.

Обновляем. Пробуем работоспособность.

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