Интеграция постраничной навигации (пагинатора)
текстовая расшифровка видео урока
На следующем шаге перейдем к настройке шаблона каталога товаров.
Ранее мы производили настройку категорий каталога и импортировали товары с помощью движка. Видим, что теперь все загруженные товары благополучно выводятся на витрину.
Можно начинать интеграцию необходимых элементов каталога.
Давайте откроем файл шаблона донора.
Как мы видим, первым элементом каталога в структуре данного макета является пагинатор.
![](/images/f9be5195255a52fb5b7eb0696d0284c5.jpeg)
Обратите внимание на его конструкцию.
Она представляет собой список элементов li с вложенными ссылками и спанами, а так же содержит различные классы.
Теперь перейдем к шаблонам магазина.
Нам нужен «верхний уровень для списка товаров в категории».
Закомментируем имеющуюся в шаблоне конструкцию.
Добавим только метку {pages}.
Она отвечает за вывод постраничной навигации.
Сохраним и перейдем на витрину.
![](/images/59f6165074297a4f25aae732f2ec7e6f.jpeg)
Обновим страницу.
Метка вывела стандартный набор элементов, который в нашем случае излишний.
В рассматриваемом шаблоне навигация предусматривает только номера страниц каталога и стрелки перелистывания вперед и назад.
Чтобы убрать лишние элементы навигации, перейдем к настройкам сайта.
Вкладка «общие».
Убираем вывод ссылок на первую и последнюю страницы.
В полях со ссылками на предыдущую и следующую страницы текст нам не нужен, т.к. в шаблоне донора для этих элементов предусмотрена своя стилизация в виде стрелок. Сохраняем.
![](/images/6913372a85a826913556d1095c227149.jpeg)
Далее переходим в раздел магазин.
Вкладка постраничный вывод товаров.
Удалим содержимое поля вывода ссылки на все товары.
Сохраним.
![](/images/f0bc311913ec857a2199b9dcc97fa819.jpeg)
Перейдем на сайт и обновим страницу.
Сейчас пагинация выводит элементы в соответствии с нашими настройками.
Проинспектируем ее чтобы изучить структуру, сгенерированную движком.
Видим, что всё обёрнуто в блок div с классом pages.
Далее идет див со структурой элементов:
- Неактивный элемент – это спан с классом prev.
- Выбранный элемент – это тег b.
- Активные элементы представляют собой ссылки.
- Ссылка, перелистывающая страницу содержит класс “next”.
![](/images/a348d04dfe9e7c1174c20aabb41282f3.jpeg)
Теперь необходимо перенастроить стили и классы, используемые в структуре шаблона на новую структуру, которую сгенерировал движок.
Откроем файл style.css.
Внесем в него необходимые изменения.
Загружаем обновленный файл на сервер.
![](/images/4db1492ebbe13e84bfe7ae9b4d9acdd3.jpeg)
![](/images/c94b3b90a9927da450bbdcb1bd5831f8.jpeg)
Вернемся на сайт.
Обновим страницу. Видим, что пагинатор приобрел нужный вид.
Далее перейдем к шаблону верхнего уровня списка товаров в категории.
Раcкомментируем код и оставим от его первоначального вида только блок с меткой вывода товаров {items}.
Сверху и снизу установим метки {pages}
![](/images/959544b6bb1ec65335ac8f024bb8ad6c.jpeg)
Сохраним и перейдем на сайт.
Обновляем. Пробуем работоспособность.
![](/images/86572372ee2c19abce9444e12639c7c9.jpeg)
Как мы видим, интегрированный пагинатор правильно исполняет все заложенные команды навигации по каталогу и выглядит в соответствии с шаблоном макета.
Видео урок: интеграция постраничной навигации (пагинатора)