Skip to main content
Question

Can you have a parent category visible without a child category?


security_lion

I have a parent category that did not have a child category. It looks like in order for the parent category to be visible, you must have at least one child category. Is this a true requirement? Is there another way to make a parent category public without having a child category?

3 replies

  • Contributor ⭐️⭐️⭐️
  • 20 replies
  • June 23, 2021

@security_lion  - not that I’m aware of.  
The fact that Parent Categories are really just a ‘page’ and don’t ‘hold content’ is a little weird as well. 
Are you trying to just use it as a navigation page? 
What would you want to expose on that Parent category page since it wouldn’t have any content? 


security_lion
  • Author
  • Helper ⭐️⭐️
  • 134 replies
  • June 23, 2021

@Dorothyt thank you! Was looking for confirmation on that.

Basically got into a situation in which for launch, we have a parent-category that does not need children right away. In that case, I thought we could surface the parent category as a place to host discussions. The way it is set up right now, we’ll hold off on launching this parent category because it won’t surface without children. (or the parent category has a child with the same name)

 

The alternative is to make a child category we might need to archive or reorganized at a later time, but I was concerned about the implications of moving that content later on.


  • Expert ⭐️
  • 101 replies
  • March 22, 2024

I just needed to try this out in our sandbox. You can do it, but you need to use a bit of code.

Essentially what you need to do is create your empty categories and add a single child category in each. Name each the same as the parent category. Then, identify the category and child category URL combinations. These are needed for your code. You essentially need to dynamically replace a few URLs in your page when it loads. 

This is the code I quickly knocked up to get this working. Feel free to use this and let me know if you have any issues with it. It is not fully tested….

 

<script>
  /*************Change Category to board****************/

  // Function to return a clean version of a URL (removing query params, fragments, etc.)
  function cleanURL(url) {
      const urlObj = new URL(url);
      // This will give you the clean URL containing only the scheme, host, and pathname
      return `${urlObj.protocol}//${urlObj.host}${urlObj.pathname}`;
  }


  document.addEventListener('DOMContentLoaded', (event) => {
      // Select all elements with the class 'community-category__card'
      const cards = document.querySelectorAll('.community-category__card');

      // Iterate over each card
      cards.forEach(card => {
          // Find all <a> children of the current card
          const links = card.querySelectorAll('a');

          // Iterate over each link
          links.forEach(link => {
              // Check if the href attribute is matches a URL that needs to be changed
              if (link.href === 'https://xxxxxxxxxxx-5') {
                  // Change the href attribute 
                  link.href = 'https://xxxxxxxxxxx-7';
              } else if (link.href === 'https://xxxxxxxxxxx-31') {
                  // Change the href attribute 
                  link.href = 'https://xxxxxxxxxxx-32';
              } else if (link.href === 'https://xxxxxxxxxxx-38') {
                  // Change the href attribute 
                  link.href = 'https://xxxxxxxxxxx-51';
              } else if (link.href === 'https://xxxxxxxxxxx-39') {
                  // Change the href attribute 
                  link.href = 'https://xxxxxxxxxxx-55';
              } else if (link.href === 'https://xxxxxxxxxxx-40') {
                  // Change the href attribute
                  link.href = 'https://xxxxxxxxxxx-59';
              } else if (link.href === 'https://xxxxxxxxxxx-41') {
                  // Change the href attribute
                  link.href = 'https://xxxxxxxxxxx-64';
              }


          });
      });

      // Remove unnecessary breadcrumbs
      // Get the current webpage URL
      const currentURL = window.location.href;

      // Clean the current webpage URL
      const cleanCurrentURL = cleanURL(currentURL);

      if (cleanCurrentURL === 'https://xxxxxxxxxxx-7' ||
          cleanCurrentURL === 'https://xxxxxxxxxxx-32' ||
          cleanCurrentURL === 'https://xxxxxxxxxxx-51' ||
          cleanCurrentURL === 'https://xxxxxxxxxxx-55' ||
          cleanCurrentURL === 'https://xxxxxxxxxxx-59' ||
          cleanCurrentURL === 'https://xxxxxxxxxxx-64') {

          let breadcrumbLink = document.querySelector('li.breadcrumb-item.qa-breadcrumb-forum > a');

          const liElement = breadcrumbLink.parentElement;
          // Remove the <li> element from the DOM
          liElement.remove();
      }

  });
</script>

Add this in the “Before </Body>” section of “Third-party scripts”, replace the URLs that you need to match and replace, then this should work for you.


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings