Пробуем и тестируем

Рецепты на все случаи жизни

Вывод модуля CustomHTML В модальном окне при первом посещении

Вывод модуля CustomHTML В модальном окне при первом посещении

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

Так как на сайте используется шаблон Bootstrap 3 - будем использовать его модальку.

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

Если кука с идентификатором ID модуля пуста, либо ее нет - выводим код. Иначе - считаем, что человек уже видел это окошко.

jQuery(document).ready(function (jQuery) {

		$(<?php print $modalid; ?>).modal('show')

		$(<?php print $modalid; ?>).on('hidden.bs.modal', function (e) {
		document.cookie = '<?php print $modalid ?>=read'; //установка куки о прочнении
	})

});

Скрипт автоматически вызовет модальку и при закрытии (стандартное событие hidden.bs.modal) установит куку в значение read

Что при следующем открытии не даст появиться модулю вовсе.

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_custom
 *
 * @copyright   Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

$modalid 	= 'modal_'.$module->id; //генерим рандомный	id для модальки
$doc   		= JFactory::getDocument();
$cookie  	= JFactory::getApplication()->input->cookie;// Get input cookie object
$config		= JFactory::getConfig();
$template 	= $config[theme]; // Название шаблона

// Get cookie data
$value 		= $cookie->get($name = $modalid, $defaultValue = null); //Получаем нашу печеньку

 //Раскомментить эту строку при отладке
	//print $modalid.' - '.$value; //Содержимое переменной и имя куки
 //Раскомментить эту строку при отладке

if (!$value) {
?>

<div class="modal fade" id="<?php print $modalid; ?>" tabindex="-1" role="dialog" aria-labelledby="ModalLabel<?php print $modalid; ?>" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <?php echo $module->content; ?>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">

function setCookie(name, value, options) {
  options = options || {};

  var expires = options.expires;

  if (typeof expires == "number" && expires) {
    var d = new Date();
    d.setTime(d.getTime() + expires * 1000);
    expires = options.expires = d;
  }
  if (expires && expires.toUTCString) {
    options.expires = expires.toUTCString();
  }

  value = encodeURIComponent(value);

  var updatedCookie = name + "=" + value;

  for (var propName in options) {
    updatedCookie += "; " + propName;
    var propValue = options[propName];
    if (propValue !== true) {
      updatedCookie += "=" + propValue;
    }
  }

  document.cookie = updatedCookie;
}

jQuery(document).ready(function (jQuery) {

		$(<?php print $modalid; ?>).modal('show')

		$(<?php print $modalid; ?>).on('hidden.bs.modal', function (e) {
			 //Закомментить эту строку при отладке
			   document.cookie = '<?php print $modalid ?>=read'; //установка куки о прочнении
			 //Закомментить эту строку при отладке
		})

	});
</script>
<?php
}
?>

Файл я приложу к материалу. Можно скачать и править под себя как угодно. Конечный вариант файла отличается от приведенного выше. Он заточен окончательно под мои нужды и содержит в себе так же временные промежутки отображения, и дополнительный стекер, который появляется при закрытии модали и вызывает ее обратно, если по стикеру тыкнуть мышкой.

Устанавливается путем копирования его в папку

/templates/***/html/mod_custom/

где *** ваш шаблон. 

Следует помнить - решение работает используя модаль bootstrap 3

На картинке ниже показано где выбрать переопределение шаблона.

  • Вывод модуля CustomHTML В модальном окне при первом посещении
  • Комментарии (0)

    Оставить комментарий

    Вы комментируете как Гость.

    Статус материала

    • 2016-10-27
    • 627
    • Требования: Joomla
    • Раздел: Песочница
    • Скачать
    • Размер: 1.61 KB
    • Обновлён: 2016-10-28
    • Скачали: 47
    • jomla
    • jbzoo
    • css3
    • html5
    • Java script
    • jquery
    • bootstrap
    Мы находимся в Минске
    работаем по всей РБ
    • mts+375 29 779-72-95viber
    • vel+375 44 779-72-95
    • email: Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра.
    • skype: tirby_kat
    Индивидуальный предприниматель
    Кулак Сергей Николаевич
    УНП: 590816946
    зарегистрирован Зельвенским районным исполнительным комитетом
    от 01.06.2010
    Свяжитесь со мной