В теме одно сообщение

[Станислав]

Как обычно "внезапно!" возникла задача для удобного отображения большого количества характеристик в табах полного материала. Когда перед покупателем возникает простынь из 20-30 характеристик, то он иногда попросту теряется.

Было решено разделить все характеристики на 2 группы - основные характеристики (ключевые для выбора товара) и дополнительные, которые становятся интересны, когда товара отобран по основным. Теоретически можно было просто разнести их на 2 таба: основные характеристики и дополнительные характеристики, но не хотелось плодить лишние сущности и заставлять покупателя бегать по табам. Поэтому решено было вынести дополнительные характеристики под спойлер.

Табы в моем примере сделаны на основе табов JBZoo. С табами на JQuery давно не работаю, потому не гарантирую, что будет работать и с ними. Модификация сделана на базе Toggle UIKit. То есть работать будет либо с шаблонами сайта на базе UIKit от YooTheme, либо с любым шаблоном, но на JBZoo 2.2.0 с включенным UIKit. Итак, пошагово.

Шаг 1
В positions.xml добавляем позицию для дополнительных характеристик tab-extra-properties (основные оставим в имеющейся позиции tab-properties)

    <positions layout="full">
        <position name="tab-properties">Tab: Properties</position>
        <position name="tab-extra-properties">Tab: Extra Properties</position>
        <position name="tab-gallery">Tab: Gallery</position>
        <position name="tab-reviews">Tab: Reviews</position>
    </positions>

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

Шаг 3
В шаблоне full.php у меня фрагмент вывода таба характеристик выглядел следующим образом:

<?php if ($this->checkPosition('tab-properties')) : ?>
    <li id="tab-properties">
        <table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">
        <?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable', 'tooltip' => 1)); ?>
        </table>
    </li>
<?php endif; ?>

Модифицированный вариант стал выглядеть вот так:

<?php if ($this->checkPosition('tab-properties')) : ?>
    <li id="tab-properties">
        <table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">
            <?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable', 'tooltip' => 1)); ?>
        </table>
        <?php if ($this->checkPosition('tab-extra-properties')) : ?>
        <div class="extra-properties-link"><a data-uk-toggle="{target:'#extra-properties', animation:'uk-animation-fade, uk-animation-fade'}"><?php echo JText::_('JBZOO_CONFIG_OTHERS');?>...</a></div>
            <div id="extra-properties" class="uk-hidden">
                <table class="uk-table uk-table-hover uk-table-striped uk-table-condensed">
                    <?php echo $this->renderPosition('tab-extra-properties', array('style' => 'jbtable', 'tooltip' => 1)); ?>
                </table>
            </div>
        <?php endif; ?>
    </li>
<?php endif; ?>
 

Результат получается вот такой:

После клика на ссылку "Дополнительно..." с эффектом анимации (в моем случае fade) появляются дополнительные характеристики (список эффектов можно посмотреть все на том же сайте UIKit)

 

После повторного клика на ссылку "Дополнительно..." все возращается в исходный сокращенный вид.

Ничего особо нового, так как все делается за считанные минуты за счет использования возможностей UIKit. Просто еще один рецепт для решения конкретной задачи: может кому-то пригодится.


 

Сообщение отредактировал Станислав: 13 April 2015 - 09:33

[SmetDenis]

Спасибо, очень полезно.
А то многие просят такие, казалось бы, такие простые вещи