Перейти к содержимому


Фотография
- - - - -

How to make table layout of the catalogue

documentation template table recipe

  • Закрытая тема Тема закрыта
В этой теме нет ответов

#1 Kess

Kess

Отправлено 14 September 2013 - 14:34

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".
 
ssm032513bf_1280x0_200x0.png
 
ssm133b4e6b_200x0.png
 
 
Create new elements for this item type
 
ssm5f71250d_200x0.png
 
ssmffdbe4cc_200x0.png
 
 
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.
 
ssm9ecfa95b_1280x0_200x0.png
 
ssmcb7496ed_1280x0_200x0.png
 
 
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.
 
ssmcb6deb5a_200x0.png
 
 
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.
 
ssm66e38530_200x0.png
 
ssmbe8519c4_1280x0_200x0.png
 
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.
 
ssm35d25ff0_200x0.png
 
 
8. The result
 
ssmdb1ac022_200x0.jpg
 
 
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.

Сообщение отредактировал Kess: 03 February 2014 - 04:19

  • 1





Темы с аналогичным тегами documentation, template, table, recipe

Click to return to top of page in style!