Продолжая тему предыдущей статьи, хочется поделиться проблемами, с которыми пришлось столкнуться при разработке 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С-Битрикс, а также сократить объем подгружаемых данных для каждой страницы.
