Jump to content


Photo
* * * * * 2 votes

Tooltip-подсказки для элементов в шаблоне материалов

рецепт tooltips стили материалов

10 replies to this topic

#1 SmetDenis

SmetDenis
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 29 May 2014 - 08:45

Недавно возник вопрос - как сделать tooltip подсказку у свойств материала.
К сожалению. коробочного решения не оказалось.
 
Реализация оказалось на удивление простой.
Итак, что мы хотим в итоге? 
com.png
 
Кстати, чтобы лучше понимать суть происходящего, рекомендую(!) осилить литературные труды.
 
Подсказка добавляется через стили позиций.
 
Поэтому первым делом изменяем стиль
media\zoo\applications\jbuniversal\templates\catalog\renderer\element\jbblock.php
 
и заменяем код на следующее
<?php
/**
 * JBZoo App is universal Joomla CCK, application for YooTheme Zoo component
 *
 * @package     jbzoo
 * @version     2.x Pro
 * @author      JBZoo App http://jbzoo.com
 * @copyright   Copyright (C) JBZoo.com,  All rights reserved.
 * @license     http://jbzoo.com/license-pro.php JBZoo Licence
 * @coder       Denis Smetannikov <denis@jbzoo.com>
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

// default params
$params = array_merge(array(
    'first'      => 0,
    'last'       => 0,
    'showlabel'  => 0,
    'altlabel'   => '',
    'element'    => '',
    'style'      => 'jbblock',
    'tag'        => 'div',
    'labelTag'   => 'strong',
    'wrapperTag' => '',
    'tooltip'    => 0,
    'clear'      => 0,
    'class'      => '',
    '_layout'    => '',
    '_position'  => '',
    '_index'     => '',
), $params);

// create label
$label = '';
if ($params['showlabel']) {

    // add tooltip
    $tooltip = '';
    if ($params['tooltip']) {
        $tooltipText = htmlentities(strip_tags(JString::trim($element->config->get('description'))), ENT_QUOTES, "UTF-8");
        $tooltip     = $tooltipText ? ' <span class="jbtooltip" title="' . $tooltipText . '"></span>' : '';
    }

    // check label
    $labelText = ($params['altlabel']) ? $params['altlabel'] : $element->getConfig()->get('name');

    $label = '<' . $params['labelTag'] . ' class="element-label"> '
        . $labelText
        . $tooltip
        . '</' . $params['labelTag'] . '>';
}

// collect html classes
$classes = array_filter(array(
    'index-' . (int)$params['_index'],
    $params['class'],
    'element-' . $element->identifier,
    'element-' . $element->getElementType(),
    $params['first'] ? 'first' : '',
    $params['last'] ? 'last' : '',
));

// add clear after html
$clear = $params['clear'] ? '<div class="clear clr clearfix"></div>' : '';

// render HTML for  current element
$render = $element->render($params);

// wrapping the element HTML
if ($params['wrapperTag']) {
    $render = '<' . $params['wrapperTag'] . '>' . $render . '</' . $params['wrapperTag'] . '>';
}

// render result
echo '<' . $params['tag'] . ' class="' . implode(' ', $classes) . '">', $label,
    ' ' . $render, '</' . $params['tag'] . '>', "\n" . $clear;

Для любознательных, изменилось следующее
yxt_200x0.png
 
Далее, добавляем в CSS
Например сюда media\zoo\applications\jbuniversal\assets\css\jbzoo.css
А лучше в свой шаблон Joomla, чтобы  не сломать обновлением.
.jbzoo .jbtooltip {
    background: url(/media/zoo/applications/jbuniversal/assets/img/misc/help.png) no-repeat 50% 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 12px;
}
 
Сюда кладем картинку (она есть в атаче)
media\zoo\applications\jbuniversal\assets\img\misc\help.png
 
После этого в нужном шаблоне full добавим инициализацию jQueryUI Tooltip
    <?php $this->app->jbassets->jqueryui(); ?> 
    <script type="text/javascript">
        jQuery(function ($) {
            $('.jbzoo .jbtooltip').tooltip();
        });
    </script>
 
Теперь позиции которые используют стиль jbblock могут показывать подсказки из настроек элемента
например, для таблицы будет так
<table class="jbtable">
    <?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable', 'tooltip' => 1)); ?>
</table>
 
Внимание!
 - Внешний вид подсказки зависит от версии jQueryUI и легко правится через "магию" CSS.
 - Все тестировал на JBZoo 2.1.3, Версия Joomla и Zoo не имеют значения.
 
 
 
PSS Думаю добавить эту фичу в следующий релиз.

Attached Thumbnails

  • help.png

Attached Files


  • 4
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



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


#2 Андрей_Кон

Андрей_Кон
  • JBZoo User (rus)
  • User rate: 0
  • posts: 15
  • topics: 2

Posted 29 May 2014 - 18:26

Здравствуйте. Спасибо огромное за реализацию и потраченное время. Уточните пожалуйста для "чайника" :)

 

1. Заменил код в jbblock.php, установил 'tooltip' => 1,

2. В параметры стиля media\zoo\applications\jbuniversal\assets\css\jbzoo.css добавил параметры   .jbzoo .jbtooltip

3. Добавил картинку 

4. В media/zoo/applications/jbuniversal/templates/catalog/renderer/item/product/full.php вставил строки инициализации  jQueryUI Tooltip

параллельно добавил инициализацию в teaser.php и compare.php

 

Что нужно еще ? Спасибо. 

 

p.s. Отображение стало только в Type Full, вместо русских букв в Description выводит непонятную кодировку. Где указать, чтобы выводилось в UTF-8 


Edited by Андрей_Кон, 29 May 2014 - 19:40.

  • 0

#3 SmetDenis

SmetDenis
  • Topic Starter
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 29 May 2014 - 20:32

Как выводится позиция в teaser.php  ?
Что вы изменили в compare ?
Все шаблоны нужно  сохранить в utf-8, notepad++ умеет
 
Возможно у вас не правильно настроен сервер, т.е на кодировку win-1251
попробуйте строку


$tooltipText = htmlentities(strip_tags(trim($element->config->get('description'))));

 
заменить на 

 $tooltipText = htmlentities(strip_tags(JString::trim($element->config->get('description'))));

  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



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


#4 Андрей_Кон

Андрей_Кон
  • JBZoo User (rus)
  • User rate: 0
  • posts: 15
  • topics: 2

Posted 29 May 2014 - 21:49

Хочу, чтобы в teaser и compare тоже можно было раскрыть описание свойства. Я просто в teaser.php и comare.php добавил. Ничего не заработало.  

<?php $this->app->jbassets->jqueryui(); ?> 
    <script type="text/javascript">
        jQuery(function ($) {
            $('.jbzoo .jbtooltip').tooltip();
        });
    </script>

На сервере кодировка utf-8, пользуюсь NotePad++ 

 

Попробовал сделать в jbblock.php, 'tooltip' => 0, и потом отдельно включать его для элемента, как вы рекомендовали: 

<table class="jbtable">
    <?php echo $this->renderPosition('tab-properties', array('style' => 'jbtable', 'tooltip' => 1)); ?>
</table>

Для Type Full работает, при этом 

$tooltipText = htmlentities(strip_tags(JString::trim($element->config->get('description'))));

Кодировку Description не переключает. 

 

Добавил в Teaser.php включение 'tooltip' => 1

<div class="product-props">

    <p><i><?php echo $this->renderPosition('subtitle', array('style' => 'block', 'tooltip' => 1)); ?></i></p>

    <?php if ($this->checkPosition('properties')) : ?>
        <ul>
            <?php echo $this->renderPosition('properties', array('style' => 'list', 'tooltip' => 1)); ?>
        </ul>
    <?php endif; ?>
    <?php if ($this->checkPosition('favourite')) : ?>
        <?php echo $this->renderPosition('favourite'); ?>
    <?php endif; ?>
</div> 

Не работает. 

 

В Compare.php вообще никакого кода нет. Хочется, чтобы описание свойств было доступно и в карточке каталога (teaser) и в сравнении (Compare) 


Edited by Андрей_Кон, 29 May 2014 - 22:27.

  • 0

#5 SmetDenis

SmetDenis
  • Topic Starter
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 30 May 2014 - 09:50

В Compare.php вообще никакого кода нет.

Шаблон Compare работает совершенно иным способом.
Посмотрю его, подумаю.

Попробовал у себя на teaser, вроде работает.
Как я писал выше, у вас должен быть указан style => jbblock, либо jbtable.
Т.к правки мы вносили именно в него jbblock, а jbtable -либо производный от него с нужными тегами.

у вас указан style = list, а в нем нет вывода
файл стиля list - стандартный и находится тут
components\com_zoo\renderer\element\list.php

По сути можно сделать тот же list с помощью jbtable

<?php
echo $this->renderPosition('POSITION_NAME', array(
    'style'      => 'jbtable', // файл стиля, который будет обрабатывать, ниже идут параметры именно для этого стиля
    'tooltip'    => 1,
    'labelTag'   => 'strong', // тег для заголовка
    'wrapperTag' => 'li', // обрамляющий тег
    'showlabel'  => '1', // показывать заголовок
)); 

PS все же рекомендую вам проникнутся этой статьей - http://jbzoo.ru/docs/position-styles
Это позволит вам круче "крутить" версткой страницы ;)
  • 1
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



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


#6 Андрей_Кон

Андрей_Кон
  • JBZoo User (rus)
  • User rate: 0
  • posts: 15
  • topics: 2

Posted 30 May 2014 - 13:03

Большое спасибо, получилось. 

 

Остался в вопрос с кодировкой. Попробуйте на демо-шаблоне вывести Description на русском языке. Все облазил, не пойму где ее поменять на utf-8

 

Для Compare нашел рендер здесь /media/zoo/applications/jbuniversal/templates/catalog/renderer/compare/_default.php

 

Меня интересует вертикальная таблица сравнения, чтобы посетитель мог раскрыть полное описание параметра и понять о чем идет речь. Идет рендер таблицы, но не указан style элементов. Куда  вставить стиль bjjblock ?  Спасибо.


 

 // body
    echo '<tbody>';
    foreach ($elementList as $elementId) {

        if ($elementId != 'itemname') {

            $label = $render->renderElementLabel($elementId, $view->itemType, $view->appId);

            echo '<tr class="compare-row"><th>' . $label . '</th>';
            foreach ($renderedItems as $itemId => $itemElements) {
                echo '<td class="compare-cell">' . $itemElements[$elementId] . '</td>' . "\n";
            }
            echo '</tr>';
        }

    }

  • 0

#7 SmetDenis

SmetDenis
  • Topic Starter
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 30 May 2014 - 14:14

Попробовал русские символы,
2xt_200x0.png

Все работает.

Добавил поддержку для шаблона compare. Приложил доп файл для шаблона сравнения в первое сообщение.
p6v_200x0.png

Проверил на следующий версиях
rzb.png
  • 1
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



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


#8 Андрей_Кон

Андрей_Кон
  • JBZoo User (rus)
  • User rate: 0
  • posts: 15
  • topics: 2

Posted 30 May 2014 - 14:39

Спасибо большое, в Comare все заработало, при этом в compare кодировка Description utf-8, все ОК,  а в шаблоне full так и осталась windows.  :( Пойду искать, может посоветуете, где копать ?


  • 0

#9 SmetDenis

SmetDenis
  • Topic Starter
  • Administrators
  • User rate: 139.4
  • posts: 16232
  • topics: 200

Posted 30 May 2014 - 14:49

Если дадите временный ftp доступ к сайту, то возможно найду причину.
Иначе ничего сказать не могу.
У вас linux хостинг?
  • 0
JBZoo v4.0 и новый чудный мир Open Source GPL
Отключайте проверку лицензий как можно скорее!



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


#10 Андрей_Кон

Андрей_Кон
  • JBZoo User (rus)
  • User rate: 0
  • posts: 15
  • topics: 2

Posted 30 May 2014 - 15:03

Думаю проблема в настройках сервера хостинга, перенесу на другой домен и попробую разобраться сам. Обязательно отпишу. Вам огромное спасибо, теперь на 100% уверен, что приобрел правильный продукт с правильной поддержкой. С уважением, Андрей К.


  • 0





Also tagged with one or more of these keywords: рецепт, tooltips, стили материалов

Click to return to top of page in style!