How to add a new tab and summury of your knowledgebase

[mbory]

If you wish to display a summary of all your articles, you can follow these steps. I've done it in a new tab, next to the most viewed and latest posts tabs.

First, let's create the new tab. Go to the file : theme/hesk3/cutomer/index.php

There, look for the div with class "tabbed__head", which is where we'll add our tab3 (rename the name as you wish):

Code: Select all

<div class="tabbed__head">
    <ul class="tabbed__head_tabs">
        <?php
        if (count($top_articles) > 0) :
        ?>
            <li class="current" data-link="tab1">
                <span><?php echo $hesklang['popart']; ?></span>
            </li>
        <?php
        endif;
        if (count($latest_articles) > 0) :
        ?>
            <li data-link="tab2">
                <span><?php echo $hesklang['latart']; ?></span>
            </li>
        <?php endif; ?>
        <li data-link="tab3">
            <span>Sommaire des articles</span>
        </li>
    </ul>
</div>

Then, in the div just a little further down, you'll find "
tabbed__tabs", it's in this div that we'll find the contents of each tab, so we'll create a new div after the closing tab2, and add this code:

Code: Select all

<div class="tabbed__tabs_tab " data-tab="tab3">
    <div class="container_tree">
        <?php
        function hasChildWithArticles($categories, $parent)
        {
            foreach ($categories as $category) {
                if ($category['parent'] == $parent) {
                    if (count($category['articles']) > 0 || hasChildWithArticles($categories, $category['id'])) {
                        return true;
                    }
                }
            }
            return false;
        }

        function displayTreeMenu($categories, $parent = 0, $level = 0)
        {
            foreach ($categories as $category) {
                if ($category['parent'] == $parent) {
                    // Si le type de la catégorie est 1, on ne l'affiche pas
                    if ($category['type'] == 1) {
                        continue;
                    }
                    // Ajoutez une condition pour vérifier si la catégorie a des articles ou des sous-catégories avec des articles
                    if (count($category['articles']) > 0 || hasChildWithArticles($categories, $category['id'])) {
                        // Sinon, on affiche la catégorie
                        echo '<div class="category_tree" style="margin-left:' . (20 * $level) . 'px">' . str_repeat('▻ ', 1) . $category['name'] . '</div>';

                        foreach ($category['articles'] as $article) {
                            // Si le type de l'article est 1, on ne l'affiche pas
                            if ($article['type'] == 1) {
                                continue;
                            }
                            // Sinon, on affiche l'article
                            echo '<div class="article_tree" style="margin-left:' . (20 * ($level + 1)) . 'px"><a href="https://support.richardetlevesque.com/knowledgebase.php?article=' . $article['id'] . '">' . str_repeat('⨀ ', 1) . $article['subject'] . '</a></div>';
                        }
                    }

                    displayTreeMenu($categories, $category['id'], $level + 1);
                }
            }
        }
        displayTreeMenu($categories);
        ?>
    </div>
</div>

/!\ Remember to change the url to your own
Finally, we need to add the css to , and add this code (feel free to change the style):

Code: Select all

.container_tree {
  padding: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 41, 89, 0.3);
  width: 100%;
  background-color: white;
}

.category_tree {
  color: #333;
  font-weight: bold;
}

.article_tree {
  color: #666;
}

.article_tree a {
  color: #007bff;
  text-decoration: none;
}

.article_tree a:hover {
  color: #0056b3;
  text-decoration: underline;
}

Details :
- private items will not be displayed
- empty categories will not be displayed

Result:


If you need any help, don't hesitate to ask!

[Klemen]

Interesting idea! Thanks for sharing.