«Всплывающие окна - для уведомлений, рекламы, веб-форм и др.»: модуль для 1С-Битрикс

Если Вы установили демо-версию модуля и демонстрационный режим истек, но Вы не успели попробовать модуль в работе, сообщите об этом нам, мы можем повторно включить демо-режим. В общем случае, для сброса демо-режима нужно выполнить следующие указания:

1. создать рез. копию сайта, хотя бы базы данных,

2. деинсталлировать модуль (все данные будут удалены!),

3. стереть данный модуль с сайта (соотв. опция доступна в списке модулей),

4. выполнить SQL-запрос (в админке на соотв. странице в разделе "Инструменты": Административный раздел - Настройки - Инструменты - SQL-запрос):
   

   DELETE FROM `b_option` WHERE `MODULE_ID`='webdebug.popup';
   

5. сбросить весь кеш на сайте,

6. сообщить нам адрес сайта и владельца лицензии для проверки и сброса срока демо-версии на Вашем сайте,

7. после нашего ответа повторно установить модуль из Маркетплейс .

Версия модуля 2.0.0 добавляет стиль, который можно использовать для создания уведомлений об использовании Cookies (и подобных).

Пример кода для размещения всплывающего окна:

<?if(\Bitrix\Main\Loader::includeModule('webdebug.popup')):?>
	<?\CWD_Popup::init(true);?>
	<?$arPopup = [
		'ID' => 'cookies',
		'NAME' => 'Согласие об использовании cookies',
		'CLOSE' => 'N',
		'APPEND_TO_BODY' => 'N',
		'CLASSES' => ['wd_popup_cookies'],
		'AUTOOPEN' => 'Y',
		'AUTOOPEN_ONCE' => 'Y',
		'AUTOOPEN_TERM' => '365',
	];?>
	<?=\CWD_Popup::beginEx($arPopup);?>
	<div class="wd_popup_cookies_agree"><input type="button" value="Принимаю" onclick="WD_Popup_Close('cookies')" style="float:right" /></div>
	<p>Сайт использует файлы cookies и сервис сбора технических данных его посетителей.</p>
	<p>Продолжая использовать данный ресурс, вы автоматически соглашаетесь с использованием данных технологий.</p>
	<?=\CWD_Popup::endEx();?>
<?endif?>

Разбор данного кода

Код использует способ подключения всплывающего окна с помощью компонента.

Указан класс wd_popup_cookies - стили для данного класса расположены в файле /bitrix/themes/.default/webdebug.popup.css

Параметр AUTOOPEN включает режим автоматического открытия, а следующие параметры уточняют особенности этого режима: AUTOOPEN_ONCE включает режим одноразового открытия, а AUTOOPEN_TERM определяет срок, в течение которого проверяется факт предыдущего открытия: 365 означает что уведомление будет показано один раз в году.

Если после установки модуля в списке компонентов (в визуальном редакторе) не появился компонент, необходимо сбросить кеш компонентов:

<?if(CModule::IncludeModule('webdebug.popup')):?>
	<?CWD_Popup::Init(true);?>
	<?$arPopup = array(
		'ID' => 'test',
		'NAME' => 'Проверка',
		'WIDTH' => '420',
		'CLOSE' => 'Y',
		'APPEND_TO_BODY' => 'Y',
		'CLASSES' => array('wd_popup_style_05'),
		'LINK_TO' => '',
		'AUTOOPEN' => 'Y',
		'AUTOOPEN_DELAY' => '500',
		'AUTOOPEN_ONCE' => 'Y',
		'AUTOOPEN_TERM' => '365',
		'AUTOOPEN_PATH' => 'N',
	);?>
	<?=CWD_Popup::BeginEx($arPopup);?>
	<p>Проверка</p>
	<?=CWD_Popup::EndEx();?>
<?endif?>

В данном случае возможны различные варианты причины проблем:

1. проверьте, что в контенте всплывающих окон (редактируемые области) нет подключения служебных файлов битрикса - header.php и footer.php - их там быть не должно! Должен быть только контент.
   
2. компонент нельзя размещать в шаблонах (файлы template.php и result_modifier.php) других компонентов, которые работают в режиме кеширования. Например, в bitrix:catalog.section или bitrix:catalog.element. Компонент bitrix:catalog не работает в режиме кеширования, поэтому в нем подключение возможно. Также возможно подключение всплывающих окон в файлах component_epilog.pgp шаблонов всех компонентов.
3. «поломана» верстка внутри контента всплывающего окна.
4. другие проблемы, для решения которых можете обратиться к нам (поможем бесплатно).

Все относительно несложно.

Быстрый просмотр делается, обычно, для списка товаров, т.е. в шаблоне компонента 
bitrix:catalog.section. В плане реализации есть две схемы:

1. на все товары создается одно единственное всплывающее окно, и каждый раз при быстром просмотре 
информация подгружается по AJAX.

2. у каждого товара свое всплывающее окно, и открытие таких окошек происходит без AJAX.

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

Реализация первого варианта следующая:
в файле component_epilog.php шаблона компонента bitrix:catalog.section вставляете код подключения всплывающего окна (подключение через API, а не через компонент), устанавливаете параметр "CALLBACK_SHOW" (т.е. действие, которое будет при каждом открытии окна, например, "ShowFastPreview"), устанавливаете css-селектор ссылок открытия (напр., всем ссылкам, открывающим быстрый просмотр в шаблоне задайте class="fast_preview" и селектор тогда используйте ".fast_preview") затем там же пишите JS-код для данного CALLBACK_SHOW:

<script>
function ShowFastPreview(PopupWindow, PopupContent, Link){
	var ProductID = Link.attr('data-id');
	$.ajax({
		url: 'здесь URL к файлу с быстрым просмотром',
		type: 'GET',
		data: 'product_id='+ProductID,
		success: function(HTML) {
			$(PopupContent).html(HTML);
		}
	});
}
</script>

Далее, каждой ссылке, открывающей быстрый просмотр, нужно добавить атрибут data-id с ID товара, например, <a href="#" data-id="<?=$arElement['ID'];?>">Быстрый просмотр</a>

И осталось только создать файл для AJAX-загрузки карточки товара в режиме быстрого просмотра. 
Например, /ajax/fast_preview.php. В нем - подключение служебных скриптов, например:

<?
define('NO_KEEP_STATISTIC', true); 
define('NOT_CHECK_PERMISSIONS', true);
define('PUBLIC_AJAX_MODE', true); 
require($_SERVER['DOCUMENT_ROOT'].'/bitrix/modules/main/include/prolog_before.php');
$ProductID = IntVal($_GET['product_id']);
тут код компонента карточки товара
?>

И в этом файле разместить компонент bitrix:catalog.element, у которого нужно (предварительно) настроить все параметры, в т.ч. указать инфоблок и в качестве ID товара - $ProductID. Стили в компоненте (style.css) настраивать не получится, т.к. при ajax-подгрузке они не будут загружаться, поэтому их лучше размещать или в общем файле стилей template_styles.css, или как-то подключать в том же component_epilog.php.

В целом, это все. Остается только донастроить все под Ваш конкретный случай.

Сложность здесь заключается в том, что если просто разместить форму во всплывающем окне, то при отправке данных страница перезагружается, и окно закрывается.

Проблема заключается в следующем: во всплывающем окне размещена обычная веб-форма (<form>). Поэтому при отправке данных она, как и положено, перезагружает страницу.

Пример решения данной проблемы:

1. Во всплывающее окно поместить форму обратной связи (или любой другой компонент с формой для заполнения, напр., форма обратного звонка). Настроить данный компонент.
   
2. Имейте ввиду, что компонент не должен препятствовать логикой своего кода нормальной отправке данных из формы (в частности, он должен поддерживать отправку и прием данных формы без любых перенаправлений). Например, стандартная форма обратной связи (bitrix:main.feedback) после отправки данных делает перенаправление на страницу с параметром "success", поэтому без полной перезагрузки страницы такой компонент работать не сможет. В данном случае нужно поступить так: найти в коде компонента (/bitrix/components/bitrix/main.feedback/component) строчку, начинающуюся с "LocalRedirect(..." (в актуальной сегодня версии Битрикс это строчка 78), поставить перед ней символ решетки (это превращает сточку кода в комментарий, который не исполняется). А перед указанной строкой добавит еще одну, которая будет выводить текст об успешном заполнении без перезагрузки:
   $arResult["OK_MESSAGE"] = $arParams["OK_TEXT"];
   
3. В шаблоне компонента обратной связи добавить две строчки. Одну в самом начале (т.е. эта строчка должна быть первой):
   <?if($_REQUEST['ajax_form']=='Y') {$APPLICATION->RestartBuffer();}?>
   другую в самом конце (т.е. последняя строка):
   <?if($_REQUEST['ajax_form']=='Y') {die();}?>
4. Для нашего компонента "Всплывающее окно" задать параметр "JS-функция при первом открытии всплывающего окна". К примеру, задайте "popup_feedback_open".
5. Затем, необходимо добавить код соответствующей функции. Его можно добавить в любом месте шаблона сайта, или страницы, или даже в любой файл JS-скриптов сайта (без тегов <script>, </script>):
   

   <script>
   function WD_UpdateForm(Form, PopupContent) {
   	$.ajax({
   		url: Form.attr('action'),
   		type: Form.attr('method'),
   		data: Form.serialize() + '&submit=Y&ajax_form=Y',
   		success: function(HTML) {
   		PopupContent.html(HTML); }
   	});
   }
   function popup_feedback_open(PopupWindow, PopupContent, Link){
   	PopupContent.delegate('form','submit',function(Event){
   		Event.preventDefault();
   		WD_UpdateForm($(this),PopupContent);
   	}); 
   }
   </script>

6. После этого при отправке данных форма не будет перезагружать страницу, а будет отправлять и получать данные через AJAX.

Проблема связана с кеширование компонента: ошибка говорит о том, что компонент включаемой области расположен внутри другого компонента (обычно это компонент bitrix:catalog.element: либо самостоятельно, либо в составе комплексного компонента bitrix:catalog), работающего с кешированием. Проблема возникает из-за того, что при кешировании компонент выводит то, что "запомнил" ранее, не подключая служебные файлы (в данном случае это файл стилей, который как раз скрывает окно, и файл скрипта, который заставляет кнопку и окно работать).

Upd.: Также в обновлении 1.0.12 добавлена опция (в настройках модуля), которая сама выполняет все указанные действия на всех страницах сайта.

Данная опция означает, что к всплывающему окну при открытии страницы сайта будет применен CSS-стиль display:none, что означает, что окна как будто и нет. По умолчанию же вместо этого используется visibility:hidden, определяющее, что окно скрыто, но при этом Flash-содержимое не "считает", что окно скрыто, и показывает контент даже закрытого окна.

Также это означает, что после закрытия всплывающего окна к нему будет также применен стиль display:none, с целью предотвратить проигрывание видео в фоне даже после закрытия страницы.

Используйте обработчик создания окна (настройка компонента - "JS-функция при создании всплывающего окна", или для API - "CALLBACK_OPEN"). Например, укажите "my_popup_create".

function my_popup_create(PopupWindow, PopupContent, Link) {
	// Эта конструкция создает постоянный обработчик, который перехвачивает событие submit и сам отправляет данные
	$(document).on('submit','#'+PopupWindow.attr('id')+' form',function(){
		WD_Popup_AJAX(PopupContent, '/popup.php', $(this).serialize(), function(res){PopupContent.fadeTo(200,0,function(){$(this).html(res).fadeTo(200,1);});});
		return false;
	});
	// Эта функция делает первоначальный AJAX-запрос для получения контента окна
	WD_Popup_AJAX(PopupContent, '/popup.php', '', function(res){PopupContent.fadeTo(200,0,function(){$(this).html(res).fadeTo(200,1);});});
}

Не забудьте, что в получаемом контент должна быть HTML-форма с лежащим внутри сабмиттом (или отправляемая программно).

Для начала откройте файл /bitrix/themes/.default/webdebug.popup.css и посмотрите стили для класса wd_popup_style_01. Для настройки своих стилей можете скопировать эти строчки CSS-стилей (не забудьте их переименовать, напр, в "my_style"). После этого в настройках компонента укажите этот класс в поле "CSS-классы" (для API это ключ массива "CLASSES").

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

Для этого разместите следующий код в нужном месте и настройте под свои нужды:

<?if(CModule::IncludeModule('webdebug.popup')):?>
	<?CWD_Popup::Init(true);?>
	<?$arPopup = array(
		'ID' => 'callme',
		'NAME' => 'Заказ обратного звонка!',
		'WIDTH' => '400',
		'CALLBACK_OPEN' => 'popup_callme_open',
		'CLASSES' => array('wd_popup_style_01'),
		'LINK_TO' => 'a.callme',
		'APPEND_TO_BODY'=>'Y'
	);?>
	<?=CWD_Popup::BeginEx($arPopup);?>
	<div>Здесь любой контент формы</div>
	<?=CWD_Popup::EndEx();?>
<?endif?>

Далее остается только создать на странице ссылку с классом "callme":

<a href="#" class="callme">Заказать обратный звонок</a>

Также, в обновлении 1.0.18 реализована возможность однократного открытия окна (это полезно в случае уведомления пользователей о чем-то важном всего один раз).