Conditional Visibility in Taptop

Why Is This Needed?

Imagine you have:

• A single product card template connected to a collection.
• One product has 5 specs, another has 8.
• One product has 10 photos, another only 5.
• Some products have additional images, while others don’t.

Without conditional visibility, empty blocks will take up space, making the page look messy.

The Solution: JavaScript for Hiding Empty Elements

1. Hiding Empty Text Blocks

Script:

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';
    }
  });
});

How It Works

1. window.addEventListener("load", ...) – The script runs after the page fully loads.
2. document.querySelectorAll('[data-check-text]') – Finds all elements with the data-check-text attribute.
3. .forEach(container => { ... }) – Loops through each matching element.
4. const textBlock = container.querySelector('.text-block-wrap-div') – Looks for the text block inside (Taptop wraps text in .text-block-wrap-div by default).
5. if (!textBlock || !textBlock.textContent.trim()) – Checks if the text block is empty

How to Use It

• Add the data-check-text attribute to any block that should hide when empty.
• The text inside must be in a .text-block-wrap-div (Taptop’s default structure).

Important! In Taptop, text blocks are automatically wrapped in .text-block-wrap-div, even though this layer isn’t visible in the editor.

2. Hiding Empty Images

Script:

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';
    }
  });
});

How It Works

1. Similar to the text script, but looks for elements with data-check-img.
2. const img = container.querySelector('img') – Finds the <img> tag inside the container.
3. if (!img || !img.src || !img.src.trim()) – Checks if the image has no src (i.e., is empty).

How to Use It

• Add data-check-img to any block containing an image.
• The image must be a standard <img> tag (Taptop renders images this way).

Important! Taptop always uses <img> for images, so the script targets this tag.

Conclusion

These scripts help automatically hide empty blocks, keeping pages clean and professional. Until Taptop adds native conditional visibility, this is a great workaround.

Pro Tips:

• If you have many dynamic elements, place the scripts in a separate file and load them where needed.
• Always double-check that you’ve added the correct data- attributes (data-check-text or data-check-img).

Now your pages will look polished, no matter how much data your collections contain! 🚀