pacman, rainbows, and roller s
Home » Scripts And Tips » General scripts » Blog categories with counts
 This thread is closed
This script creates a list of specified blog categories (tags) with counts of the posts in the category
it is created using a combination of twig xtscript and javascript it is styled using Bootstrap (plus some custom javascript)

The Twig
Rename your xtblog.twig to blog.twig then create a new xtblog.twig file and copy this code to it
some users may already have a 'template selector' xtblog.twig so you can add this as a {% elseif %} before the standard blog twig is included
{% if data.translations.t_no_entries_found == 'tcount' %}

  {%include ('blog.twig')%}

Copy code
The XtScript
There is no direct output from this script it can go anywhere in your pages code
The variable $data holds a list of the tags you wish to use as categories separated by pipe symbols ( | )
The script creates the list of tag links and the javascript calls to insert the post counts
It also inserts the active bootstrap class in the current item
var $data = This|is|A|List|Of|Tags|Separated|By|Pipe|Symbols
get __xtblog_tag
var $path=<xt:url type="path" />
var $start=0
var $count=0
var $end=call strpos $haystack=$data|;$needle=|;$offset=$start
if not $end
goto @end
var $item=call substr $val=$data;$start=$start;$length=($end-$start)
if $__xtblog_tag==$item
var $act=active
delete $act
var $categories={{$categories
<a class="list-group-item $act" href="$path?__xtblog_tag=$item">$item <span class="pull-right"><button class="btn btn-default btn-xs" id="cat$count">0</button></span>}}
var $script={{$script
tagCount('$item','cat$count');}} ;
var $start=($end+1)
var $count=($count+1)
goto @loop

Copy code
Put this where you wish the list to appear it uses bootstrap nav collapse to hide the panel on smaller screens and some custom javascript to switch the text on the open /close button
The actual list is inserted using a xtscript variable {_$$categories|}
<div class=" panel panel-default well well-sm">
        <div class="pull-right">
          <button id="but1" type="button" class=" btn btn-default btn-xs visible-xs" data-text-original="Open" data-text-swap="Close" data-target="#cats" data-toggle="collapse">Open</button>
    <div class=" panel panel-default collapse navbar-collapse" style="padding:0" id="cats">  
      <div class="panel-body">
        <div class="list-group  clearfix " style="padding-right:0;margin-bottom:0" id="categories">{_$$categories|}</div>

Copy code
The Javascript
This can go anywhere below the html
The first function switches the text on the open/close button (only shows on small screens)
The second function uses XHR javascript to retrieve the post counts for each tag
I used this method so that the blog calls will not cause conflicts as they are actually on a seperate page
<script async="async">
  var button = document.getElementById('but1');
button.addEventListener('click', function() {
  if (button.getAttribute('data-text-swap') == button.innerHTML) {
    button.innerHTML = button.getAttribute('data-text-original');
  } else {
    button.setAttribute('data-text-original', button.innerHTML);
    button.innerHTML = button.getAttribute('data-text-swap');
}, false); 
function tagCount(tag,id){
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
      var content=this.responseText.split('<!--data-->');
      document.getElementById(id).innerHTML = content[1];
  }'GET','/catdata?__xtblog_tag='+tag, true);

Copy code
The XmlHttpRequest Data File
This is used to generate the post counts for each tag
add this to a blank text file named catdata
(Only edit this file using the text editor)
<html style="display:none">
  <meta name="robots" content="noindex" />
  <xt:blog entries_per_page="1000" t_no_entries_found="tcount" />

Copy code
Home » Scripts And Tips » General scripts » Blog categories with counts
© graham 2018 : Please give credit for any of my code used