Неактивная карточка товара, если товара нет в наличии в Тильде
Когда товар заканчивается на складе, оставлять его карточку в каталоге в обычном виде — плохая идея. Покупатель кликает, открывает страницу, видит «нет в наличии» — и закрывает сайт раздражённый. Тильда умеет скрывать такие товары полностью, но это тоже не всегда удобно: ассортимент «худеет», SEO-страницы пропадают, а клиенты не понимают, появится ли товар снова. Лучшее решение — оставить карточку видимой, но визуально пометить как недоступную и заблокировать клик. В этой статье разберём, как это сделать кастомным скриптом за пять минут.
- Код
- Инструкция
- Пример
- Подробнее
Модификация для создания неактивных карточек товаров в Тильде
Как настроить неактивные карточки товаров
Всё, что нужно седелать — это добавить код модификации на сайт. есть два варианта:
Первый — на одну страницу. Открой нужную страницу в редакторе Тильды, добавь блок «Другое» → T123 (HTML-код), вставь скрипт туда. Скрипт сработает только на этой странице.
Второй — на весь сайт. Зайди в «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь HEAD». Вставь туда. Теперь все каталоги на всех страницах будут обрабатываться автоматически.
Сохрани, опубликуй страницу и проверь — карточки без остатков должны стать полупрозрачными и неактивными.
Что именно делает каждое свойство
В скрипте нет JavaScript-перебора элементов, и это сделано осознанно. CSS-селектор [data-product-inv="0"] сам находит все карточки с нужным атрибутом, и это работает даже для тех товаров, которые Тильда подгружает динамически — при включённой пагинации, фильтрации по категориям или бесконечной прокрутке каталога. Никаких MutationObserver, никаких задержек.
Разберём свойства внутри:
opacity: 0.4 делает карточку полупрозрачной. Значение можно крутить от 0 до 1 — чем меньше, тем сильнее «выцветает». 0.4 — золотая середина: видно, что товар есть, но сразу понятно, что с ним что-то не так.
pointer-events: none — главная строчка. Она отключает все возможные взаимодействия: клик, наведение, тап на мобильном. Ссылки внутри карточки перестают вести куда-либо, кнопка «купить» не реагирует, всплывающее окно с быстрым просмотром не открывается. Браузер ведёт себя так, будто карточки нет — и это именно то, что нам нужно.
filter: grayscale(0.5) обесцвечивает фотографию товара на 50%. Можно поставить 1 (полностью чёрно-белая) или убрать строку совсем, если эффект не нравится.
cursor: default подстраховывает курсор: даже если браузер по какой-то причине решит показать руку наведения, появится обычная стрелка.
transition: opacity 0.2s ease добавляет плавность — если карточка обновляется через JS (например, после фильтра), переход в неактивное состояние будет мягким, а не дёрганым.
Зачем это нужно с точки зрения бизнеса
Полное скрытие закончившихся товаров — не лучшая стратегия. Карточка в каталоге — это страница, которую видят поисковики, на которую ведут ссылки из рекламы, рассылок и соцсетей. Если она вдруг исчезает, теряются позиции в выдаче, ломаются переходы по сохранённым ссылкам, у клиента возникает ощущение, что у вас сужается ассортимент.
Полупрозрачная неактивная карточка решает все эти проблемы: страница остаётся, поисковая выдача не страдает, посетитель видит, что товар был и, возможно, ещё появится. Можно дополнительно добавить кнопку «Сообщить о поступлении» — но это уже тема для отдельного гайда.
