Условное отображение в Taptop

Дата
July 14, 2025
Тема
Разработка

В веб-дизайне часто возникают ситуации, когда элементы на странице должны отображаться только при наличии контента. Например, если в карточке товара не заполнено поле с характеристикой, лучше скрыть блок, чтобы не оставлять пустое место. К сожалению, в Taptop пока нет встроенного функционала для условного отображения элементов. Но эту проблему можно решить с помощью небольших JavaScript-скриптов.

Зачем это нужно?

Представьте, что у вас:

  • Единый шаблон карточки товара, подключённый к коллекции.
  • У одного товара 5 характеристик, у другого — 8
  • У одного товара 10 фотографий, у другого — только 5.
  • У некоторых товаров есть дополнительные изображения, а у других их нет.

Без условного отображения пустые блоки будут занимать место, и страница будет выглядеть неаккуратно.

Решение: JavaScript для скрытия пустых элементов

1. Скрытие пустых текстовых блоков

Скрипт:

window.addEventListener("load", () => {
  document.querySelectorAll('[data-check-text]').forEach(container => {
    const textBlock = container.querySelector('.text-block-wrap-div');
    if (!textBlock || !textBlock.textContent.trim()) {
      container.style.display = 'none';
    }
  });
});


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

  1. window.addEventListener("load", ...) – Скрипт запускается после полной загрузки страницы.
  2. document.querySelectorAll('[data-check-text]') – Ищет все элементы с атрибутом data-check-text.
  3. .forEach(container => { ... }) – перебирает найденные элементы.
  4. const textBlock = container.querySelector('.text-block-wrap-div') – Внутри каждого элемента ищет блок с текстом (в Taptop тексты всегда обёрнуты в .text-block-wrap-div).
  5. if (!textBlock || !textBlock.textContent.trim()) – Проверяет, есть ли текст внутри блока. Если текста нет, то container.style.display = 'none' – скрывает весь родительский элемент.

Как использовать

  • Добавьте атрибут data-check-text к блоку, который нужно скрывать, если он пустой.
  • Внутри этого блока должен быть виджет Text.

Важно! В Taptop виджет Text автоматически внутри себя создает элемент с классом .text-block-wrap-div, но в редакторе этого слоя не видно – просто знайте, что он есть. Именно в элементе text-block-wrap-div содержится текстовый контент, поэтому мы обращаемся именно к нему.

2. Скрытие пустых изображений

Скрипт:

window.addEventListener("load", () => {
  document.querySelectorAll('[data-check-img]').forEach(container => {
    const img = container.querySelector('img');
    if (!img || !img.src || !img.src.trim()) {
      container.style.display = 'none';
    }
  });
});


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

  1. Аналогично текстовому скрипту, но теперь ищем элементы с атрибутом data-check-img.
  2. const img = container.querySelector('img') – Внутри контейнера ищет тег <img>
  3. if (!img || !img.src || !img.src.trim()) – Проверяет, есть ли у изображения атрибут src (то есть загружено ли изображение). Если src пустой, контейнер скрывается

Как использовать

  • Добавьте data-check-img к блоку, который содержит изображение.
  • Внутри этого блока должен быть виджет Image.

Важно! В Taptop изображения всегда вставляются через <img>, поэтому скрипт ищет именно этот тег.

Вывод

Эти скрипты помогают автоматически скрывать пустые блоки, делая страницы более аккуратными. Пока в Taptop нет встроенного Conditional Visibility, такой подход – отличное временное решение.

Советы:

  • Всегда проверяйте, что добавляете правильные data-атрибуты (data-check-text или data-check-img).

Теперь ваши страницы будут выглядеть идеально, даже если в коллекции разное количество данных! 🚀

Автор:
Александр Гудаев —
Jul 2025

Прочие статьи