Услуги
Работы
О студии
Блог
Контакты
Услуги
Работы
О студии
Блог
Контакты
Получите бесплатную консультацию

Оставьте свои контактные данные и мы свяжемся с вами чтобы проконсультировать по необходимой услуге 
Нажимая на кнопку вы соглашаетесь с политикой конфиденциальности
Блог команды najes

Настраиваем пагинацию в каталоге товаров на Тильде

Настраиваем пагинацию в каталоге товаров на Тильде
Для того, чтобы настроить пагинацию, нам потребуется подключить каталог товаров, делается это в настройках сайта — пункт «ЕЩЕ» — каталог товаров.

Подключаем модуль каталога товаров в тильде

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

Наполнение каталога товаров

Далее нам нужно создать страничку в Tilda и добавить на нее блок из категории «Магазин» любой на выбор: ST300, ST305N.

Пагинация страниц магазин

В настройках блока переходим в раздел «Карточки» и включаем галочку «Показывать пагинацию». Можно в разделе выше указать число товаров, которое будет отображаться на каждой странице. 

Включаем в настройках тильды пагинацию


ВАЖНО!
В разделе «контент» важно подключить отображение товаров из каталога, без этого кнопка «показывать пагинацию» не будет отображаться.

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

Тильда убрать кнопку загрузить еще

1) Мы идем в настройки в раздел «кнопки» и убираем цвета заливки, цвет текста. 

Настройка кнопки загрузить еще

Минус этого способа в том, что у нас остается большое пространство от товаров до цифр пагинации страниц. По сути, кнопка активна хоть и не отображается, можно кликнуть в пустую область и товары раскроются. 

Убираем кнопку на тильде с помощью настроек

2) Второй способ более подходящий. С помощью CSS мы скроем кнопку «ЗАГРУЗИТЬ ЕЩЕ» в tilda, для этого идем в раздел «Другое», берем блок T123 и добавляем в него следующий код:

<style>
#rec377191157 .t-store__load-more-btn-wrap {
display: none;
}
</style>

Где #rec377191157 — это ID блока, у вас он будет свой. Меняем его в коде, и кнопка скрывается.

Пагинация на тильде настроена

Пагинация в виде страниц работает на данный момент только в десктоп версии. На мобильном устройстве присутствует только кнопка «ЗАГРУЗИТЬ ЕЩЕ».


Видеоинструкция по настройке пагинации на Тильде



Надеемся, данный материал был для вас полезен. 
Полезное-на-тильде