No replies to this topic

[Kess]

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
 
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".
 

 

 
 
Create new elements for this item type
 

 

 
 
2. Create a new template layout for this item type
 
Let's assume that each table row should have its own detailed page. This 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 a template layout
 
In this example we'll only configure "teaser". You can configure "full" like you wish.
 

 

 
 
4. Create a new application
 
Make 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
 
In 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
 
In our example we'll use "ZOO Frontpage" menu type. You can use "ZOO Category" if you assigned your items to a category.
 

 
 
8. The result
 

 
 
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.

Edited by Kess, 03 February 2014 - 04:19.