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

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

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

• Единый шаблон карточки товара, подключённый к коллекции.
• У одного товара 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).

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