K2 Templating: Setting up tabs using subcategories

Let’s say that you wanted to use the Bootstrap tabs. You can do so is by having a subcategory based structure like:

• – Blog
• – – Seattle
• – – Web
• – – Design

You can use the subcategory loop twice in this case to provide a navigation pill and to provide the content:

<ul class="nav nav-tabs">
  <loop subcategory>
    <li><a href="#<subcategory alias>"><subcategory details></a></li>
  <end loop>
</ul>

<div class="tab-content">
  <loop subcategory>
    <div class="tab-pane" id="<subcategory alias>">

      <loop leading items>
        <if subcategory ID == item category ID>
          <display item>
        <end if>
      <end loop>

    </div>
  <end loop>
</div> 

The above theoretical example uses the Bootstrap navigation pills so if you do implement, make sure that you do have Bootstrap included in your template files.

Below is an example that you might use on a real project:

<?php if($this->params->get('subCategories') && isset($this->subCategories) && count($this->subCategories)): ?>
<div class="row">
  <div class="span8 offset2 subcategory-list">
    <ul class="nav nav-tabs"  data-tabs="tabs" id="tabbers">
    <?php foreach($this->subCategories as $key=>$subCategory): ?>
<li <?php if(!$key) {echo 'class="active"';}?>><a href="#<?php echo $subCategory->alias;?>" data-toggle="tab"><?php echo $subCategory->name; ?></a></li>
    <?php endforeach; ?>
    </ul>

    <div class="tab-content">
    <?php foreach($this->subCategories as $key=>$subCategory): ?>
      <div class="tab-pane <?php if(!$key) {echo 'active';}?>" id="<?php echo $subCategory->alias?>">
      <?php if(isset($this->leading) && count($this->leading)): ?>
        <?php foreach($this->leading as $key=>$item): ?>
          <?php if($item->catid == $subCategory->id): ?>
            <?php
              // Load category_item.php by default
              $this->item=$item;
              echo $this->loadTemplate('item');
            ?>
          <?php endif;?>
        <?php endforeach; ?>
        <div class="clearfix"></div>
      <?php endif; ?>
      </div>
    <?php endforeach; ?>
    </div>

    <div class="clearfix"></div>
  </div>
</div>
<?php endif; ?>