Модификации

Как сделать отображение только отсутствующих товаров в блоке ST305N Tilda

2025-11-04 15:46 Бесплатные Каталог

Инструкция

Эта модификация позволяет управлять отображением товаров в стандартном Tilda‑блоке ST305N. Вместо того чтобы показывать весь ассортимент, блок будет отображать исключительно те позиции, которых сейчас нет в наличии — то есть у которых остаток установлен в «0».
  1. Подготовьте товары. В настройках нужных товаров в каталоге Tilda укажите остаток «0» 
  2. Разместите на странице блок ST305N и в его настройках выберите нужный каталог.
  3. Добавьте HTML‑блок T123 и вставьте в него приведённый ниже код.
  4. В коде найдите все упоминания #recXXXXXXXX и замените их на реальный ID вашего блока ST305N. Чтобы узнать ID: перейдите в настройки блока в редакторе Tilda. В самом низу вы увидите пункт «Block id:» и справа будет указан ID данного блока.

Важно! Если вы удалите все #recXXXXXXXX в скрипте, модификация применится ко всем блокам каталога на странице.
Как это можно использовать?
Например, если вам нужно показать на странице отдельным блоком, какие товары скоро появятся в продаже.
<!-- Скрипт для отображения проданных товаров на Tilda с сайта bulgkate.ru -->
<style>
#recXXXXXXXX .js-store-grid-cont.t-store__grid-cont.t-container,
#recXXXXXXXX .js-store-grid-cont.t951__grid-cont,
#recXXXXXXXX .js-store-grid-cont.t951__grid-cont.t-container,
#recXXXXXXXX .js-store-grid-cont.t-store__grid-cont.t-store__grid-cont_col-width_stretch {
  display: flex;
  flex-wrap: wrap;
}

#recXXXXXXXX .js-product.t-store__card.t-col,
#recXXXXXXXX .js-product.t-store__card.t-store__stretch-col {
  margin-bottom: 90px;
}


#recXXXXXXXX .js-product {
  display: none !important;
}


#recXXXXXXXX .js-product[data-product-inv="0"],
#recXXXXXXXX .js-product:not([data-product-inv]),
#recXXXXXXXX .js-product[data-product-inv=""] {
  display: block !important;
}


#recXXXXXXXX .t-store__grid-separator {
  display: none;
}

#recXXXXXXXX .t-store__card__textwrapper {
  height: auto !important;
}

#recXXXXXXXX .js-store-prod-sold-out {
  display: none !important;
}

.t-form__errorbox-wrapper {
  background-color: #ff37a7 !important;
}
.t-form__errorbox-wrapper .t-text_md {
  font-size: 16px !important;
}
</style>

<script>
    // Блок каталога
const rec = document.querySelector('#recXXXXXXXX');
const NEW_TEXT = 'Продано'; // ваш вариант

function replaceSoldOutText(root = rec) {
  root.querySelectorAll('.js-store-prod-sold-out').forEach(el => {
    if (el.textContent.trim().toLowerCase().includes('нет в наличии')) {
      el.textContent = NEW_TEXT;
    }
  });
}

// 1) сразу на текущей разметке
replaceSoldOutText();

// 2) чтобы не слетало при перерисовке/подгрузке каталога
const mo = new MutationObserver(() => replaceSoldOutText());
mo.observe(rec, { childList: true, subtree: true });
</script>