How to add a new tab and summury of your knowledgebase
Posted: Tue Mar 05, 2024 5:57 pm
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):
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:
/!\ 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):
Details :
- private items will not be displayed
- empty categories will not be displayed
Result:
If you need any help, don't hesitate to ask!
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>
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>
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;
}
- private items will not be displayed
- empty categories will not be displayed
Result:
If you need any help, don't hesitate to ask!