Начало Форма e-mail подписки в Битрикс
27 апреля 2016
2737
e-mail подписка, битрикс, форма e-mail подписки

Форма e-mail подписки в Битрикс

Сложность Рубрика 1С-Битрикс Браузеры

Всем привет!

Сегодня мы с Вами сделаем форму e-mail подписки в Битрикс. Увы, компонент "Подписки и Рассылки", на мой взгляд, реализован не лучшим образом, поэтому для решения данной задачи существует как минимум 4 разных способа:

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

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

 

ИСПОЛЬЗОВАНИЕ СТАНДАРТНЫХ КОМПОНЕНТОВ

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

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

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

Особенности компонента:

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

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

Для этого создадим файл .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>

 

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

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

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

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

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

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

/about/subscr_edit.php

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

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

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

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

 

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

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

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

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

 

ИСПОЛЬЗОВАНИЕ СТОРОННИХ ИНСТРУМЕНТОВ ПОДПИСКИ\РАССЫЛКИ (НА ПРИМЕРЕ MAILCHIMP)

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

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

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

 

ИСПОЛЬЗОВАНИЕ СТОРОННИХ МОДУЛЕЙ 1С-БИТРИКС (НА ПРИМЕРЕ МОДУЛЯ БЫСТРОЙ ФОРМЫ ПОДПИСКИ ИЗ MARKETPLACE)

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

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

Установим модуль из Маркета 1С-Битрикс. В результате у нас появится новый компонент в списке компонентов (Сервисы ⇒Рассылки) - "Форма быстрой подписки" (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).

Теперь осталось только вставить в шаблон сайта вызов компонента вместо 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 
);?>

 

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

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

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

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

 

Последний, 4й вариант - разработка собственного компонента или кастомизация системного (наиболее правильный идеологически на мой взгляд, однако и наиболее трудоёмкий) пока не будем рассматривать как раз таки из-за его трудоемкости, но в будущем все может быть)
До скорых встреч!





Алексей Копча