1. Доступ к загрузкам имеют пользователи со статусом КЛИЕНТЫ (заказчики сайта)
    Для обновления одного шаблона необходимо оплатить услугу Техническая поддержка (500 руб. - Яндекс-деньги или банковский перевод) модуль справа-внизу, сообщить {admin_forum} контактный e-mail
  2. У наших подписчиков ВКонтакте появилась возможность скачать первую версию любого шаблона для ознакомления абсолютно бесплатно. Вступаем и заказываем нужный шаблон на странице группы - https://vk.com/yootheme
    Скрыть объявление

Как настроить табличный вывод каталога в JBZoo

Тема в разделе "FAQ по JBZoo", создана пользователем admin_forum, 4 ноя 2013.

  1. admin_forum
    Оффлайн

    admin_forum Администратор Команда форума

    1. Создайте новый тип материала
    При создании, укажите псевдоним типа материала английскими буквами без пробелов.
    В нашем случае это будет "table-item"

    [​IMG]

    Наполните новый тип элементами. Например так
    [​IMG]

    [​IMG]

    2. Создание отдельных шаблонов для материала (подробнее о материалах)
    Допустим мы хотим чтобы каждая строка таблицы имела свою детальную страницу.
    Поэтому нам нужны два шаблона teaser и full.
    teaser - это шаблон анонса, будет отвечать за одну строку из таблицы.
    full - это шаблон детальной страницы материала.

    Откройте папку
    media/zoo/applications/jbuniversal/templates/catalog/renderer/item - (будем это считать <ITEM-TPL>)

    Создайте в ней новую папку с именем "table-item" и перейдите в нее
    <ITEM-TPL>/table-item/

    Скопируйте в нее файлы
    <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

    Отредактируйте файлы следующим образом
    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. Настройте шаблон вывода
    Рассмотрим только teaser. Full на ваше усмотрение

    [​IMG]

    [​IMG]

    4. Создать каталог
    Теперь нам понадобится новый каталог.
    При создании укажите удобный псевдоним латиницей (например table-app). Не забудьте выбрать шаблона "catalog"

    [​IMG]

    Отключим обрамление каждого материала

    [​IMG]

    5. Настройка шаблонов приложения (подробнее о шаблонах приложения)
    откройте директорию шаблона колонки
    media/zoo/applications/jbuniversal/templates/catalog/renderer/item_columns

    И создайте там файл "table-app.php" следующего содержания

    Код:
    <?php
    defined('_JEXEC') or die('Restricted access');
    $this->app->jbassets->tablesorter(); // подключение библиотеки для сортировки
    
    if ($vars['count']) : ?>
        <table class="jsTableSorter tablesorter zebra">
            <caption>Таблица</caption>
            <thead>
            <tr>
                <th>ID</th>
                <th>Название</th>
                <th>Картинка</th>
                <th>Поле 1</th>
                <th>Поле 2</th>
                <th>Поле 3</th>
            </tr>
            </thead>
            <tbody>
                <?php
                foreach ($vars['objects'] as $object) :
                    echo $object;
                endforeach;
                ?>
            </tbody>
    
    
        </table>
    
        <!-- инициализация сортировки -->
        <script type="text/javascript">
            jQuery(function ($) {
                $('.jsTableSorter').tablesorter({});
            });
        </script>
    <?php endif;
    
    6. Наполнение контентом
    В своем примере я создам только несколько материалов
    Они все будут выводить на главной. В принципе можно привязать их и к определенной категории - на ваше усмотрение

    [​IMG]

    Если у вас много контента можете попробовать использовать импорт

    7. Выводим каталог через пункт меню
    Не обязательно указывать главную страницу, можно указать определенную категорию. Внешний вид от этого не пострадает

    [​IMG]

    8. Результат

    [​IMG]

    ЗАМЕЧАНИЯ

    Для сортировки используется плагин tablesorter. У него много возможностей, он предельно простой. Читайте документацию - http://tablesorter.ru/docs/
    Сортировка работает в пределах одной страницы.
    Таблица будет работать для результатов фильтра (автоматически)
    В настройках приложения (или категории) можно над таблицей добавить/убрать дополнительную информацию в виде текста или картинки

    В итоге
    Не нужно быть программистом чтобы это сделать. Прикладывать больших знаний тоже не нужно.
    Статья получилась большой, потому что содержит много воды для тех кто "в первый раз".
    По факту, чтобы сделать вывод в виде таблицы - нужно создать несколько файлов с нужными именами
     

Поделиться этой страницей