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

- - - - -

How to make table layout of the catalogue

documentation template table recipe

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

#1 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".
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:
(let's call this folder <ITEM-TPL> for convenience).
Create a new folder named "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:

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>


<?xml version="1.0" encoding="utf-8"?>
    <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 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>

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:
Create a new file called "table-app.php" with the following contents:

defined('_JEXEC') or die('Restricted access');
$this->app->jbassets->tablesorter(); // adding sorting library
if ($vars['count']) : ?>
    <table class="jsTableSorter tablesorter zebra">
            <th>Field 1</th>
            <th>Field 2</th>
            <th>Field 3</th>
            foreach ($vars['objects'] as $object) :
                echo $object;
    <!-- sorting initialization -->
    <script type="text/javascript">
        jQuery(function ($) {
<?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

  • 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!