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

Наверняка вы знаете, что кнопка «Показать ещё» имеет такой же дизайн, как первая кнопка в любой витрине магазина на Тильде. Её можно кастомизировать с помощью CSS, что является самым правильным и безболезненным, но иногда хочется чего-то эдакого.

Как раз для таких случаев мы решили сделать модификацию, позволяющую скрыть стандартную кнопку, а вместо неё отобразить ту, что вы нарисуете в Zero-блоке. Это может быть как стандартная кнопка, так и текст, shape или вектор. Главное действовать по инструкции:

Добавьте управляющему элементу (кнопке, тексту или тому, что вы выберите) класс necodim-showmore. Как это сделать, читайте тут.
В форме ниже выберите, где у вас хранятся товары: в каталоге или в самом блоке витрины магазина.
Впишите ID своего Zero-блока с кнопкой.
Добавьте ID блока каталога.
Скопируйте полученный код и вставьте под Zero-блоком с кнопкой или внизу страницы.
Оставьте только один отступ: снизу у каталога или сверху у кнопки. Отступ снизу у кнопки должен быть нулевым.
Под кнопкой разместите блок DV05 (Дополнительный отступ). Он нужен, чтобы после исчезания кнопки у вас оставался отступ до следующего блока.

<!-- Сделай в Zero-блоке кнопку «Показать ещё» для магазина | https://necodim.ru/tilda/showmore-in-zeroblock -->

<script>
(function(){
    const zeroblock = document.querySelector('#rec123456789');
    const catalog = document.querySelector('#rec234567890');
    if (!!catalog) {
        zeroblock.querySelector('.t396__artboard').addEventListener('artBoardRendered', (e) => {
            e.target.querySelector('.necodim-showmore').addEventListener('click', (event) => {
                event.preventDefault();
                zeroblock.querySelector('.necodim-showmore .tn-atom').classList.add('loading');
                catalog.querySelector('.t-store__load-more-btn').click();
            });
        });
        catalog.querySelector('.js-store-grid-cont').addEventListener('tStoreRendered', () => {
            zeroblock.style.display = '';
            zeroblock.querySelector('.necodim-showmore .tn-atom').classList.remove('loading');
            if (catalog.querySelector('.t-store__load-more-btn').style.display === 'none') zeroblock.style.display = 'none';
            if (!!catalog.querySelector('.js-store-empty-part-msg')) zeroblock.style.display = 'none';
        });
    } else {
        zeroblock.style.display = 'none';
    }
}());
</script>
    
<style>
#rec123456789 .t-store__load-more-btn-wrap {
    display: none;
}
.necodim-showmore {
    cursor: pointer;
}
.necodim-showmore .tn-atom.loading {
    font-size: 0 !important;
}
.necodim-showmore .tn-atom.loading::after {
    content: '';
    width: 20px;
    aspect-ratio: 1;
    border: 2px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}
@keyframes rotation {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
</style>