Кнопка «Показать ещё» для магазина в Zero-блоке

Кнопка «Показать ещё» повторяет вид первой кнопки витрины, и настроить её отдельно нельзя. Модификация оставляет всю логику подгрузки Тильде, а нажатие принимает на себя ваш элемент из Zero-блока.

Что настраивается

• ID Zero-блока с вашим элементом и ID блока с товарами. Подходит и каталог, и витрина магазина с товарами внутри блока — тип определяется сам.
• Класс элемента, который работает кнопкой.
• Размер и цвет кружка загрузки, который показывается вместо надписи, пока Тильда подгружает товары.
• Содержимое приглушается, кружок крутится поверх.

Как это работает

Скрипт находит родную кнопку блока, прячет её и переадресует ей нажатие. Состояние вашей кнопки повторяет состояние родной: она видна, пока есть что подгружать, и исчезает, когда Тильда прячет свою — в том числе когда в разделе не осталось товаров. За этим следит наблюдатель за изменениями блока, поэтому не важно, каким именно способом Тильда спрятала кнопку: сняла её со страницы, выставила стиль или пометила классом.

Что учтено

• Скрипт стартует после отрисовки артборда, а если тот уже отрисован — сразу; блок с кодом можно ставить в любом месте страницы.
• Показ и скрытие элемента сделаны атрибутом и правилом стиля, а не инлайновым свойством, поэтому перерисовка Zero-блока при смене ширины экрана состояние не сбрасывает.
• Повторная вставка кода не приводит к двойному нажатию родной кнопки.
• Если блока с товарами на странице нет, элемент просто прячется и ошибок не возникает.
• Пока грузятся товары, элемент выключен. Содержимое приглушается, поверх крутится кружок, повторные нажатия не проходят. Состояние снимается ровно тогда, когда Тильда закончила подгрузку, — оно читается из её же признаков загрузки, а не по таймеру.

Ограничения

Под кнопкой стоит оставить блок с отступом: когда товары закончатся, элемент исчезнет, и без отступа следующий блок подойдёт вплотную.