Битрикс как сделать шаблон для amp

1С-Битрикс и AMP страницы

Accelerated Mobile Pages (AMP) — технология, представленная корпорацией Google в 2015 году. Ее главной целью является ускорение загрузки сайтов на мобильных устройствах. В данной статье хотелось бы поделиться одним из способов внедрения технологии AMP страниц на примере сайта под управлением 1С-Битрикс.

Существует два способа реализации:

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

2. Если сайт уже создан и давно работает можно либо создать отдельный шаблон, либо адаптировать существующий

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

В случае работы с системой управления 1С-Битрикс есть ряд ограничений, с которыми сталкиваются разработчики.

Главной особенностью AMP страниц является запрет на подключение собственных скриптов и внешних файлов стилей. То есть от конструкции

$APPLICATION->ShowHead(false);

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

Ваши собственные стили должны загружаться на страницу напрямую, для этого удобно использовать следующую функцию, добавленную в файл /local/php_interface/init.php:

function BasIncludeFile($path) < if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path)) < $test = str_replace("..", SITE_TEMPLATE_PATH, file_get_contents($_SERVER['DOCUMENT_ROOT'] . $path)); $test = str_replace(PHP_EOL, '', $test); echo $test; >>

Как видно, дополнительно из файлов убираются переносы строк для экономии места. Использовать можно так:

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

RewriteRule ^amp/(.*)$ /amp.php [L,NC]

Данное правило переадресовывает все запросы с нужным префиксом в адресе в файл amp.php, в котором мы можем сделать все необходимые приготовления. Если мы внедряем технологию на уже работающий сайт, будет удобно перед показом страницы пропускать контент через фильтры для замены всех тегов img на amp-img, iframe на amp-img и так далее.

Полезные статьи в сфере веб-разработки и новости студии

Интернет магазин «KENETIK» 05 февраля 2024

Компания занимается продажей оборудования для интернет соединения и видеонаблюдения Нами выполнено…

Компания «Домашнее море» 05 февраля 2024

Компания занимается продажей бассейнов, оборудования и аксессуаров к ним. Среди представленных на с…

Реймакс 23 декабря 2023

Перенос сайта студии Реймакс с системы управления сайтом 1С-Битрикс на Python/Django Нами выполнен…

Обзор обновления aveCRM 7.804 января 2024
Тонкости в работе с 1С-Битрикс 302 ноября 2023
Обзор обновления aveCRM 7.725 сентября 2023

Вы готовы начать работу или получить консультацию?

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

Создание AMP Google для сайта на платформе 1С-Битрикс (в частности для интернет-магазиа)

Для поиска ошибок AMP-верстки очень помогает расширение AMP Validator для Chrome, рекомендую для установки.

Для поиска только используемого CSS-кода (а нам нельзя превышать 50 Кб) я использовал расширение CSS Used, также рекомендую.

Проверка страниц осуществляется тут — https://search.google.com/test/amp

Еще один валидатор AMP — https://validator.ampproject.org/

Вкратце по css: убираем !important .

Для форм

Включаем в шаблон

Если необходимо выполнить несколько действий по нажатию на элемент, пишем их через запятую. Пример: on=»submit-success:amp-obratnij-zvonok.close,amp-obratnij-zvonok-success»

Если данные отправляются c помощью Ajax-а методом POST, необходимо:

Вместо атрибута action использовать action-xhr
Адрес обязательно должен начинаться с протокола https (либо использовать относительные пути)
Если мы отдаём json, то обязательно нужно указать заголовок Content-Type: application/json; charset=utf-8 (например в функции header)
В заголовках крайне желательно указать Access-Control-Allow-Origin. Сразу покажу решение которое мне пригодилось, чтобы обрабатывающий ajax запрос скрипт проходил CORS проверку по разным доменам или по разным протоколам http/https пишем в него в начало:

header(«Access-Control-Allow-Credentials: true»); $http_origin = $_SERVER[‘HTTP_ORIGIN’]; $allowed_http_origins = array( «http://www.test.ru», «http://dev.test.ru», «https://www.test.ru», «https://dev.test.ru», ); if (in_array($http_origin, $allowed_http_origins))

В форме обязательно должен быть атрибут target (или _top или _blank)

Есть особенности указания action

Для изображений указываем amp-img, тип responsive (адаптивный) или intrinsic (встроенный), а так же ширину и высоту (width, height). Для responsive можно указывать соотношение сторон.

Убираем навешанные события на элементы, всякие onclick=». » и пр.

Убираем весь кастомный JS-код

Чтобы убрать часть JS-кода сбора статистики от Битркса используем обработчики события:

// удяляем скрипт ядра для AMP страниц сайта function ampDeleteKernelJs(&$content) < global $USER, $APPLICATION; if((is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/amp/") === false) return; if($APPLICATION->GetProperty("save_kernel") == "Y") return; // НАРОД, внимание. чтобы подсветка синтаксиса не ругалась я заменил в регулярке символ < на ЗНАК_МЕНЬШЕ $content = preg_replace('/ЗНАК_МЕНЬШЕscript[^>]+?>var\s_ba\s=\s_ba[^ЗНАК_МЕНЬШЕ]+ЗНАК_МЕНЬШЕ\/script>/', "", $content); $content = preg_replace("/\n/", "\n\n", $content); > // также необходимо зарегестрировать сам обработчик (например в init.php) AddEventHandler('main', 'OnEndBufferContent', [__CLASS__, 'ampDeleteKernelJs']);

Не забываем указать мета-тег , т.к. он у нас стандартно должен был подключаться в ShowHead(), а мы его не используем.

делаем отдельную папку

создаем отдельный шаблон

настраиваем показ шаблона в зависимости от адреса

Как добавить кастомный/произвольный JavaScript в AMP Google

Для этого необходимо сначала подключить соответствующую библиотеку

В случае Битрикса для этого я использовал $Asset->addString() в header.php.

Мы вставляем нужный нам код на страницу в тегах

Оборачиваем кусок кода над которым будем производить действия с помощью

Где в script указываем наш id скрипта.

Далее нужно указать meta-тэг с хешем нашего JS-а. Хеш можно посмотреть в ошибках в консоли если запустить скрипт без мета-тега.

Мета-тег в Битриксе я добавлял с помощью $Asset->addString(«тут мета-тег»)

А вообще можно (наверное даже лучше) добавлять кастомный подключаемый скрипт по примеру:

В head добавляем

ShowProperty("amp_js");?>

В целом можно разбить на 2 разные функции, но мне так удобней

/* * $path - путь до файла, если js то путь до файла на внешнем сервере, если css, то путь от корня сайта * Добавление файла в тело html * Внутри идет проверка на js и css и в соответствии с этим определенный тип вставки файла в документ * Author: www.lexa.pro */ if(!function_exists('ampIncudeFile')) < function ampIncudeFile($path = "") < global $APPLICATION; $path_info = pathinfo($_SERVER['DOCUMENT_ROOT'] . $path); if($path_info["extension"] == "css") < if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path)) < $ampCss = $APPLICATION->GetPageProperty("amp_css"); // текущие стили $ampCss .= "\r\n----- Start File: " . $path . " -----\r\n \r\n"; // подключаем новые $ampCss .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $path) . "\r\n"; // подключаем новые $APPLICATION->SetPageProperty("amp_css", $ampCss); > > elseif($path_info["extension"] == "js") < preg_match('/v0\/(.*)\-/', $path, $found_ce); $customElement = $found_ce[1]; // НАРОД, внимание. чтобы подсветка синтаксиса не ругалась я заменил в регулярке символ < на ЗНАК_МЕНЬШЕ $ampJs = $APPLICATION->GetPageProperty("amp_js"); // текущие скрипты $ampJs .= "ЗНАК_МЕНЬШЕscript data-skip-moving=\"true\" async src=\"".$path."\" custom-element=\"".$customElement."\">ЗНАК_МЕНЬШЕ/script> \r\n"; // подключаем новые $APPLICATION->SetPageProperty("amp_js", $ampJs); > > > // и пример вызова //js - Внешний путь до файла ampIncudeFile("https://cdn.ampproject.org/v0/amp-accordion-0.1.js"); ampIncudeFile("https://cdn.ampproject.org/v0/amp-bind-0.1.js"); //css - Путь от корня ampIncudeFile("/local/templates/temp/l/card-.css"); ampIncudeFile("/local/templates/temp/l/choose-page.css");

АМП-страницы на примере решения Некстайп: Альфа

В новой версии решения Некстайп: Альфа 1.0.5 был внедрен шаблон AMP-страниц для детальной страницы каталога. Сегодня остановимся на этом функционале подробнее.

AMP (Accelerated Mobile Pages/Ускоренные мобильные страницы) — это страницы, которые Google хранит и загружает из специального кеша.
Главным преимуществом таких страниц является моментальная скорость загрузки, что в последствии положительно влияет на поведенческие факторы.

Начиная с версии 1.0.5 в решении Некстайп: Альфа доступен шаблон AMP страниц для детальной карточки товара. Шаблон добавляется автоматически во время установки готового решения либо обновлением текущего до версии 1.0.5 и более.

Чтобы настроить шаблон AMP страниц для вашего сайта, необходимо перейти в список сайтов “Настройки” > “Настройки продукта” > “Сайты” > “Список сайтов” и выбрать сайт, на котором Вы хотите использовать AMP страницы.

В настройках шаблонов сайта выбрать шаблон Некстайп: Альфа AMP, тип условия задать “Параметр в URL”, а в качестве условия прописать “amp=Y” и нажать “Сохранить”.

Теперь на сайте будет открываться шаблон AMP страниц в карточке товара, если в URL будет присутствовать параметр amp=Y.

Так выглядит обычный шаблон карточки товара:

А так выглядит шаблон AMP страницы для карточки товара с параметром amp=Y:

Проверить страницу AMP на наличие ошибок вы можете в с помощью инструмента проверки AMP страниц от Google .

После этого, убедитесь, что в файле robots.txt нет запретов для индексации страниц АМП.
Как только роботы Google обойдут и добавят в индекс данные страницы, они появятся в результатах поиска.

Помимо внедрения шаблона, мы добавили другие новинки и улучшения в версию Некстайп: Альфа 1.0.5:
-доработан функционал оптимизации JS и CSS (опции доступны в настройках решения)
— в блоке набора на детальной странице добавлен вывод свойств основного товара, если он является торговым предложением

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

Настройка AMP страниц

Текущую редакцию Вашего 1С-Битрикс можно просмотреть на странице Обновление платформы ( Marketplace > Обновление платформы ).

Ограничений нет

AMP (Accelerated Mobile Pages/Ускоренные мобильные страницы) — это страницы, главным преимуществом которых является высокая скорость загрузки на мобильных устройствах. Скорость обеспечивается тем, что Google хранит такие страницы в специальном кэше.

Чтобы настроить шаблон для AMP страниц для вашего сайта, необходимо перейти в список сайтов “Настройки” > “Настройки продукта” > “Сайты” > “Список сайтов” и выбрать сайт, на котором Вы хотите использовать AMP страницы.

В настройках шаблонов сайта выбрать шаблон «Некстайп: Альфа AMP», тип условия задать “Параметр в URL”, а в качестве условия прописать “amp=Y”, как на скриншоте. Нажать “Сохранить”.

Так выглядит обычный шаблон карточки товара:

amp 2.png

А так выглядит шаблон AMP страницы для карточки товара с параметром amp=Y:

amp 3.png

Проверить страницу AMP на наличие ошибок вы можете в с помощью инструмента проверки AMP страниц от Google.

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

Пользовательские комментарии

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

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала.