Телефон и email на сайте не нажимаются

Контакты меняются на сайтах чаще, чем что-либо ещё: переезжает офис, подключается новый оператор, заводится своя почта. И каждый раз всплывает одна из историй: номер не набирается, письмо на почту отправить не выходит. Один и тот же телефон приходится искать и править в нескольких местах, и в каком-то из них всё норовит остаться по-старому. Всё это примеры неправильного использования возможностей Битрикса: контакты поселились в вёрстке, и нормальное место для правки у них не выделено.

Причина
Почему номер не нажимается

Браузер не превращает текст в кнопку звонка сам по себе: если на странице просто текст +7 (391) 200-01-02, тап открывает выделение, набор не стартует. Задача - чтобы вокруг номера стояла ссылка tel:, вокруг почты - mailto:. Дальше телефонная программа, мессенджер или почтовый клиент подхватят сами.

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

• контакты вписаны в верстку header.php или footer.php - без ссылки, без включаемой области, менеджер не правит;
• включение сделано не компонентом - файл вставляется кодом шаблона как есть, вёрстка с tel: живёт, а правки из админки недоступны;
• стоит bitrix:main.include, но в файле контактов обычный текст без тегов: менеджер правит, а обёртку никто не вставил;
• ссылки уже есть, но вокруг них сложная верстка, которую менеджер сайта не понимает и не должен понимать: при очередной правке из Word или в визуальном редакторе href ломается.

Первый и второй случай лечатся одним действием: место встройки заменяем вызовом bitrix:main.include. Для третьего и четвертого у него делаются свои шаблоны: обёртку собирает код, в файле остаётся чистый текст. Дальше разберём по шагам, от вёрстки до файла с текстом.

Решение
Переносим контакты в область и делаем две обёртки

Шаг 1. Место встройки - двумя вызовами компонента

Откройте файл шаблона, где сейчас контакты (header.php или footer.php в большинстве шаблонов), найдите участок с ними и замените его двумя вызовами bitrix:main.include: один выводит телефон, второй - почту.

<?php $APPLICATION->IncludeComponent("bitrix:main.include", ".default", array(
    "AREA_FILE_SHOW" => "file",
    "PATH" => SITE_TEMPLATE_PATH."/include/telefon.php",
), false); ?>

<?php $APPLICATION->IncludeComponent("bitrix:main.include", ".default", array(
    "AREA_FILE_SHOW" => "file",
    "PATH" => SITE_TEMPLATE_PATH."/include/email.php",
), false); ?>

Второй аргумент вызова - имя шаблона компонента. По нему вызовы и отличают: сейчас у обеих областей стоит встроенный .default, а на шагах 2-4 у каждой появится свой шаблон. Путь в PATH указывается от корня сайта; SITE_TEMPLATE_PATH подставит путь вашего шаблона. Файл телефона лежит в include/telefon.php, почта - в include/email.php: для примера /local/templates/praktik/include/telefon.php.

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

Вызовов может быть столько, сколько мест с контактами: телефон в шапке и в подвале, адрес на разных страницах. Все вызовы с одинаковым PATH читают один и тот же файл: поправили текст в нём один раз - обновилось сразу во всех местах сайта. Одно правится - везде живёт.

Пока файлов области нет, на их месте пусто: компонент не создаёт файл сам, ошибки или заглушки не покажет - файлы появятся на шаге 5.

Шаг 2. Копируем шаблон компонента из меню

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

В меню нужен пункт «Копировать шаблон компонента» - щелчок откроет одноименный диалог. Поля в нём такие:

• поле «Название нового шаблона компонента» - вместо автоподстановки вписываем короткое имя telefon;
• «Копировать в шаблон сайта» - отмечен ваш текущий шаблон: для него и делается копия;
• галка «Применить новый шаблон компонента» - оставляем включенной. Она переписывает второй аргумент того вызова, у которого открыли меню: других вызовов на странице это не касается;
• «Перейти к редактированию шаблона» - удобно, чтобы не возвращаться.

Остальное оставляем как есть. После сохранения вызов в файле шаблона меняется сам: вторым аргументом теперь стоит telefon. Копия лежит в local/templates/<ваш-шаблон>/components/bitrix/main.include/telefon/template.php.

Шаг 3. Вставляем код обёртки телефона

Откройте скопированный шаблон из того же всплывающего меню - пункт «Редактировать шаблон компонента» (после копирования он появился). В шапке открывшегося редактора виден полный путь файла: он должен заканчиваться на .../bitrix/main.include/telefon/template.php - признак того, что открыт скопированный шаблон.

Вставьте листинг целиком:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
/** @var array $arParams */
/** @var array $arResult */
$this->setFrameMode(true);

if ($arResult["FILE"] === "") return;

$raw = file_get_contents($arResult["FILE"]);

// телефон: "+7 (391) 200-01-02" -> <a href="tel:...">
$raw = preg_replace_callback(
    '~\+?\d[\d\s()\-]{8,16}\d~u',
    function ($m) {
        $href = preg_replace('~[^\d+]~', '', $m[0]);
        return '<a href="tel:' . $href . '">' . $m[0] . '</a>';
    },
    $raw
);

echo $raw;

Что здесь происходит. При открытии страницы шаблон читает файл области, находит в тексте номер телефона и ставит вокруг него ссылку tel:. В файле остаётся обычный номер: менеджер правит его, как раньше правил любой текст, а ссылку при каждом показе собирает код.

В адрес ссылки попадают только цифры и плюс: пробелы, скобки и дефисы браузер в href переваривать не обязан, поэтому их выкидываем. Сам номер в тексте ссылки остаётся читаемым. Плюс в адресе обязателен: без + звонок с городского номера уйдёт не в ту страну.

Шаг 4. То же самое для почты

Повторите шаги 2-3 для второй области: курсор на область почты, «Копировать шаблон компонента», имя email, галка «Применить» - вставить листинг в новый шаблон:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
/** @var array $arParams */
/** @var array $arResult */
$this->setFrameMode(true);

if ($arResult["FILE"] === "") return;

$raw = file_get_contents($arResult["FILE"]);

// почта: "info@site.ru" -> <a href="mailto:...">
$raw = preg_replace(
    '~[\w.\-]+@[\w\-]+\.[\w.\-]{2,}~u',
    '<a href="mailto:$0">$0</a>',
    $raw
);

echo $raw;

Шаблоны различаются только искомым: телефонный оборачивает номер в tel:, почтовый - адрес вида info@site.ru в mailto:. Отличить копии легко. В вызове стоит имя шаблона; в пути файла - папка с его именем: .../main.include/telefon/ или .../main.include/email/.

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

Шаг 5. Файлы с текстом - через панель области

Файл области создаётся средствами самого компонента, из всплывающего меню. Чтобы новый файл получился чистым, без лишних строк от Битрикса, сначала подложим свой образец.

В админке откройте Контент > Структура сайта > Файлы и папки и создайте в папке /local/templates/<ваш-шаблон>/page_templates/ файл empty.php. Содержимое - ни одного символа: что лежит в образце, то и попадает в каждый создаваемый из него файл.

Теперь дополните оба вызова из шага 1 параметром EDIT_TEMPLATE (в форме настроек компонента он называется «Шаблон области по умолчанию»):

<?php $APPLICATION->IncludeComponent("bitrix:main.include", "telefon", array(
    "AREA_FILE_SHOW" => "file",
    "PATH" => SITE_TEMPLATE_PATH."/include/telefon.php",
    "EDIT_TEMPLATE" => "empty.php",
), false); ?>

Во второй вызов добавьте то же самое: имя шаблона email, путь .../include/email.php, тот же empty.php. Образец должен существовать заранее. Без него редактор может подставить содержимое от другого образца.

Сами файлы: наведите курсор на место области телефона, пункт «Добавить область» откроет окно «Редактирование включаемой области: {путь}» - введите номер и нажмите «Сохранить». Файл создаётся по сохранению, не по открытию окна. Для почты повторите то же самое с пунктом её области: путь в заголовке окна подскажет include/email.php. На этом файл готов.

+7 (391) 200-01-02

info@site.ru

Номера тестовые - подставите свои. Держите в файлах простой текст - телефон, почта, режим работы, без разметки и без ссылок: обёртку собирает шаблон.

Позже контакты правятся из того же меню пунктом «Изменить область»: тот же попап, тот же путь, правки видны гостям сразу.

Ловушка
Служебные строки в файле области

Если файл области создавался по образцу, где есть лишние строки Битрикса, они прилетают в файл вместе с вашими контактами. В поставке такой образец один, лежит в bitrix/templates/.default/page_templates/standard.php:

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Title");
?>

Text here....

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

Верх и низ файла открывают шапку и подвал целой страницы. Область с таким содержимым вставляет их вместе с контактами: на сайте появляется вторая шапка, повторы, съехавшие стили. Картина знакомая.

Коварство в том, что обычное окно области такие строки прячет, а при сохранении возвращает на место. Снаружи выходит, что файл «сломался сам». Увидеть файл целиком и вычистить его можно штатно: во всплывающем меню области пунктом «Изменить область как PHP», либо из админки - Контент > Структура сайта > Файлы и папки, найти файл и открыть его режимом «Редактировать как PHP». Оба способа сохраняют файл посимвольно: вы видите всё его содержимое и отвечаете за каждый знак, включая кавычки и скобки.

Ниже - три куска из образца: каждый в своём блоке, целиком.

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/header.php");
$APPLICATION->SetTitle("Title");
?>

Text here....

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/footer.php");?>

В файле должен остаться только ваш текст - номера, почта, режим работы. Вычищайте куски именно в режиме «как PHP»: обычный редактор области служебные строки прячет и при сохранении возвращает на место. Файлы, созданные по пустому образцу empty.php, чистые с самого начала - ловушка их не касается. Создать файл руками через SSH или FTP тоже можно, это вариант для разработчика: менеджеру он не нужен.

Кеш - собранная копия страницы, которую Битрикс хранит, пока не устареет. После правок шаблонов старая копия может отдаваться по-старому. Как чистить - разбор: кеш Битрикса: когда чистить и как не сломать.

Частые вопросы

Почему tel: не срабатывает на компьютере?

На компьютере без программы звонка клик не откроет ничего. Это нормальное поведение. Ссылка работает там, где есть набор номера: телефон, софт-фон, мессенджер со звонком.

А если номеров на странице несколько?

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

Что если держать телефон и почту в одном файле области?

Так работают: оба вызова получают одинаковый PATH, у каждого свой шаблон - телефонный обернёт номер, почтовый адрес. Один файл правится в одном месте, и текст меняется везде, где он выводится.