How to make table layout of the catalog

9.0/10 rating (3 votes)

In this tutorial we'll teach you how to make a table layout for your catalogue. Just like on our demo site - http://demo.jbzoo.com/table

This table includes nice and smart bonus - tablesorter widget which allows you to sort strings without refreshing within one page. It’s worth mentioning that the whole appearance, content, number and names of the columns are easily changeable specially for you website and absolutely no hacking.

1. Create a new item type

You should use a slug that consists only of english characters without whitespaces. In our example it is table-item.

Making new item typeItem type slug

Create new elements for this item type

Editing elementsAdding new elements

2. Create a new template layout for this item type

Let's assume that each table row should have its own detailed page which means that we should have two templates: teaser and full.

Teaser is a template for an item preview that will look like one table row.

Full is a template for a detailed item page.

Open this folder: media/zoo/applications/jbuniversal/templates/catalog/renderer/item - (let's call this folder <ITEM-TPL> for convenience).

Create a new folder named table-item:
<ITEM-TPL>/table-item/

Copy these files in it:
<ITEM-TPL>/full.php ==> <ITEM-TPL>/table-item/full.php
<ITEM-TPL>/teaser.php ==> <ITEM-TPL>/table-item/teaser.php
<ITEM-TPL>/metadata.xml ==> <ITEM-TPL>/table-item/metadata.xml
<ITEM-TPL>/positions.xml ==> <ITEM-TPL>/table-item/positions.xml

Edit following files in this way:

teaser.php

<?php
defined('_JEXEC') or die('Restricted access');
?>
<tr class="table-row item_<?php echo $item->id;?>">
    <td><?php echo $item->id; ?></td>
    <td><?php echo $this->renderPosition('cell1'); ?></td>
    <td><?php echo $this->renderPosition('cell2'); ?></td>
    <td><?php echo $this->renderPosition('cell3'); ?></td>
    <td><?php echo $this->renderPosition('cell4'); ?></td>
    <td><?php echo $this->renderPosition('cell5'); ?></td>
</tr>

positions.xml

<?xml version="1.0" encoding="utf-8"?>
<renderer>
    <positions layout="full">
        <position name="title">Title</position>
        <position name="image">Image</position>
        <position name="properties">Properties</position>
        <position name="text">Text</position>
        <position name="meta">Meta</position>
    </positions>
    
   <positions layout="teaser">
        <position name="cell1">Table cell #1</position>
        <position name="cell2">Table cell #2</position>
        <position name="cell3">Table cell #3</position>
        <position name="cell4">Table cell #4</position>
        <position name="cell5">Table cell #5</position>
   </positions>
</renderer>

3. Configure layout of teaser and full templates

In this example we'll only configure teaser. You can configure full like you wish.

Template layoutsConfiguring template layout

4. Create a new application

Making new applicationMake a convenient slug using english letters without whitespaces. In our example we'll call it table-app. Don't forget to select Catalog template. Also, disable item wrapping.

5. Configure an application template

Open this folder:
media/zoo/applications/jbuniversal/templates/catalog/renderer/item_columns

Create a new file called "table-app.php" with the following contents:

<?php
defined('_JEXEC') or die('Restricted access');
$this->app->jbassets->tablesorter(); // adding sorting library
 
if ($vars['count']) : ?>
    <table class="jsTableSorter tablesorter zebra">
        <caption>Table</caption>
        <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Image</th>
            <th>Field 1</th>
            <th>Field 2</th>
            <th>Field 3</th>
        </tr>
        </thead>
        <tbody>
            <?php
            foreach ($vars['objects'] as $object) :
                echo $object;
            endforeach;
            ?>
        </tbody> 
    </table> 
    <!-- sorting initialization -->
    <script type="text/javascript">
        jQuery(function ($) {
            $('.jsTableSorter').tablesorter({});
        });
    </script>
<?php endif;

6. Fill your application with content

Making new itemItemsIn our example we'll only make few items. They all will be on the frontpage. You can assign them to the specific category if you wish. If you have a lot of content, you can use import.

7. Create a menu item for our table

Making menu itemIn our example we'll use "ZOO Frontpage" menu type. You can use "ZOO Category" if you assigned your items to a category.

8. Result

The result on a website

Notes

  • Our sorting uses "tablesorter" plugin. It has a lot of abilities and is very simple. You can read its documentation here - http://tablesorter.com/docs/
  • Sorting works within one page
  • Table layout will work for filter results
  • In the application or category configuration you can add/remove additional text or media information above the table.
Table, Template

Still gotta questions, who can help me?

Visit our special JBZoo tech support forum which is specifically meant for JBZoo so the priority of the response and its promptness are much better there than in any other place. With inactive account with a “Plus” sign in a tariff plan you can ask for support in one of these sections or use any of our contacts.