Модификации

Заменяем текст «Нет в наличии» у товаров

Каталог

Инструкция

По умолчанию у закончившихся товаров в блоке ST305N отображается текст «Нет в наличии». Эта модификация заменяет его на собственную формулировку, например «Скоро появятся в продаже».
  1. Добавьте на страницу блок ST305N из категории «Магазин».
  2. Подключите к блоку реальные товары из каталога Tilda. Модификация работает со статусом товаров из каталога, а не с карточками, созданными вручную.
  3. Откройте «Настройки» блока и укажите в поле «CSS-класс блока»: soldouttext
  4. Добавьте на страницу HTML-блок T123 и вставьте в него код модификации.
  5. Чтобы изменить надпись, замените текст внутри кавычек в этой строке: const NEW_TEXT = 'Скоро появятся в продаже';
  6. Опубликуйте страницу и проверьте товар, которого нет в наличии.
Важно:
Скрипт работает только внутри блоков с классом soldouttext. Он не изменяет надписи в остальных товарных блоках на странице.

Если Tilda работает на английском, замените в массиве SOLD_OUT_TEXTS текст нет в наличии на out of stock.
<!-- Скрипт, который заменяет текст «Нет в наличии» у товаров в блоке ST305N на Tilda. Источник: bulgkate.ru -->
<script>
(function () {
    const BLOCK_SELECTOR = '.uc-soldouttext';
    const NEW_TEXT = 'Скоро появятся в продаже'; // Укажите нужный текст

    function replaceSoldOutText(root) {
        root.querySelectorAll('.js-store-prod-sold-out').forEach(function (element) {
            const currentText = element.textContent.trim().toLowerCase();

            if (currentText.includes('нет в наличии')) {
                element.textContent = NEW_TEXT;
            }
        });
    }

    function init() {
        document.querySelectorAll(BLOCK_SELECTOR).forEach(function (block) {
            replaceSoldOutText(block);

            const observer = new MutationObserver(function () {
                replaceSoldOutText(block);
            });

            observer.observe(block, {
                childList: true,
                subtree: true
            });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>