Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам

Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 6

В 6 уроке мы произведём интеграцию дизайна для формы e-mail подписки.

Форма подписки на e-mail

К сожалению, Подписки и Рассылки, на мой взгляд реализован не лучшим образом, поэтому для решения данной задачи существует как минимум 4 разных способа:

Использовать стандартные компоненты (subscribe.form и subscribe.edit)
Использовать форму стороннего сервиса (например, MailChimp)
Использовать сторонний модуль (например, asd.subscribequick Антона Долганина из MarketPlace)
Кастомизировать компонент subscribe.edit или написать свой

Мы постараемся описать все варианты, если позволят наши силы. У каждого из методов мы укажем сильные и слабые стороны.

Использование стандартных компонентов

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

Описание под спойлером:

Свернуть/Развернуть

Разместим на тестовой странице 1.php компонент bitrix:subscribe.form с шаблоном .default.

Скопируем шаблон компонента в шаблон сайта, переименовав в bottom.

Обратим внимание на особенности этого компонента:

В обязательном порядке выводятся чек-боксы с выбором подписки, которые пользователь может поставить или убрать
Выводятся чекбоксы ВСЕХ активных рассылок (или ещё и неактивных, если установить параметр компонента). Параметр компонента не может задать фильтр по рассылкам заранее.

чек-боксы выбора рассылки в форме подписки 1С-Битрикс

Поскольку в нашем дизайне заложена лаконичная форма, то всё лишнее нам придётся убрать.

Для этого создадим файл .parameters.php в шаблоне компонента и добавим туда следующий код:

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); 
      

     
      

     $arRubrics = array(); 
      

     if (CModule::IncludeModule('subscribe')) { 
      

     	$rsRub = CRubric::GetList(array('SORT' => 'ASC', 'NAME' => 'ASC')); 
      

     	while ($arRub = $rsRub->Fetch()) { 
      

     		$arRubrics[$arRub['ID']] = $arRub['NAME']; 
      

     	} 
      

     } 
      

     
      

     ?>

Мы проверяем подключен ли модуль Подписок и рассылок (на всякий случай), после чего считываем из него список рубрик, существующих в системе в переменную $arRubrics.

Далее объявим параметр типа список, значения которого возьмём из $arRubrics:

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); 
      

     
      

     $arTemplateParameters ["RUBRICS"] = array( 
      

     			'PARENT' => 'BASE', 
      

     			'NAME' => GetMessage('RUBRICS'), 
      

     			'TYPE' => 'LIST', 
      

     			'VALUES' => $arRubrics, 
      

     			'MULTIPLE' => 'Y' 
      

     ); 
      

     ?>

Результат наших действий при редактировании параметров компонента:

выбор рубрики рассылки в параметрах компонента формы подписки

Ну и не забудем про заголовок формы - его тоже неплохо было бы задать параметром:

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); 
      

     
      

     $arTemplateParameters["SUBSCRIBE_FORM_TITLE"] = array( 
      

     		'PARENT' => 'BASE', 
      

     		"NAME" => GetMessage("SUBSCRIBE_FORM_TITLE"), 
      

     		"TYPE" => "HTML", 
      

     		"DEFAULT" => "Newsletter", 
      

     	); 
      

     ?>

Тогда целиком файл параметров будет выглядеть так:

<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); 
      

     
      

     $arRubrics = array(); 
      

     if (CModule::IncludeModule('subscribe')) { 
      

     	$rsRub = CRubric::GetList(array('SORT' => 'ASC', 'NAME' => 'ASC')); 
      

     	while ($arRub = $rsRub->Fetch()) { 
      

     		$arRubrics[$arRub['ID']] = $arRub['NAME']; 
      

     	} 
      

     } 
      

     
      

     $arTemplateParameters ["RUBRICS"] = array( 
      

     			'PARENT' => 'BASE', 
      

     			'NAME' => GetMessage('RUBRICS'), 
      

     			'TYPE' => 'LIST', 
      

     			'VALUES' => $arRubrics, 
      

     			'MULTIPLE' => 'Y' 
      

     ); 
      

     
      

     $arTemplateParameters["SUBSCRIBE_FORM_TITLE"] = array( 
      

     		'PARENT' => 'BASE', 
      

     		"NAME" => GetMessage("SUBSCRIBE_FORM_TITLE"), 
      

     		"TYPE" => "HTML", 
      

     		"DEFAULT" => "Newsletter", 
      

     	); 
      

     ?>

Не забудем создать языковые файлы для параметров.

Теперь кастомизируем шаблон формы.

Если присмотреться к дефолтному шаблону, то мы увидим, что самый просто способ избавиться от чек-боксов - задать для соответствующих полей type="hidden". После небольших косметических изменений получим:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> 
      

     
      

     <?echo bitrix_sessid_post();?> 
      

     <form id="newsletter" action="<?=$arResult["FORM_ACTION"]?>"> 
      

     	<label><?=$arParams['SUBSCRIBE_FORM_TITLE']?></label> 
      

     	<div class="clearfix"> 
      

     <?foreach($arParams["RUBRICS"] as $RubID => $RubValue):?> 
      

     	<input type="hidden" name="sf_RUB_ID[]" id="sf_RUB_ID_<?=$RubValue["ID"]?>" checked value="<?=$RubValue["ID"]?>" /> 
      

     <?endforeach;?> 
      

     
      

     <input type="text" name="sf_EMAIL" size="20" value="<?=$arResult["EMAIL"]?>" title="<?=GetMessage("subscr_form_email_title")?>" /> 
      

     
      

     <a href="#" onclick="document.getElementById('newsletter').submit()" class="btn btn_">subscribe</a> 
      

     	</div> 
      

     </form>

Если сейчас испытать получившуюся конструкцию, то мы увидим, что хотя она успешно работает, но подписки пользователя на рассылку не происходит.

Причина кроется в определённой ущербности данного шаблона самого по себе. Он не способен подписать никого и ни на что. Это по сути форма, которая перенаправляет на другую страницу и передаёт ряд параметров (и лишь наши манипуляции с .parameters.php научили её хотя бы минимальной гибкости с рубриками.

Если открыть документацию, то мы увидим, что принимающей стороной предполагается компонент bitrix:subscribe.edit.

При этом данный компонент выполнят несколько функций:

Осуществляет подписку на рассылку ( + активирует событие, отправляющее на почту подтверждение подписки)
Позволяет редактировать подписки
Осуществляет отписку
Осуществляет подтверждение подписки (при переходе по ссылке из письма или при вводе кода активации)

При этом мы можем обратить внимание, что в почтовом шаблоне и настройках модуля "Подписки и рассылки" фигурирует каноническое местонахождение этого скрипта:

/about/subscr_edit.php

На мой взгляд это очень неудобно, однако в рамках примера мы не станем редактировать настройки модуля или почтового шаблона.

Создадим файл /about/subscr_edit.php и разместим в нём компонент bitrix:subscribe.edit.

В принципе этого достаточно и мы получили вполне работоспособную схему, пусть и не очень красивую (подписка будет делаться в 3 шага, считая подтверждение приходящее на E-mail). Для того чтобы "причесать" внешний вид второй формы скопируем её шаблон .default в шаблон сайта, переименовав в template.

Далее добавим для всех кнопок класс class="btn btn_", а заголовкам <h2> и получим:

Страница редактирования подписки на e-mail рассылку 1С-Битрикс

Фактически на этом можно завершить реализацию нашей задачи. Однако, мне она кажется неоптимальной.

Напомним:

Плюсы метода:

Используются системный компоненты и шаблоны
Линейный сценарий интеграции дизайна (действий много, однако они типовые)

Минусы метода:

3 шаговая подписка (2 действия на сайте + подтверждение по e-mail)

Данная реализация НЕ ВОЙДЁТ в демо-материалы нашего репозитория на Github, однако в репозиторий войдут 2 шаблона компонентов (поэтому вы сами сможете разместить эти компоненты на страницах и в шаблоне):

Шаблон template компонента bitrix:subscribe.edit
Шаблон bottom компонента bitrix:subscribe.form

Использование сторонних инструментов подписки\рассылки (на примере MailChimp)

Данная методика не может быть использована в качестве основной в силу своей не универсальности - далеко не каждый проект может позволить себе осуществлять e-mail рассылку с помощью стороннего сервиса (да и просто хранение персональных данных вовне не всегда возможно).

Однако, сервис мейл-директа MailChimp является одним из известнейших и старейших в мире. Их функционал пожалуй лучший в своём роде, поэтому для своего проекта мы склонны использовать именно этот сценарий.

Однако поскольку не все владеют свободно английским, могут возникнуть проблемы в работе с самим сервисом и его аналитикой. В этом случае следует использовать другой сервис, например отечественный Unisender (возможно мы отдельно опишем процесс интеграции дизайна формы подписки для него, если в этом возникнет потребность).

Описание интеграции с MailChimp Так же под пойлером:

Свернуть/Развернуть

Не станем описывать процесс регистрации в сервисе MailChimp - он довольно тривиален. Будем исходить из предположения, что аккаунт в системе у нас уже есть.

Создадим список подписчиков для рассылки в MailChimp (пункт меню "List", кнопка "Create List" над всеми заведёнными в системами списками):

Создаём список рассылки MailChimp

Заполните простую анкету для списка подписчиков (помните, не стоит заполнять её нереальными или бессмысленными данными - помимо проверки системы, очень строгой к спаму, эти поля могут понадобиться вам самим в будущем для работы, если списком будет несколько и потребуется автоматизировать процесс):

анкета для создания списка подписчиков MailChimp

Теперь создадим форму подписки из которой люди попадут в наш список:

создадим форму подписки

Так же мы всегда можем перейти к созданию формы нажав на название списка рассылки и выбрав пункт меню "Signup forms".

Далее нас интересует пункт "Embedded forms":

Embedded forms в Mailchimp

Поскольку нам всё равно предстоит интегрировать свой дизайн - просто воспользуемся самой лаконичной из всех форм - "Super Slim". Фактически она представляет из себя только заголовок, поле для ввода e-mail и кнопку - ровно то, что нам нужно!

Создаём Super Slim форму в Mailchimp

Разместим код формы на нашей тестовой странице 1.php. Получится нечто вроде:

<!-- Begin MailChimp Signup Form --> 
      

     <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"> 
      

     <style type="text/css"> 
      

     	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 
      

     	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 
      

     	 We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ 
      

     </style> 
      

     <div id="mc_embed_signup"> 
      

     <form action="http://coffeediz.us3.list-manage1.com/subscribe/post?u=f68ed39bf61bbea689307b589&amp;id=b00ecec414" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
      

     	<label for="mce-EMAIL">Subscribe to our mailing list</label> 
      

     	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> 
      

     <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
      

     <div style="position: absolute; left: -5000px;"><input type="text" name="b_f68ed39bf61bbea689307b589_b00ecec414" value=""></div> 
      

     	<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
      

     </form> 
      

     </div> 
      

     
      

     <!--End mc_embed_signup-->

Как можно заметить код формы содержит помимо прочего уникальный УРЛ, предоставляемый сервисом MailChimp, переход на который и передача в качестве параметра e-mail и означает факт подписки пользователем (конечно же, дабы убедиться в добровольности происходящего на этот e-mail потом придёт письмо с кодом подтверждения, но с этим мы так же разберёмся). Именно поэтому, мы не сможем предоставить в конце компонент для репозитория. Проще всего провести процесс интеграции, пользуясь этим уроком.

Слегка подрихтуем исходный код (не забудем про строку с комментарием "real people should not fill this in and expect good things - do not remove this or risk form bot signups" - она отмечает поле, которое защищает нас от спама - его будут заполнять ТОЛЬКО роботы):

<form action="http://coffeediz.us3.list-manage1.com/subscribe/post?u=f68ed39bf61bbea689307b589&amp;id=b00ecec414" method="post" id="newsletter" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
      

     	<label>Newsletter</label> 
      

     	<div class="clearfix"> 
      

     	 <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--><div style="position: absolute; left: -5000px;"><input type="text" name="b_f68ed39bf61bbea689307b589_b00ecec414" value=""></div> 
      

     	<input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Enter e-mail here" required> 
      

     	<a href="#" onclick="document.getElementById('newsletter').submit()" class="btn btn_">subscribe</a> 
      

     	</div> 
      

     </form>

Замените этим кодом форму подписки в HTML вёрстке.

Для большей гибкости редактирования можно поместить данный код во включаемую область, подобно тому, как мы сделали в Уроке 2.

Если сейчас заполнить эту форму, то в результате мы попадём на страницу сервиса MailChimp, где получим информацию о списке подписчиков, которую заполняли в начале:

результат заполнения формы подписки MailChimp

Одновременно с этим нам на почту пришло письмо с подтверждением подписки (в котором необходимо перейти по ссылки):

дефолтное письмо подтверждения подписки MailChimp

Это всё прекрасно, но не можем же мы оставить всё как есть?

Давайте вернёмся на несколько шагов назад к варианту выбора формы и зайдём в раздел "General forms":

General forms в Mailchimp (для создания кастомных страниц и письма подтверждения подписки)

На открывшейся странице нас интересует выпадающий список "Forms and response emails".

Forms and response emails - настраиваем страницы и письма подтверждения подписки в MailChimp

Для начала обратим внимание на 3 пункта:

Signup "thank you" page (страница "спасибо за подписку", на которую пользователь попадает сразу после заполнения формы подписки)
Opt-in confirmation email (письмо с подтверждением подписки)
Confirmation "thank you" page (страница подтверждения подписки, куда пользователь попадает из ссылки в письме)

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

Однако сейчас мы обратим внимание другую особенность страниц 1 и 3:

Перенаправление со страницы подтверждения подписки MailChimp

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

Рекомендуется оформить эти страницы так, чтобы предоставить пользователям подробную информацию о происходящем, а так же по возможности дать какой-нибудь бонус для поддержания лояльности вашему сервису (например, купон на скидку для интернет-магазинов или некий эксклюзивный материал для контентных ресурсов).

Теперь займёмся вторым пунктом списка - письмом с подтверждением подписки.

Форма редактирования письма подтверждения подписки MailChimp

Во-первых, зададим технические поля, использующиеся в заголовке письма:

Имя отправителя
E-mail отправителя
Тема письма

А во-вторых, воспользуемся пунктом "Translate it" - он позволяет в автоматическом режиме перевести все поля формы или письма. Оставшиеся поля можно отредактировать с помощью визуального редактора прямо по месту:

использование визуального редактора для правки письма подтверждения подписки MailChimp

Аналогичным образом следует отредактировать все формы и письма, которые вы намерены использовать (рекомендуется создать для всех страниц\форм дубли на своём сайте в привычном пользователю интерфейсе и автоматически перенаправлять туда).

Плюсы данного метода:

Простота реализации (небольшая правка HTML кода и включаемые области)
Мощнейший функционал стороннего сервиса почтовых рассылок MailChimp (аналитика, A\B тестирования, договорённости с почтовыми провайдерами о приоритетах прохода писем, история рассылок, шаблоны и произвольный код для рассылок, а так же мощнейшие возможности по сегментации аудитории и многое, многое другое)

Минусы данного метода:

Сторонний сервис (ограничения англоязычного интерфейса, платность рассылок свыше определённого лимита, зависимость от провайдера и т.п.)
Сложность интеграции на уровне компонентов (проще интегрировать форму заново, поменяв УРЛ напрямую в коде, чем оформить компонент, который забирал бы данные и настройки из аккаунта MailChimp)

Упомянутые выше минусы решения не позволяют оформить результаты данного урока в репозиторий на GitHub, однако для собственного сайта я бы предпочёл использование данного сервиса.

Использование сторонних модулей 1С-Битрикс (на примере модуля быстрой формы подписки Антона Долганина из MarketPlace)

Одновременно простое и массштабируемое решение оно не может считаться на мой взгляд "каноническим", поскольку ставит ваш проект в зависимость от чужого кода (и в отличие от 1С-Битрикс разработчик этого кода не обязан поддерживать работоспособность своего детища и может изменить правила распространения уже после принятия вами решения об использовании модуля).

Для некоторых проектов критичным является невозможность использования чужого кода без дополнительного аудита безопасности, поэтому такой модуль будет являться "чёрным ящиком".

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

Свернуть/Развернуть

Установим модуль из Маркета 1С-Битрикс (в случае, если не возникнет никаких претензий со стороны автора модуля мы включим его в наш GitHub репозиторий вместе с шаблоном сайта и демо-данными). В результате в нас появится новый компонент в списке компонентов (Сервисы ⇒Рассылки) - "Форма быстрой подписки" (asd:subscribe.quick.form).

Разместим этот компонент на нашей тестовой странице 1.php и скопируем шаблон компонента в шаблон сайта, переименовав в bottom.

Как видим, шаблон компонента очень лаконичен и натянуть на него нашу вёрстку - одно удовольствие!

Обратите внимание, что пространство имён компонента не bitrix, а asd - именно так, в отдельном пространстве имён правильно оформлять собственные компоненты! И тогда путь к шаблону компонента в шаблоне сайта будет выглядеть: /bitrix/templates/stylish/components/asd/subscribe.quick.form/bottom/

Во-первых, не забудем вынести в параметры компонента заголовок формы, для этого создадим файл .parameters.php

<? 
      

     if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); 
      

     
      

     $arTemplateParameters = array( 
      

     	"SUBSCRIBE_FORM_NAME" => Array( 
      

     		"NAME" => GetMessage("SUBSCRIBE_FORM_NAME"), 
      

     		"TYPE" => "HTML", 
      

     		"DEFAULT" => "Newsletter", 
      

     	), 
      

     ); 
      

     ?>

И не забудем как всегда про языковые файлы!

Шаблон компонента формы в таком случае будет выглядеть:

<?php if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die(); 
      

     
      

     if ($arResult['ACTION']['status']=='error') { 
      

     	ShowError($arResult['ACTION']['message']); 
      

     } elseif ($arResult['ACTION']['status']=='ok') { 
      

     	ShowNote($arResult['ACTION']['message']); 
      

     } 
      

     ?> 
      

     <div id="asd_subscribe_res" style="display: none;"></div> 
      

     <form action="<?= POST_FORM_ACTION_URI?>" method="post" id="newsletter"> 
      

     	<?= bitrix_sessid_post()?> 
      

     	<input type="hidden" name="asd_subscribe" value="Y" /> 
      

     	<input type="hidden" name="charset" value="<?= SITE_CHARSET?>" /> 
      

     	<input type="hidden" name="site_id" value="<?= SITE_ID?>" /> 
      

     	<input type="hidden" name="asd_rubrics" value="<?= $arParams['RUBRICS_STR']?>" /> 
      

     	<input type="hidden" name="asd_show_rubrics" value="<?= $arParams['SHOW_RUBRICS']?>" /> 
      

     	<input type="hidden" name="asd_not_confirm" value="<?= $arParams['NOT_CONFIRM']?>" /> 
      

     	<input type="hidden" name="asd_key" value="<?= md5($arParams['JS_KEY'].$arParams['RUBRICS_STR'].$arParams['SHOW_RUBRICS'].$arParams['NOT_CONFIRM'])?>" /> 
      

     <label><?=$arParams['SUBSCRIBE_FORM_NAME']?></label> 
      

     	<div class="clearfix"> 
      

     	<input type="text" name="asd_email" value="" /> 
      

     	<a href="#" onclick="document.getElementById('newsletter').submit()" class="btn btn_"><?=GetMessage("ASD_SUBSCRIBEQUICK_PODPISATQSA")?></a> 
      

     	</div> 
      

     	<?if (isset($arResult['RUBRICS'])):?> 
      

     		<br/> 
      

     		<?foreach($arResult['RUBRICS'] as $RID => $title):?> 
      

     		<input type="checkbox" name="asd_rub[]" id="rub<?= $RID?>" value="<?= $RID?>" /> 
      

     		<label for="rub<?= $RID?>"><?= $title?></label><br/> 
      

     		<?endforeach;?> 
      

     	<?endif;?> 
      

     </form>

Если при этом в параметрах компонента поставить галочку напротив пункта "Подписывать без подтверждения", то наша форма станет самодостаточной и для подписки не потребуется подтверждения (перехода по ссылке в E-mail).

Однако обратим внимание на небольшой недостаток - русское слово "подписаться" длиннее английского "subscribe", поэтому надпись на кнопке едва не выходит за пределы!

надпись на кнопке SUBSCRIBE не вмещается после локализации на русский язык

Исправим это самым простым способом - уменьшим поле ввода и увеличим кнопку на 20 пикселей в ширину соответственно (чтобы суммарная ширина формы не изменилась). Для этого в основном файле стилей шаблона /bitrix/templates/stylish/css/style.css придётся поправить 2 стиля:

form#newsletter input
form#newsletter input { width: 224px; }
form#newsletter a.btn_
form#newsletter a.btn_ { margin-top: 0; width: 91px; text-align: center; padding-right: 0; padding-left: 0; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; }

Теперь осталось только вставить в шаблон сайта вызов компонента вместо HTML Разметки формы:

<?$APPLICATION->IncludeComponent("asd:subscribe.quick.form", "bottom", array( 
      

     	"RUBRICS" => array( 
      

     		0 => "1", 
      

     	), 
      

     	"SHOW_RUBRICS" => "N", 
      

     	"INC_JQUERY" => "N", 
      

     	"NOT_CONFIRM" => "Y", 
      

     	"SUBSCRIBE_FORM_NAME" => "Подписка на новости" 
      

     	), 
      

     	false 
      

     );?>

Недостатки метода:

Использование чужих компонентов с непроверенным кодом вместо системных

Достоинства метода:

Быстрота интеграции дизайна
Лаконичность и понятность кода

Данный метод включён в репозиторий для урока 6 на GitHub как единственный масштабируемый с точки зрения разработки (несмотря на свои недостатки).

Однако, я не готов был бы использовать данный метод для собственных проектов при наличии времени для разработки собственного аналогичного решения.

На этом завершим 6 урок, посвящённый интеграции формы email подписки из адаптивного Bootstrap шаблона в 1С-Битрикс.

Мы не разобрали последний 4й вариант (наиболее правильный идеологически на мой взгляд, однако и наиболее трудоёмкий) - разработка собственного компонента или кастомизация системного.

Результаты урока мы как всегда можете скачать в репозитории на GitHub.

Задойный А.В.

Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 6

В 6 уроке мы произведём интеграцию дизайна для формы e-mail подписки. <img src="/upload/medialibrary/097/0976b97f3e1897f14e47b74c7caa072a.png" title="Форма подписки на e-mail" hspace="5" vspace="5" border="0" alt="Форма подписки на e-mail" width="485" height="195" /> К сожалению, Подписки и Рассылки, на мой взгляд реализован не лучшим образом, поэтому для решения данной задачи существует как минимум 4 разных способа: <ul> <li>Использовать стандартные компоненты (subscribe.form и subscribe.edit)</li> <li>Использовать форму стороннего сервиса (например, MailChimp)</li> <li>Использовать сторонний модуль (например, asd.subscribequick Антона Долганина из MarketPlace)</li> <li>Кастомизировать компонент subscribe.edit или написать свой</li> </ul> Мы постараемся описать все варианты, если позволят наши силы. У каждого из методов мы укажем сильные и слабые стороны. <h2>Использование стандартных компонентов</h2> К сожалению, это тот случай, когда использование стандартного функционала вряд ли себя оправдывает. Мы опишем данный способ, однако он достаточно трудоёмок и мы коснёмся лишь той части реализации, которая отвечает за форму подписки, использующуюся в шаблоне. Описание под спойлером: <a onclick="$('#spoiler_1').slideToggle('slow');" href="javascript://" >Свернуть/Развернуть</a> <div style="border: 1px dashed; padding: 10px; display: none;" id="spoiler_1"> Разместим на тестовой странице 1.php компонент bitrix:subscribe.form с шаблоном .default. Скопируем шаблон компонента в шаблон сайта, переименовав в bottom. Обратим внимание на особенности этого компонента: <ul> <li>В обязательном порядке выводятся чек-боксы с выбором подписки, которые пользователь может поставить или убрать</li> <li>Выводятся чекбоксы ВСЕХ активных рассылок (или ещё и неактивных, если установить параметр компонента). Параметр компонента не может задать фильтр по рассылкам заранее.</li> </ul> <img src="/upload/medialibrary/025/0250cd05f59c02bc15014c6f65eb2d9e.png" title="чек-боксы выбора рассылки в форме подписки 1С-Битрикс" hspace="5" vspace="5" border="0" alt="чек-боксы выбора рассылки в форме подписки 1С-Битрикс" width="337" height="205" /> Поскольку в нашем дизайне заложена лаконичная форма, то всё лишнее нам придётся убрать. Для этого создадим файл .parameters.php в шаблоне компонента и добавим туда следующий код: <div style="border: 1px solid; padding: 10px;"><code class="php"><?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); $arRubrics = array(); if (CModule::IncludeModule('subscribe')) { $rsRub = CRubric::GetList(array('SORT' => 'ASC', 'NAME' => 'ASC')); while ($arRub = $rsRub->Fetch()) { $arRubrics[$arRub['ID']] = $arRub['NAME']; } } ?></code></div> Мы проверяем подключен ли модуль Подписок и рассылок (на всякий случай), после чего считываем из него список рубрик, существующих в системе в переменную $arRubrics. Далее объявим параметр типа список, значения которого возьмём из $arRubrics: <div style="border: 1px solid; padding: 10px;"><code class="php"><?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); $arTemplateParameters ["RUBRICS"] = array( 'PARENT' => 'BASE', 'NAME' => GetMessage('RUBRICS'), 'TYPE' => 'LIST', 'VALUES' => $arRubrics, 'MULTIPLE' => 'Y' ); ?></code></div> Результат наших действий при редактировании параметров компонента: <img src="/upload/medialibrary/191/1918c07a767d1c13b3c52cfd2995c97e.png" title="выбор рубрики рассылки в параметрах компонента формы подписки" hspace="5" vspace="5" border="0" alt="выбор рубрики рассылки в параметрах компонента формы подписки" width="564" height="494" /> Ну и не забудем про заголовок формы - его тоже неплохо было бы задать параметром: <div style="border: 1px solid; padding: 10px;"><code class="php"><?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); $arTemplateParameters["SUBSCRIBE_FORM_TITLE"] = array( 'PARENT' => 'BASE', "NAME" => GetMessage("SUBSCRIBE_FORM_TITLE"), "TYPE" => "HTML", "DEFAULT" => "Newsletter", ); ?></code></div> Тогда целиком файл параметров будет выглядеть так: <div style="border: 1px solid; padding: 10px;"><code class="php"><?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die(); $arRubrics = array(); if (CModule::IncludeModule('subscribe')) { $rsRub = CRubric::GetList(array('SORT' => 'ASC', 'NAME' => 'ASC')); while ($arRub = $rsRub->Fetch()) { $arRubrics[$arRub['ID']] = $arRub['NAME']; } } $arTemplateParameters ["RUBRICS"] = array( 'PARENT' => 'BASE', 'NAME' => GetMessage('RUBRICS'), 'TYPE' => 'LIST', 'VALUES' => $arRubrics, 'MULTIPLE' => 'Y' ); $arTemplateParameters["SUBSCRIBE_FORM_TITLE"] = array( 'PARENT' => 'BASE', "NAME" => GetMessage("SUBSCRIBE_FORM_TITLE"), "TYPE" => "HTML", "DEFAULT" => "Newsletter", ); ?></code></div> Не забудем создать языковые файлы для параметров. Теперь кастомизируем шаблон формы. Если присмотреться к дефолтному шаблону, то мы увидим, что самый просто способ избавиться от чек-боксов - задать для соответствующих полей type="hidden". После небольших косметических изменений получим: <div style="border: 1px solid; padding: 10px;"><code class="php"><?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?> <?echo bitrix_sessid_post();?> <form id="newsletter" action="<?=$arResult["FORM_ACTION"]?>"> <label><?=$arParams['SUBSCRIBE_FORM_TITLE']?></label> <div class="clearfix"> <?foreach($arParams["RUBRICS"] as $RubID => $RubValue):?> <input type="hidden" name="sf_RUB_ID[]" id="sf_RUB_ID_<?=$RubValue["ID"]?>" checked value="<?=$RubValue["ID"]?>" /> <?endforeach;?> <input type="text" name="sf_EMAIL" size="20" value="<?=$arResult["EMAIL"]?>" title="<?=GetMessage("subscr_form_email_title")?>" /> <a href="#" onclick="document.getElementById('newsletter').submit()" class="btn btn_">subscribe</a> </div> </form> </code></div> Если сейчас испытать получившуюся конструкцию, то мы увидим, что хотя она успешно работает, но подписки пользователя на рассылку не происходит. Причина кроется в определённой ущербности данного шаблона самого по себе. Он не способен подписать никого и ни на что. Это по сути форма, которая перенаправляет на другую страницу и передаёт ряд параметров (и лишь наши манипуляции с .parameters.php научили её хотя бы минимальной гибкости с рубриками. Если открыть документацию, то мы увидим, что принимающей стороной предполагается компонент bitrix:subscribe.edit. При этом данный компонент выполнят несколько функций: <ul> <li>Осуществляет подписку на рассылку ( + активирует событие, отправляющее на почту подтверждение подписки)</li> <li>Позволяет редактировать подписки</li> <li>Осуществляет отписку</li> <li>Осуществляет подтверждение подписки (при переходе по ссылке из письма или при вводе кода активации)</li> </ul> При этом мы можем обратить внимание, что в почтовом шаблоне и настройках модуля "Подписки и рассылки" фигурирует каноническое местонахождение этого скрипта: /about/subscr_edit.php На мой взгляд это очень неудобно, однако в рамках примера мы не станем редактировать настройки модуля или почтового шаблона. Создадим файл /about/subscr_edit.php и разместим в нём компонент bitrix:subscribe.edit. В принципе этого достаточно и мы получили вполне работоспособную схему, пусть и не очень красивую (подписка будет делаться в 3 шага, считая подтверждение приходящее на E-mail). Для того чтобы "причесать" внешний вид второй формы скопируем её шаблон .default в шаблон сайта, переименовав в template. Далее добавим для всех кнопок класс class="btn btn_", а заголовкам <h2> и получим: <img src="/upload/medialibrary/400/400fb6a6f0fbe86c9fe346aa169b5377.png" title="Страница редактирования подписки на e-mail рассылку 1С-Битрикс" hspace="5" vspace="5" border="0" alt="Страница редактирования подписки на e-mail рассылку 1С-Битрикс" width="680" height="573" /> Фактически на этом можно завершить реализацию нашей задачи. Однако, мне она кажется неоптимальной. Напомним: Плюсы метода: <ul> <li>Используются системный компоненты и шаблоны</li> <li>Линейный сценарий интеграции дизайна (действий много, однако они типовые)</li> </ul> Минусы метода: <ul> <li>3 шаговая подписка (2 действия на сайте + подтверждение по e-mail)</li> </ul> Данная реализация НЕ ВОЙДЁТ в демо-материалы нашего репозитория на Github, однако в репозиторий войдут 2 шаблона компонентов (поэтому вы сами сможете разместить эти компоненты на страницах и в шаблоне): <ul> <li>Шаблон template компонента bitrix:subscribe.edit</li> <li>Шаблон bottom компонента bitrix:subscribe.form</li> </ul> </div> <h2>Использование сторонних инструментов подписки\рассылки (на примере MailChimp)</h2> Данная методика не может быть использована в качестве основной в силу своей не универсальности - далеко не каждый проект может позволить себе осуществлять e-mail рассылку с помощью стороннего сервиса (да и просто хранение персональных данных вовне не всегда возможно). Однако, сервис мейл-директа MailChimp является одним из известнейших и старейших в мире. Их функционал пожалуй лучший в своём роде, поэтому для своего проекта мы склонны использовать именно этот сценарий. Однако поскольку не все владеют свободно английским, могут возникнуть проблемы в работе с самим сервисом и его аналитикой. В этом случае следует использовать другой сервис, например отечественный Unisender (возможно мы отдельно опишем процесс интеграции дизайна формы подписки для него, если в этом возникнет потребность). Описание интеграции с MailChimp Так же под пойлером: <a onclick="$('#spoiler_2').slideToggle('slow');" href="javascript://" >Свернуть/Развернуть</a> <div style="border: 1px dashed; padding: 10px; display: none;" id="spoiler_2"> Не станем описывать процесс регистрации в сервисе MailChimp - он довольно тривиален. Будем исходить из предположения, что аккаунт в системе у нас уже есть. Создадим список подписчиков для рассылки в MailChimp (пункт меню "List", кнопка "Create List" над всеми заведёнными в системами списками): <img src="/upload/medialibrary/ca9/ca945e8a8d858ad0c29b280bf6f6f0e2.png" title="Создаём список рассылки MailChimp" hspace="5" vspace="5" border="0" alt="Создаём список рассылки MailChimp" width="680" height="369" /> Заполните простую анкету для списка подписчиков (помните, не стоит заполнять её нереальными или бессмысленными данными - помимо проверки системы, очень строгой к спаму, эти поля могут понадобиться вам самим в будущем для работы, если списком будет несколько и потребуется автоматизировать процесс): <img src="/upload/medialibrary/bc7/bc7d4f0a0e5b32f29566eeb534496425.png" title="анкета для создания списка подписчиков MailChimp" hspace="5" vspace="5" border="0" alt="анкета для создания списка подписчиков MailChimp" width="635" height="800" /> Теперь создадим форму подписки из которой люди попадут в наш список: <img src="/upload/medialibrary/c58/c5851739b92d1586344d3d691467eed5.png" title="создадим форму подписки" hspace="5" vspace="5" border="0" alt="создадим форму подписки" width="680" height="542" /> Так же мы всегда можем перейти к созданию формы нажав на название списка рассылки и выбрав пункт меню "Signup forms". Далее нас интересует пункт "Embedded forms": <img src="/upload/medialibrary/40d/40d6f8e7a5f9a8aa66bf7e9697dd8c76.png" title="Embedded forms в Mailchimp" hspace="5" vspace="5" border="0" alt="Embedded forms в Mailchimp" width="680" height="518" /> Поскольку нам всё равно предстоит интегрировать свой дизайн - просто воспользуемся самой лаконичной из всех форм - "Super Slim". Фактически она представляет из себя только заголовок, поле для ввода e-mail и кнопку - ровно то, что нам нужно! <img src="/upload/medialibrary/b2e/b2e77cc3823a42f878cddf78d8893014.png" title="Создаём Super Slim форму в Mailchimp" hspace="5" vspace="5" border="0" alt="Создаём Super Slim форму в Mailchimp" width="680" height="625" /> Разместим код формы на нашей тестовой странице 1.php. Получится нечто вроде: <div style="border: 1px solid; padding: 10px;"><code class="HTMP"> <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="http://coffeediz.us3.list-manage1.com/subscribe/post?u=f68ed39bf61bbea689307b589&amp;id=b00ecec414" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <label for="mce-EMAIL">Subscribe to our mailing list</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>  <div style="position: absolute; left: -5000px;"><input type="text" name="b_f68ed39bf61bbea689307b589_b00ecec414" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </form> </div> </code></div> Как можно заметить код формы содержит помимо прочего уникальный УРЛ, предоставляемый сервисом MailChimp, переход на который и передача в качестве параметра e-mail и означает факт подписки пользователем (конечно же, дабы убедиться в добровольности происходящего на этот e-mail потом придёт письмо с кодом подтверждения, но с этим мы так же разберёмся). Именно поэтому, мы не сможем предоставить в конце компонент для репозитория. Проще всего провести процесс интеграции, пользуясь этим уроком. Слегка подрихтуем исходный код (не забудем про строку с комментарием "real people should not fill this in and expect good things - do not remove this or risk form bot signups" - она отмечает поле, которое защищает нас от спама - его будут заполнять ТОЛЬКО роботы): <div style="border: 1px solid; padding: 10px;"><code class="HTMP"><form action="http://coffeediz.us3.list-manage1.com/subscribe/post?u=f68ed39bf61bbea689307b589&amp;id=b00ecec414" method="post" id="newsletter" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <label>Newsletter</label> <div class="clearfix"> <div style="position: absolute; left: -5000px;"><input type="text" name="b_f68ed39bf61bbea689307b589_b00ecec414" value=""></div> <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Enter e-mail here" required> <a href="#" onclick="document.getElementById('newsletter').submit()" class="btn btn_">subscribe</a> </div> </form></code></div> Замените этим кодом форму подписки в HTML вёрстке. Для большей гибкости редактирования можно поместить данный код во включаемую область, подобно тому, как мы сделали в Уроке 2. Если сейчас заполнить эту форму, то в результате мы попадём на страницу сервиса MailChimp, где получим информацию о списке подписчиков, которую заполняли в начале: <img src="/upload/medialibrary/0fb/0fbd5515b113e311752212d21c6661f3.png" title="результат заполнения формы подписки MailChimp" hspace="5" vspace="5" border="0" alt="результат заполнения формы подписки MailChimp" width="614" height="428" /> Одновременно с этим нам на почту пришло письмо с подтверждением подписки (в котором необходимо перейти по ссылки): <img src="/upload/medialibrary/42f/42fd89b5e6f19bdd797f127cec014650.png" title="дефолтное письмо подтверждения подписки MailChimp" hspace="5" vspace="5" border="0" alt="дефолтное письмо подтверждения подписки MailChimp" width="680" height="618" /> Это всё прекрасно, но не можем же мы оставить всё как есть? Давайте вернёмся на несколько шагов назад к варианту выбора формы и зайдём в раздел "General forms": <img src="/upload/medialibrary/561/561a0bd2cab3a7eec7e018bcbb8f0698.png" title="General forms в Mailchimp (для создания кастомных страниц и письма подтверждения подписки)" hspace="5" vspace="5" border="0" alt="General forms в Mailchimp (для создания кастомных страниц и письма подтверждения подписки)" width="680" height="523" /> На открывшейся странице нас интересует выпадающий список "Forms and response emails". <img src="/upload/medialibrary/41f/41f24ef667f74fcbb168104e24fd0086.png" title="Forms and response emails - настраиваем страницы и письма подтверждения подписки в MailChimp" hspace="5" vspace="5" border="0" alt="Forms and response emails - настраиваем страницы и письма подтверждения подписки в MailChimp" width="597" height="601" /> Для начала обратим внимание на 3 пункта: <ol> <li>Signup "thank you" page (страница "спасибо за подписку", на которую пользователь попадает сразу после заполнения формы подписки)</li> <li>Opt-in confirmation email (письмо с подтверждением подписки)</li> <li>Confirmation "thank you" page (страница подтверждения подписки, куда пользователь попадает из ссылки в письме)</li> </ol> Как вы видите, вы можете настроить внешний вид всех страниц (отдельно в будущем рекомендуется настроить внешний вид страниц отписки и других полезных форм). Однако сейчас мы обратим внимание другую особенность страниц 1 и 3: <img src="/upload/medialibrary/f29/f294db3450ec7b9069e44efbc9b08f28.png" title="Перенаправление со страницы подтверждения подписки MailChimp" hspace="5" vspace="5" border="0" alt="Перенаправление со страницы подтверждения подписки MailChimp" width="680" height="484" /> В данном поле мы можем задать страницу на которую будет сразу перенаправлен пользователь с сервиса Mailchimp. Таким образом, нам не придётся конструировать страницы подтверждения подписки, а пользователи увидят ваш, уже привычный им сайт, а не непонятный внешний сервис. Рекомендуется оформить эти страницы так, чтобы предоставить пользователям подробную информацию о происходящем, а так же по возможности дать какой-нибудь бонус для поддержания лояльности вашему сервису (например, купон на скидку для интернет-магазинов или некий эксклюзивный материал для контентных ресурсов). Теперь займёмся вторым пунктом списка - письмом с подтверждением подписки. <img src="/upload/medialibrary/5d4/5d45b734eeda298c081300b1f549d7b8.png" title="Форма редактирования письма подтверждения подписки MailChimp" hspace="5" vspace="5" border="0" alt="Форма редактирования письма подтверждения подписки MailChimp" width="680" height="454" /> Во-первых, зададим технические поля, использующиеся в заголовке письма: <ul> <li>Имя отправителя</li> <li>E-mail отправителя</li> <li>Тема письма</li> </ul> А во-вторых, воспользуемся пунктом "Translate it" - он позволяет в автоматическом режиме перевести все поля формы или письма. Оставшиеся поля можно отредактировать с помощью визуального редактора прямо по месту: <img src="/upload/medialibrary/369/3699bb1be0ab2454c208156287cc63ac.png" title="использование визуального редактора для правки письма подтверждения подписки MailChimp" hspace="5" vspace="5" border="0" alt="использование визуального редактора для правки письма подтверждения подписки MailChimp" width="636" height="473" /> Аналогичным образом следует отредактировать все формы и письма, которые вы намерены использовать (рекомендуется создать для всех страниц\форм дубли на своём сайте в привычном пользователю интерфейсе и автоматически перенаправлять туда). Плюсы данного метода: <ul> <li>Простота реализации (небольшая правка HTML кода и включаемые области)</li> <li>Мощнейший функционал стороннего сервиса почтовых рассылок MailChimp (аналитика, A\B тестирования, договорённости с почтовыми провайдерами о приоритетах прохода писем, история рассылок, шаблоны и произвольный код для рассылок, а так же мощнейшие возможности по сегментации аудитории и многое, многое другое)</li> </ul> Минусы данного метода: <ul> <li>Сторонний сервис (ограничения англоязычного интерфейса, платность рассылок свыше определённого лимита, зависимость от провайдера и т.п.)</li> <li>Сложность интеграции на уровне компонентов (проще интегрировать форму заново, поменяв УРЛ напрямую в коде, чем оформить компонент, который забирал бы данные и настройки из аккаунта MailChimp)</li> </ul> Упомянутые выше минусы решения не позволяют оформить результаты данного урока в репозиторий на GitHub, однако для собственного сайта я бы предпочёл использование данного сервиса. </div> <h2>Использование сторонних модулей 1С-Битрикс (на примере модуля быстрой формы подписки Антона Долганина из MarketPlace)</h2> Одновременно простое и массштабируемое решение оно не может считаться на мой взгляд "каноническим", поскольку ставит ваш проект в зависимость от чужого кода (и в отличие от 1С-Битрикс разработчик этого кода не обязан поддерживать работоспособность своего детища и может изменить правила распространения уже после принятия вами решения об использовании модуля). Для некоторых проектов критичным является невозможность использования чужого кода без дополнительного аудита безопасности, поэтому такой модуль будет являться "чёрным ящиком". В данном случае имя автора модуля является лучшей гарантией надёжности, однако это редкое исключение и мы не рекомендуем считать данный способ каноническим. <a onclick="$('#spoiler_3').slideToggle('slow');" href="javascript://" >Свернуть/Развернуть</a> <div style="border: 1px dashed; padding: 10px;" id="spoiler_3"> Установим модуль из Маркета 1С-Битрикс (в случае, если не возникнет никаких претензий со стороны автора модуля мы включим его в наш GitHub репозиторий вместе с шаблоном сайта и демо-данными). В результате в нас появится новый компонент в списке компонентов (Сервисы ⇒Рассылки) - "Форма быстрой подписки" (asd:subscribe.quick.form). Разместим этот компонент на нашей тестовой странице 1.php и скопируем шаблон компонента в шаблон сайта, переименовав в bottom. Как видим, шаблон компонента очень лаконичен и натянуть на него нашу вёрстку - одно удовольствие! Обратите внимание, что пространство имён компонента не bitrix, а asd - именно так, в отдельном пространстве имён правильно оформлять собственные компоненты! И тогда путь к шаблону компонента в шаблоне сайта будет выглядеть: /bitrix/templates/stylish/components/asd/subscribe.quick.form/bottom/ Во-первых, не забудем вынести в параметры компонента заголовок формы, для этого создадим файл .parameters.php <div style="border: 1px solid; padding: 10px;"><code class="php"><? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die(); $arTemplateParameters = array( "SUBSCRIBE_FORM_NAME" => Array( "NAME" => GetMessage("SUBSCRIBE_FORM_NAME"), "TYPE" => "HTML", "DEFAULT" => "Newsletter", ), ); ?></code></div> И не забудем как всегда про языковые файлы! Шаблон компонента формы в таком случае будет выглядеть: <div style="border: 1px solid; padding: 10px;"><code class="php"><?php if(!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true)die(); if ($arResult['ACTION']['status']=='error') { ShowError($arResult['ACTION']['message']); } elseif ($arResult['ACTION']['status']=='ok') { ShowNote($arResult['ACTION']['message']); } ?> <div id="asd_subscribe_res" style="display: none;"></div> <form action="<?= POST_FORM_ACTION_URI?>" method="post" id="newsletter"> <?= bitrix_sessid_post()?> <input type="hidden" name="asd_subscribe" value="Y" /> <input type="hidden" name="charset" value="<?= SITE_CHARSET?>" /> <input type="hidden" name="site_id" value="<?= SITE_ID?>" /> <input type="hidden" name="asd_rubrics" value="<?= $arParams['RUBRICS_STR']?>" /> <input type="hidden" name="asd_show_rubrics" value="<?= $arParams['SHOW_RUBRICS']?>" /> <input type="hidden" name="asd_not_confirm" value="<?= $arParams['NOT_CONFIRM']?>" /> <input type="hidden" name="asd_key" value="<?= md5($arParams['JS_KEY'].$arParams['RUBRICS_STR'].$arParams['SHOW_RUBRICS'].$arParams['NOT_CONFIRM'])?>" /> <label><?=$arParams['SUBSCRIBE_FORM_NAME']?></label> <div class="clearfix"> <input type="text" name="asd_email" value="" /> <a href="#" onclick="document.getElementById('newsletter').submit()" class="btn btn_"><?=GetMessage("ASD_SUBSCRIBEQUICK_PODPISATQSA")?></a> </div> <?if (isset($arResult['RUBRICS'])):?> <?foreach($arResult['RUBRICS'] as $RID => $title):?> <input type="checkbox" name="asd_rub[]" id="rub<?= $RID?>" value="<?= $RID?>" /> <label for="rub<?= $RID?>"><?= $title?></label> <?endforeach;?> <?endif;?> </form></code></div> Если при этом в параметрах компонента поставить галочку напротив пункта "Подписывать без подтверждения", то наша форма станет самодостаточной и для подписки не потребуется подтверждения (перехода по ссылке в E-mail). Однако обратим внимание на небольшой недостаток - русское слово "подписаться" длиннее английского "subscribe", поэтому надпись на кнопке едва не выходит за пределы! <img src="/upload/medialibrary/106/106453f3c7606e806b77b288890d03bb.png" title="надпись на кнопке SUBSCRIBE не вмещается после локализации на русский язык" hspace="5" vspace="5" border="0" alt="надпись на кнопке SUBSCRIBE не вмещается после локализации на русский язык" width="360" height="104" /> Исправим это самым простым способом - уменьшим поле ввода и увеличим кнопку на 20 пикселей в ширину соответственно (чтобы суммарная ширина формы не изменилась). Для этого в основном файле стилей шаблона /bitrix/templates/stylish/css/style.css придётся поправить 2 стиля: <ul> <li>form#newsletter input <div style="border: 1px solid; padding: 10px;"><code class="css">form#newsletter input { width: 224px; }</code></div> </li> <li>form#newsletter a.btn_ <div style="border: 1px solid; padding: 10px;"><code class="css">form#newsletter a.btn_ { margin-top: 0; width: 91px; text-align: center; padding-right: 0; padding-left: 0; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-left-radius: 0px; }</code></div> </li> </ul> Теперь осталось только вставить в шаблон сайта вызов компонента вместо HTML Разметки формы: <div style="border: 1px solid; padding: 10px;"><code class="php"><?$APPLICATION->IncludeComponent("asd:subscribe.quick.form", "bottom", array( "RUBRICS" => array( 0 => "1", ), "SHOW_RUBRICS" => "N", "INC_JQUERY" => "N", "NOT_CONFIRM" => "Y", "SUBSCRIBE_FORM_NAME" => "Подписка на новости" ), false );?></code></div> Недостатки метода: <ul> <li>Использование чужих компонентов с непроверенным кодом вместо системных</li> </ul> Достоинства метода: <ul> <li>Быстрота интеграции дизайна</li> <li>Лаконичность и понятность кода</li> </ul> Данный метод включён в репозиторий для урока 6 на GitHub как единственный масштабируемый с точки зрения разработки (несмотря на свои недостатки). Однако, я не готов был бы использовать данный метод для собственных проектов при наличии времени для разработки собственного аналогичного решения. </div> На этом завершим 6 урок, посвящённый интеграции формы email подписки из адаптивного Bootstrap шаблона в 1С-Битрикс. Мы не разобрали последний 4й вариант (наиболее правильный идеологически на мой взгляд, однако и наиболее трудоёмкий) - разработка собственного компонента или кастомизация системного. Результаты урока мы как всегда можете скачать в репозитории на <noindex><a href="https://github.com/lexnekr/bitrixtemplate_stylish/tree/a75b7a8662dca4d7679d728aeeaf55863aa5f814" target="_blank" rel="nofollow" >GitHub</a></noindex>. <div style="text-align: right;"><a href="http://plus.google.com/+АлексейЗадойный?rel=author" target="_blank" >Задойный А.В.</a></div>