AMP и 1С-Битрикс. Технические подробности

AMP и 1С-Битрикс. Технические подробности

Продолжая тему предыдущей статьи, хочется поделиться проблемами, с которыми пришлось столкнуться при разработке AMP (Accelerated Mobile Pages / Ускоренные Мобильные страницы) на 1С-Битрикс, а так же способами их решения.

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


Стандартное подключение скриптов и стилей

Первая проблема, с которой пришлось столкнуться, это запрет AMP на подключение сторонних скриптов (js) и использование внешних стилей (css). Соответственно, от использования функции <?$APPLICATION->ShowHead(false)?> пришлось отказаться. Однако хотелось сохранить корректную работу панели администрирования и вывод метаданных на страницах сайта. Для этого функция была разложена на части, в шапке были отдельно выведены метатеги через:

$APPLICATION->ShowMeta("robots", false, false);
$APPLICATION->ShowMeta("keywords", false, false);
$APPLICATION->ShowMeta("description", false, false);

Для администраторов сайта подключен вывод стилей и скриптов:

global $USER;

if ($USER->IsAdmin())
{
   $APPLICATION->ShowCSS(true, false);
   $APPLICATION->ShowHeadStrings();
   $APPLICATION->ShowHeadScripts();
}

Это позволило выполнить требования AMP, сохранить работоспособность панели администрирования 1С-Битрикс и вывод метатегов для страниц сайта.


Подключение AMP скриптов

Мне всегда нравилась возможность Битрикса подключать скрипты в шаблонах компонентов, т.е. выводить только те скрипты, которые нужны в данный момент. Допустим, скрипт слайдера главной страницы подключается только на главной странице и нигде больше. Это позволяет уменьшить объем загружаемых данных и ускорить загрузку страницы. Кроме того, при подключении скриптов, которые не используются на странице, отладчик AMP выдает предупреждения. Поэтому важно иметь возможность подключить на странице только те скрипты, которые относятся непосредственно к ней.

Данный вопрос был решен следующим образом:

1. Скрипты, которые подключаются на каждой странице, были напрямую прописаны в шапке шаблона:

<script data-skip-moving="true" async src="https://cdn.ampproject.org/v0.js"></script> // основной скрип AMP

<script data-skip-moving="true" async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" custom-element="amp-sidebar"></script> // скрипт меню

<script data-skip-moving="true" async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" custom-element="amp-analytics"></script> // скрипт аналитики

2. Скрипты, которые относятся только к одной конкретной странице, были выведены следующим образом:

В /local/php_interface/init.php создана функция, которая отвечает за проверку существования файла и подключает его:

function BasIncludeFile($path)
{
  if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path))
    include($_SERVER['DOCUMENT_ROOT'] . $path);
}

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

$jsPath = '/js' . $basPageLink . 'index.php';

BasIncludeFile(SITE_TEMPLATE_PATH . $jsPath);

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

Например, для страницы «Ответы на вопросы», которая содержит аккордеон, мы создаем файл /js/about-me/faq/index.php и добавляем в него:

<script data-skip-moving="true" async src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js" custom-element="amp-accordion"></script>

Отдельно стоит обратить внимание на атрибут data-skip-moving="true", который запрещает Битриксу перемещать скрипты вниз страницы, т.к. при разработке AMP шаблона все скрипты должны быть подключены в шапке.


Подключение стилей шаблона и отдельных страниц

По правилам AMP все стили страницы должны быть вставлены в код страницы, а подключение сайтов со стилями недопустимо. Однако хотелось сохранить файлы .css для более удобного их редактирования. Поэтому в коде подключение пришлось осуществить следующим образом:

$cssPath = '/css' . $basPageLink . 'index.css';

<style amp-custom>
   <?BasIncludeFile(SITE_TEMPLATE_PATH . "/css/main.css");?> // Общие стили шаблона
   <?BasIncludeFile(SITE_TEMPLATE_PATH . $cssPath);?> // стили данной страницы
</style>


Подводя итог, стоит отметить, что данный метод позволил сохранить функционал панели администрирования 1С-Битрикс, а также сократить объем подгружаемых данных для каждой страницы.


Читайте также


AMP и 1С-Битрикс. Ускоряемся!

Довольно давно возникало желание опробовать технологию AMP (Accelerated Mobile Pages / Ускоренные Мобильные страницы) в действии, и только недавно до этого дошли руки. В данном цикле статей хотелось бы поделиться своим опытом внедрения AMP верстки на 1С-Битрикс, отметить некоторые сложности и методы их решения, показать результаты в цифрах.

Назад к списку