Недавно столкнулся с проблемой - нужно было вывести боковую панель в Joomla 1.5, как на многих корпоративных сайтах на примере - "Обратный звонок", "Оставить отзыв" или "Поделиться". Перепробовал несколько вариантов доступных модулей, к сожалению ни один из них не подошел мне, поэтому перебирая различные варианты, модифицировал и доработал готовое решение, правда в "голом" виде, т.е. вам придется вручную вставлять код в шаблон.
В итоге получится панель, как на нижеприведенных примерах (лично вставлял этот код в обоих случаях):
Пример
http://elizium-mebel.ruВот инструкция:
1) Добавляем в файл templateDetails.xml новую позицию "sideblock" (в нужное место, например после списка всех позиций):
<position>sideblock</position>
2) Добавляем в head шаблона скрипт анимации панели и подключаем jquery:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
/*скрипт левой панели*/
$("div.left_panel p.open").toggle(function(){
$("div.left_panel").animate({left:'230px'},500);}, function() {
$("div.left_panel").animate({left:'-71px'},500);
});
});
</script>
</head>
3) Добавляем в body шаблона контейнер боковой панели:
<body>
<div class="left_panel">
<p class="open"></p>
<jdoc:include type="modules" name="sideblock" style="xhtml" />
</div>
</body>
4) В файл стилей CSS добавляем стили и подстраиваем под наш сайт:
.left_panel {
background: #fff; /*фон панели*/
height: 162px; /*высота панельного блока */
padding: 5px 5px 5px 4px; /*отступ текста от края панели*/
font-size: 14px; /*размер шрифта*/
text-align: left; ,*выравнивание текста*/
margin-left: -230px; /*отступ слева, когда панель выдвинута - должен быть равен первому числу в скрипте*/
width: 300px; /*ширина панельного блока*/
margin-top: 220px; /*отступ панели от верхнего края окна браузера*/
position: fixed; /*фиксируем панель относительно окна браузера*/
left: -71px; /*размер отступа задвинутой панели - должен быть равен третьему числу в скрипте*/
border: 1px solid #000000; /*рамка боковой панели*/
z-index: 5000; /* индекс, чтобы панель выдвигалась поверх всех остальных элементов сайта*/
}
.left_panel p.open {
background: url(../images/knopka.png) right no-repeat; /*кнопка панели, выровненная по правому краю - размер кнопки 40х220*/
width: 40px; /*ширина блока*/
height: 220px; /*высота блока*/
position: absolute; /*обязательное свойство*/
left: 300px; /*обязательное свойство*/
top: -8px; /* регулируйте этот параметр для выравнивания картинки относительно блока панели*/
cursor:pointer;
}
Вот в принципе и всё. Теперь например берем модуль callback и вставляем его в позицию sideblock - так вы получите функцию обратного звонка из боковой панели (пример номер 2). Или можете просто вставить важный текст, который пользователь вряд ли пропустит, например о скидках и т.п. (пример номер 1).
P.S. Если вы используете карты Яндекс или Google, то у вас может сбиться функция интерактивности. В этом случае просто обновите mootools (а скорее всего просто включите этот плагин в списке плагинов Joomla раздела system).
20.12.2023, 09:52:48