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


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

"Спойлер" для большого количества строк характеристик

220v uikit табы full настройка шаблона спойлер

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

#1 Станислав

Станислав

Отправлено 12 April 2015 - 19:14

*
Популярное сообщение!

Как обычно "внезапно!" возникла задача для удобного отображения большого количества характеристик в табах полного материала. Когда перед покупателем возникает простынь из 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; ?>

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

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

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

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


 


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

  • 8

«Ну и зачем все это, лучше бы водки выпили». Из писем Белинского Гоголю.

 


#2 SmetDenis

SmetDenis

Отправлено 14 April 2015 - 09:17

Спасибо, очень полезно.
А то многие просят такие, казалось бы, такие простые вещи :)
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



— Есть два типа людей: Кто еще не делает бекапы и кто уже делает бекапы.






Темы с аналогичным тегами 220v, uikit, табы, full настройка шаблона, спойлер

Click to return to top of page in style!