Матвей Земсков

Заметки веб-мастера

Вторник, 03 марта 2015 16:11

Joomla: отображение системных сообщений во всплывающем окне

Оцените материал
(4 голосов)

Системные сообщения в Joomla являются важным инструментом для взаимодействия с посетителем. Внешний вид стандартного блока с сообщениями оставляет желать лучшего. В этой маленькой заметке, я опишу показа сообщений во всплывающем окне. Немного забегу вперед: сделано это будет с помощью jQuery fancyBox.

Всплывающее окно с системным сообщением
Всплывающее окно с системным сообщением

При отображении стандартных системных сообщений на страницах сайта под управлением Joomla, генерируется следующий HTML-код:

HTML

<div id="system-message-container"> 
   <div id="system-message"> 
      <div class="alert alert-message"> 
	<a class="close" data-dismiss="alert"> ×</a> 
	<h4 class="alert-heading"> Сообщение</h4> 
            <div> 
	    <p> Спасибо за ваше письмо!</p> 
	</div> 
      </div> 
    </div> 
</div>  

К системным сообщениям, в частности, относится сообщение, которое появляется после отправки данных через форму обратной связи на странице с компонентом com_contact. Место где оно появляется определяется в шаблоне сайта. Для его вставки используется следующая директива:

Joomla API

<jdoc:include type="message" />

Стандартный вид сообщения не очень привлекательный и, как правило, не совпадает с дизайном страниц вашего сайта. Его, конечно же, можно стилизовать с помощью CSS, но я предлагаю, кроме стилизации, еще и показывать его во всплывающем окне. При этом содержимое страницы должно быть затемнено. С этим прекрасно справится легендарный jQuery-инструмент под названием fancyBox.

Скачаем его и подключим в ваш шаблон сайта. Из скачанного архива вам понадобятся файлы: jquery.fancybox.pack.js, jquery.fancybox.css. Они находятся в папке source загруженного архива. Кроме них, возьмем все изображения и разархивируем их в папку images вашего шаблона. Файлы jquery.fancybox.pack.js и jquery.fancybox.css перенесите в соответствующие папки script и css. Причем файл jquery.fancybox.pack.js можно переименовать в jquery.fancybox.js.

В файле jquery.fancybox.css не забудьте заменить пути к изображениям на ваши. Затем подключим перечисленные файлы в шаблоне сайта (файл — index.php).

PHP

<link rel="stylesheet" type="text/css" href="/<?php echo $this-> baseurl?> /templates/<?php echo $this-> template; ?> /css/jquery.fancybox.css" media="all" /> 

Файл jquery.fancybox.pack.js подключаем после подключения библиотеки jQuery.

PHP

<script src="/<?php echo $this-> baseurl?> /templates/<?php echo $this-> template; ?> /script/jquery.fancybox.js"> </script> 

Теперь можно перейти к написанию пары строк javaScript, чтобы подключить fancyBox и указать, что показывать во всплывающем окне и главное, в какой момент это делать. Дело в том, что блок-контейнер (div#system-message-container) для системных сообщений генерируется в коде страницы при каждом ее показе. Правда если сообщений нет — он пуст и не содержит в себе других элементов. Если мы вызовем без условий, то при каждом обращении к сайту, будем видеть пустое всплывающее окно. Поэтому код для показа сообщений будет следующий:

JavaScript

jQuery(document).ready(
 function(){            
    var $ = jQuery;                                                      
	var messLgth = $('#system-message-container').children().length;
	if(messLgth !== 0){
		$.fancybox.open(
			$('#system-message-container'),{
					padding : 0, 
					closeBtn: false
				}
		);
		
		$('a.close').on('click', function(){
			$.fancybox.close();
		});
	}
 });

Код получился совсем несложный: сначала проверяем есть ли потомки у контейнера для системных сообщений. Если да, вызываем метод $.fancybox.open. В качестве параметров передаем объект с 2 свойствами: первый параметр - убирает отступы, второй — скрывает кнопку «закрыть». Дело в том, что в блоке для показа системного сообщения уже есть ссылка (a.close), при клике на которой всплывающее окно должно закрываться. Следующие 2 строчки кода, как раз и реализуют такой функционал. Ну вот и весь скрипт. Получилось довольно «скромно».

Помещаем этот код в файл и сохраняем его. Я назвал его script.js и разместил в той же папке (script), куда разархивировал jquery.fancybox.js. Подключить этот файл в шаблоне сайта необходимо следующей строкой после подключения jquery.fancybox.js.

PHP

<script src="/<?php echo $this-> baseurl?> /templates/<?php echo $this-> template; ?> /script/script.js"> </script> 

Теперь после проделанной работы, мы уже можем увидеть результат. Системное сообщение после заполнения и отправки формы обратной связи должно открыться с помощью fancyBox. Если, конечно, вы все правильно сделали.

Осталось только немного стилизовать блок с сообщением, добавив немного CSS. У меня получился следующий набор CSS-правил:

CSS

/*системные сообщения*/
#system-message-container{width:300px;}
#system-message{}
.alert-message{position: relative; width:99%; margin-top:15px;}
a.close{position:absolute; top:-10px; right:5px; font-weight:bold; cursor:pointer; width:20px; height:20px; text-align: center;}
.alert-message h4{text-align: center; margin-bottom:10px;}
.alert-message p{font-size:.8em; text-align: center;}

Вы можете украшать блок на свой вкус. Вот таким простым способом мы смогли организовать показ системных сообщений на сайте под управлением Joomla во всплывающем окне.

Прочитано 4136 раз

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: