Включить эмуляцию навигации браузера битрикс
С версии битрикса 17.5.10 добавился новый функционал по работе с аяксом. Теперь можно вызвать аяксом произвольный метод модуля или произвольный метод компонента без необходимости выполнения шаблона сайта. То есть по запросу выполнится только немного служебного кода и собственно сам метод.
В js библиотеке битрикса есть методы которые самостоятельно формируют запрос, запись получается слегка короче, чем при написании запроса другими способами. Я покажу примеры запросов на битриксовой библиотеке и на jquery
На конференции битрикса в марте объяснялись нововведения в общих чертах, кому для понимания удобнее смотреть видео, вот:
На мой взгляд в виде текста такую информацию воспринимать удобнее. Поэтому я решил написать статью и раскрыть тему чуть более подробно
Запрос к компоненту
Для начала рассмотрим как происходит вызов методов компонента.
Клиентская сторона
Вот пример запроса на битриксовой библиотеке:
Приведу код и jsdoc битриксовой функции. Из jsdoc можно узнать параметры, которые эта функция ожидает
Вот примерно то же самое на jquery:
Немного сложностей вносит использование csrf. Если кратко, то это защита от вызова метода на сторонних сайтах. Если вы хотите защитить запрос, то вам придется воспользоваться методом BX.message(‘bitrix_sessid’) в js (он закомментирован в объекте data). Либо каким то другим образом передать с бэкенда на фронт данные функции и подставить эту строку в sessid.
Если же вы никакие сколько нибудь значимые данные в запросах не передаете, то проверку csrf можно будет отключить на бэкенде (для каждого аякс метода независимо, для каких-то можно и оставить) и отправлять запросы без sessid.
Серверная сторона:
На серверной стороне генерировать ответ будет обычный компонент. Так как в примере выше мы отправляли запросы к компоненту custom:ajax, то фактически будет выполняться метод testAction в классе из файла /local/components/custom/ajax/class.php, название класса в файле как обычно не важно. Вот примерно такое там может быть:
Обращаю ваше внимание, на клиенте мы спрашиваем просто test, а по факту выполняется метод testAction.
На что еще обратить внимание. В методе testAction есть два аргумента — $param2 и $param1. Я намеренно поставил их в обратном порядке, чтобы показать как происходит маппинг данных из запроса. Если вы вернетесь в описание клиентской части, то увидите, что там передается param1, а param2 не передается. Битрикс проверяет имена переменных через php reflection и передает в аргументы метода ajax данные с тем же типом и названием. То есть другими словами не нужно задумываться какой у вас там аргумент первый, какой второй, как это все придет из браузера, в каком порядке, достаточно просто называть переменные одинаково на сервере и на клиенте.
В клиентском запросе мы указывали mode: ‘class’, если посмотреть jsdoc битриксовой функции, то оказывается, что она принимает еще и mode: ‘ajax’. На самом деле это практически то же самое, только подключается не class.php из папка компонента, а файл ajax.php. Ну и сам класс нужно наследовать немного иначе. Вот пример класса в файле ajax.php:
То есть примерно то же самое, только убрали implements Controllerable, и отнаследовались от Controller.В остальном никаких отличий нет. Название класса так же как и с компонентом не важно.
Запрос к модулю:
Теперь попробуем отправлять запрос не к компоненту а к модулю. Я буду отправлять запросы к модулю local.lib.
Клиентская сторона
Вот опять же код и jsdoc вызываемой функции
Аналогичный запрос на jquery:
Принципы формирования sessid те же, что и для компонента.
Серверная сторона
На серверной стороне есть отличия. Для начала в папке с модулем нам понадобится файл .settings.php, именно в папке с модулем. Вот пример файла:
В этом файле мы регистрируем целый неймспейс. Или другими словами регистрируем целую папку, вся папка будет содержать контроллеры для работы с аяксом.
Далее создаем папку lib/controller и файл test.php в этой папке:
Содержимое тут примерно такое же как и в файле ajax.php компонента, так что останавливаться на этом не буду.
Ключевое для понимания работы аякс в модуле — как именно формируется action и как в итоге будет обрабатываться запрос. Разберем тестовый экшен local:lib.api.test.example
- local:lib — модуль local.lib, где точку заменили на двоеточие
- api — неймспейс который мы зарегистрировали в .settings.php модуля
- test — название файла и класса в папке lib/controller
- example — метод exampleAction в классе Test, без суффикса action
Каждый отдельный файл регистрировать в .settings.php модуля не нужно.
Выводы
В целом пока что впечатления от нового механизма положительные. Нужно еще оценить удобство на практике, но чувствуется, что над функционалом довольно долго думали, проектировали. Много нового функционала. Я не затронул еще одну интересную штуку про которую рассказывали на видео — механизм auto wiring (автоматическое связывание), простых примеров так сразу не смог придумать.
Пара идей куда это все эти новинки применить уже есть. Возможно после использования на практике я дополню статью. Пока что вся статья результат теоретического изучения в течение одного дня.
Если информация оказалась полезной, скажите спасибо, это мотивирует писать чаще 🙂
У комплексного компонента bitrix:news крайне не хватает функционала вывода разделов! ну почему в админке есть деление на разделы, а для вывода в публичной части нужно пользоваться костылями.
Нужен функционал bitrix:catalog но без цен и прочих сложностей! ведь bitrix:news универсален для вывода любых данных, его используют всегда, все и почти везде!!
Прошу добавление такого простого компонента в состав комплексного и в роли самостоятельного элемента.
Комментируйте!
Одностраничный компонент выводит список новостей из одного информационного блока (в качестве результата возвращает ID показанных элементов). Настройки позволяют кастомизировать вывод полей элементов в списке, управлять постраничной навигацией, выбирать формат даты, управлять настройками кеширования и т.д. Компонент стандартный и входит в дистрибутив модуля.
Компонент относится к модулю Информационные блоки.
Секции настроек компонента:
Описание параметров
- ID – по идентификатору;
- NAME – по заголовку;
- ACTIVE_FROM – по дате начала активности;
- SORT – по индексу сортировки;
- TIMESTAMP_X – по дате последнего изменения.
- ASC – По возрастанию;
- DESC – По убыванию.
- ID – по идентификатору;
- NAME – по заголовку;
- ACTIVE_FROM – по дате начала активности;
- SORT – по индексу сортировки;
- TIMESTAMP_X – по дате последнего изменения.
- ASC – По возрастанию;
- DESC – По убыванию.
- A – Авто + Управляемое: автоматически обновляет кеш компонентов в течение заданного времени или при изменении данных;
- Y – Кешировать: для кеширования необходимо определить время кеширования;
- N – Не кешировать: кеширования нет в любом случае.
Пользовательские комментарии
Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.
Для этого нужно всего лишь авторизоваться на сайте
Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.
Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.
Комплексный компонент Битрикс выводит все элементы инфоблока. Что для просто новостей на сайте визитке не критично . Но если если нужно вывести статьи по разделам, то я применил почти стандартный хак- $arrFilter.
На странице раздела размещаем комплексный компонент bitrix:news ,указав сразу имя шаблона компоненты или в режиме правки скопировав шаблон компонента в свой шаблон. /bitrix/templates/my_templates/components/bitrix/news/my_templates/ .
Открываем файл news.php для редактирования и перед вызовом компоненты bitrix:news.list, размещаем фильтр, по которому будут отбираться раздел
$_REQUEST["ELEMENT_ID"]);
$APPLICATION->IncludeComponent(
"bitrix:news.list",
"",
Array(
Если нужно вывести описание , картинку раздела, то новый хак уже для шаблона bitrix:news.list . Создаем файл result_modifier.php, уже в папке шаблона bitrix:news.list в котором добавляется в массив $arResult[‘ITEMS’], нужные данные.
$arItem)
$arSectionList = array();
$rsSections = CIBlockElement::GetElementGroups($arItem[‘ID’]);
while ($arSection = $rsSections->GetNext()) $arSectionList[] = array(
‘ID’ => $arSection[‘ID’],
‘NAME’ => $arSection[‘NAME’],
‘SECTION_PAGE_URL’ => $arSection[‘SECTION_PAGE_URL’],
‘PICTURE’ => $arSection[‘PICTURE’],
‘DESCRIPTION’ => $arSection[‘DESCRIPTION’],
);
>
$arItem[‘SECTION_LIST’] = $arSectionList;
$arResult[‘ITEMS’][$key] = $arItem;
>
?>
Рядом с комплексным компонентом есть несколько простых, которые предназначены для решения одной задачи:
В настройках компонента оставляем шаблон .default , выбираем тип инфоблока и сам инфоблок, которые были предварительно созданы в панели управления. Отмечаем checkbox-ы «Включать раздел в цепочку навигации» и «Устанавливать статус 404». В принципе, больше можно ничего не менять, остальные настройки можно поменять позже. В результате файл /blog/index.php будет таким:
Сам компонент расположен в bitrix/components/bitrix/news . В папке templates видим три шаблона, и среди них .default , который мы выбрали. Теперь надо скопировать этот шаблон в папку шаблона сайта, чтобы адаптировать его под свои нужды. Для раздела «Блог» предусмотрен отдельный шаблон local/templates/blog , именно в эту папку и будем копировать. Для шаблона компонента используем имя blog :
После копирования шаблона компонента, файл /blog/index.php был перезаписан:
Из папок шаблонов все удаляем, оставляем только файлы шаблонов и файлы стилей:
- /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/template.php
- /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/template.php
- /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/style.css
- /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/style.css
Шаблон списка новостей
Файл шаблона /local/templates/blog/components/bitrix/news/blog/bitrix/news.list/.default/template.php . Этот шаблон используется как для показа всех статей блога, так и для показа статей выбранного раздела инфоблока. Странно, но в шаблоне не предусмотрен вывод заголовков и вывод подразделов текущего раздела инфоблока. Давайте это исправим и создадим файл result_modifier.php :
Теперь можно заняться шаблоном списка статей блога:
Постраничная навигация
Чтобы кастомизировать постраничную навигацию, надо скопировать один из шаблонов системного компонента system.pagenavigation . Все содержимое папки modern копируем в папку pager :
- bitrix/components/bitrix/system.pagenavigation/templates/modern
- local/templates/.default/components/bitrix/system.pagenavigation/pager
Удаляем файл стилей style.min.css и создаем файл .description.php :
И теперь нам надо отредактировать файл template.php . Распечатаем массив $arResult с помощью функции print_r() :
В нашем случае показывается список из 11 статей, по две статьи на страницу. Всего получается 6 страниц, но на последней странице только одна статья.
По поводу переменной bSavePage :
По поводу переменных nStartPage и nEndPage . Если текущая страница — третья ( NavPageNomer=3 ), а показывается пять ссылок ( nPageWindow=5 ), тогда nStartPage=1 , а nEndPage=5 :
Если текущая страница — четвертая ( NavPageNomer=4 ), а показывается пять ссылок ( nPageWindow=5 ), тогда nStartPage=2 , а nEndPage=6 :
По поводу переменных NavFirstRecordShow и NavLastRecordShow . У нас всего 11 статей на 6 страницах, по две статьи на страницу. Если текщая страница — третья, то NavFirstRecordShow=5 , а NavLastRecordShow=6 . На первой странице будут первая и вторая статьи, на второй странице — третья и четвертая, на третьей странице (текущей) — пятая и шестая.
Шаблон готов, давайте его применим. Для этого заходим в настройки компонента и выбираем в выпадающем списке наш шаблон pager :
Теперь постраничная навигация выглядит так:
ЧПУ (SEF)
Идем в настройки компонента и выставляем значения:
Теперь URL будут иметь вид:
Еще один вариант — использовать символьные коды (транслитерация названия) разделов и элементов инфоблока:
Теперь URL будут иметь вид:
Файл шаблона /local/templates/blog/components/bitrix/news/blog/bitrix/news.detail/.default/template.php
И добавим стили для страницы детального просмотра:
Хлебные крошки
Для полноты картины не хватает еще хлебных крошек. Давайте откроем шаблон сайта local/templates/blog/header.php и добавим компонент «Навигационная цепочка»:
- local/templates/.default/components/bitrix/breadcrumb/chain/template.php
- local/templates/.default/components/bitrix/breadcrumb/chain/style.css
Распечатаем массив $arResult :
Теперь можно использовать этот шаблон:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- оставляем шаблон по умолчанию .default
- выбираем тип информационного блока
- выбираем код информационного блока
- задаем количество новостей на странице
- убираем постраничную навигацию под списком
Копируем в буфер обмена код вызова компонента и выходим из редактора без сохранения. Открываем на редактирование файл шаблона local/templates/voguis_index/footer.php и в правую колонку вставляем код вызова компонента из буфера обмена:
Переходим на главную страницу сайта, включаем режим правки и копируем шаблон компонента:
Задаем имя шаблона posts_sidebar и выбираем куда копировать:
Файл шаблона local/templates/voguis_index/footer.php был перезаписан, теперь вызов компонента теперь выглядит так:
Скопированный шаблон у нас теперь в директории local/templates/voguis_index/components/bitrix/news.list/posts_sidebar . Удаляем файл стилей style.css и открываем шаблон template.php на редактирование. Убираем весь мусор от разработчиков Битрикс и пишем свой код:
Для удобства можно распечатать массив $arResult с помощью функции debug() , которую можно добавить в файл init.php :
Чтобы у контент-менеджера была возможность редактировать и удалять статьи блога не через панель управления, а прямо с морды сайта, в шаблон надо добавить php-код (его можно взять из шаблона компонента, который мы удалили):
По дизайну, посты в правой колонке должны быть с квадратной превьюшкой, а у нас она прямоугольная. Так что для каждого поста надо создать квадратную превьюшку. Для этого создаем файл result_modifier.php , и добавляем в него код генерации превьюшек размером 100x100px с помощью метода CFile::ResizeImageGet() . Путь к файлам превьюшек добавляем в массив $arResult :
Метод возвращает массив вида:
Метод уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь . Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове метод вернет путь к уменьшенному файлу. Статический метод.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Постраничная навигация в Битрикс формируется и выводится с помощью системного компонента bitrix:system.pagenavigation . Компонент разработан для использования совместно с другими компонентами и тесно связан с ними. Посмотрим, как можно использовать этот компонент для постраничного вывода списка элементов инфоблока.
Системный компонент bitrix:system.pagenavigation
Шаблон .default откровенно кошмарный, так что есть смысл использовать modern или round :
Метод CDBResult::GetPageNavString()
Можно упростить наш код, используя метод GetPageNavString класса CDBResult :
Как нетрудно догадаться, внутри метода GetPageNavString() идет подключение системного компонента bitrix:system.pagenavigation и весь вывод компонента записывается в буфер. В предыдущем примере мы делали это сами, а теперь просто вызываем метод GetPageNavString() .
Метод CDBResult::NavStart()
Это устаревший способ организации постраничной навигации, использовать его не рекомендуется. Для начала выбираем все элементы инфоблока, попадающие под условия выборки, без постраничной навигации:
Теперь добавим постраничную навигацию с помощью CAllDBResult::NavStart() :
Метод разбивает результат выборки на страницы. После вызова этого метода, методы
- CDBResult::Fetch()
- CDBResult::GetNext()
- CDBResult::ExtractFields()
- CDBResult::NavNext()
будут ограничены только текущей страницей (а не всей выборкой).
Постраничная навигация в компонентах
Добавить параметры постраничной навигации на страницу настройки компонента:
Постраничная навигация в коде компонента:
Свой шаблон постраничной навигации
Чтобы кастомизировать постраничную навигацию, надо скопировать один из шаблонов системного компонента system.pagenavigation . Все содержимое папки modern копируем в папку pager :
- bitrix/components/bitrix/system.pagenavigation/templates/modern
- local/templates/.default/components/bitrix/system.pagenavigation/pager
Удаляем файл стилей style.min.css и создаем файл .description.php :
И теперь нам надо отредактировать файл template.php . Распечатаем массив $arResult с помощью функции print_r() :
В нашем случае показывается список из 11 статей, по две статьи на страницу. Всего получается 6 страниц, но на последней странице только одна статья.
По поводу переменной bSavePage :
По поводу переменных nStartPage и nEndPage . Если текущая страница — третья ( NavPageNomer=3 ), а показывается пять ссылок ( nPageWindow=5 ), тогда nStartPage=1 , а nEndPage=5 :
Если текущая страница — четвертая ( NavPageNomer=4 ), а показывается пять ссылок ( nPageWindow=5 ), тогда nStartPage=2 , а nEndPage=6 :
По поводу переменных NavFirstRecordShow и NavLastRecordShow . У нас всего 11 статей на 6 страницах, по две статьи на страницу. Если текщая страница — третья, то NavFirstRecordShow=5 , а NavLastRecordShow=6 . На первой странице будут первая и вторая статьи, на второй странице — третья и четвертая, на третьей странице (текущей) — пятая и шестая.
Дополнительно
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Читайте также: