Как обычно "внезапно!" возникла задача для удобного отображения большого количества характеристик в табах полного материала. Когда перед покупателем возникает простынь из 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. Просто еще один рецепт для решения конкретной задачи: может кому-то пригодится.
Edited by Станислав, 13 April 2015 - 09:33.
Answered
