Меню

Битрикс настройки компонента осуществляются



Урок 7. Параметры компонента битрикс и result_modifier.php

Приветствую. В предыдущем уроке мы вывели товары на страницу каталога. Собственно почти готов интернет-магазин, по крайней мере витрина. Но если вы посмотрите, то каталог выводится не очень хорошо, из за того, что разный размер изображений и разная длинна наименования (в одну и две строки) карточки товаров «скачут».

Вот так сейчас должен выглядеть наш каталог. Видно 2 проблемы:

  1. Разная высота и ширина карточек
  2. Наименование выводится в две строки и сдвигает в низ цену и кнопку Купить.

Вот сейчас мы их решим.

Изменение результата работы компонента через result_modifier.php

Первая проблема это то, что изображения предварительного просмотра добавлены в инфоблок разных размеров. Ситуация распространенная, т.к. подгонять все изображение под один размер до миллиметра это не реально. Хотя конечно изображения должны быть примерно одинаковых размеров.
Что нам нужно сделать? Просто версткой, указанием размеров блока изображения проблему не решить, т.к. картинки растянутся не пропорционально. Нужно делать полноценный resize с сохранением пропорций. И в этой задаче нам тоже поможет богатое API Битрикса, в нем есть все функции для этого, а точнее нам понадобится всего одна CFile::ResizeImageGet.
Чтобы изменить размер изображений в инфоблоке Битрикс нужно выполнить следующий код.

Мы снова в цикле обходим элементы массива $arResult и функцией CFile::ResizeImageGet() изменяем размер изображения.
Подробнее о функции можно посмотреть в документации Битрикс. После преобразования мы устанавливаем параметры ширины и высоты изображения 200 пикселов. Но главное мы в качестве источника изображения указываем наш преобразованный файл.
$arResult[«ITEMS»][$cell][«PREVIEW_PICTURE»][‘SRC’] = $file[‘src’];

Данный код можно разместить и в самом шаблоне компонента news.list или в специальном файле result_modifier.php , который должен находится в то же папке где и файл шаблона компонента. На нем я остановлюсь поподробней, т.к. это интересная технология модификации результата работы компонента без изменения кода компонента или шаблона.

Файл result_modifier.php — инструмент для модификации данных работы компонента произвольным образом. Создается разработчиком самостоятельно.

200,’height’ => 200), BX_RESIZE_IMAGE_EXACT, true);
$item[«PREVIEW_PICTURE»][‘WIDTH’] = $file[‘width’];
$item[«PREVIEW_PICTURE»][‘HEIGHT’] = $file[‘height’];
$item[«PREVIEW_PICTURE»][‘SRC’] = $file[‘src’];
?>

Результат работы будет одинаковый. Расположить код внутри шаблона в данном примере более оптимально т.к. нет ненужного цикла по всему массиву $arResult.

Посмотрим результат — уже намного лучше, все карточки одного размера. То, что лица срезались, это изначально картинки выбраны не подходящих пропорций и лучше их автоматически обрезать невозможно.
А чтобы лучше понять, что произошло и как битрикс работает с изображениями предлагаю добавить вывод отладочной информации, в код вывода карточек добавить одну строку (выделил красным).
Код:

Результат будет следующий.

Обратите внимание Битрикс создает отдельную папку resize_cache в которой сохраняет преобразованные файлы.

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

.bord h5 <
display: block;
height: 60px;
>

Параметры компонентов Битрикс

Т.к. шаблон адаптивный мы внесли параметры для трех размеров экранов. Т.е. у нас будет возможность на каждом размере экрана задать какое количество столбцов нужно выводить.
Теперь посмотрим, как это реализовать в шаблоне?

Передача параметров между компонентами Битрикс

$APPLICATION->IncludeComponent(
«bitrix:news.list»,
«»,
Array(
«IBLOCK_TYPE» => $arParams[«IBLOCK_TYPE»],
«IBLOCK_ID» => $arParams[«IBLOCK_ID»],
«NEWS_COUNT» => $arParams[«NEWS_COUNT»],
«SORT_BY1» => $arParams[«SORT_BY1»],
«SORT_ORDER1» => $arParams[«SORT_ORDER1»],
«SORT_BY2» => $arParams[«SORT_BY2»],
«SORT_ORDER2» => $arParams[«SORT_ORDER2»],
«FIELD_CODE» => $arParams[«LIST_FIELD_CODE»],
«PROPERTY_CODE» => $arParams[«LIST_PROPERTY_CODE»],
«DETAIL_URL» => $arResult[«FOLDER»].$arResult[«URL_TEMPLATES»][«detail»],
«SECTION_URL» => $arResult[«FOLDER»].$arResult[«URL_TEMPLATES»][«section»],
«IBLOCK_URL» => $arResult[«FOLDER»].$arResult[«URL_TEMPLATES»][«news»],
«DISPLAY_PANEL» => $arParams[«DISPLAY_PANEL»],
«SET_TITLE» => $arParams[«SET_TITLE»],
«SET_LAST_MODIFIED» => $arParams[«SET_LAST_MODIFIED»],
«MESSAGE_404» => $arParams[«MESSAGE_404»],
«SET_STATUS_404» => $arParams[«SET_STATUS_404»],
«SHOW_404» => $arParams[«SHOW_404»],
«FILE_404» => $arParams[«FILE_404»],
«INCLUDE_IBLOCK_INTO_CHAIN» => $arParams[«INCLUDE_IBLOCK_INTO_CHAIN»],
«CACHE_TYPE» => $arParams[«CACHE_TYPE»],
«CACHE_TIME» => $arParams[«CACHE_TIME»],
«CACHE_FILTER» => $arParams[«CACHE_FILTER»],
«CACHE_GROUPS» => $arParams[«CACHE_GROUPS»],
«DISPLAY_TOP_PAGER» => $arParams[«DISPLAY_TOP_PAGER»],
«DISPLAY_BOTTOM_PAGER» => $arParams[«DISPLAY_BOTTOM_PAGER»],
«PAGER_TITLE» => $arParams[«PAGER_TITLE»],
«PAGER_TEMPLATE» => $arParams[«PAGER_TEMPLATE»],
«PAGER_SHOW_ALWAYS» => $arParams[«PAGER_SHOW_ALWAYS»],
«PAGER_DESC_NUMBERING» => $arParams[«PAGER_DESC_NUMBERING»],
«PAGER_DESC_NUMBERING_CACHE_TIME» => $arParams[«PAGER_DESC_NUMBERING_CACHE_TIME»],
«PAGER_SHOW_ALL» => $arParams[«PAGER_SHOW_ALL»],
«PAGER_BASE_LINK_ENABLE» => $arParams[«PAGER_BASE_LINK_ENABLE»],
«PAGER_BASE_LINK» => $arParams[«PAGER_BASE_LINK»],
«PAGER_PARAMS_NAME» => $arParams[«PAGER_PARAMS_NAME»],
«DISPLAY_DATE» => $arParams[«DISPLAY_DATE»],
«DISPLAY_NAME» => «Y»,
«DISPLAY_PICTURE» => $arParams[«DISPLAY_PICTURE»],
«DISPLAY_PREVIEW_TEXT» => $arParams[«DISPLAY_PREVIEW_TEXT»],
«PREVIEW_TRUNCATE_LEN» => $arParams[«PREVIEW_TRUNCATE_LEN»],
«ACTIVE_DATE_FORMAT» => $arParams[«LIST_ACTIVE_DATE_FORMAT»],
«USE_PERMISSIONS» => $arParams[«USE_PERMISSIONS»],
«GROUP_PERMISSIONS» => $arParams[«GROUP_PERMISSIONS»],
«FILTER_NAME» => $arParams[«FILTER_NAME»],
«HIDE_LINK_WHEN_NO_DETAIL» => $arParams[«HIDE_LINK_WHEN_NO_DETAIL»],
«CHECK_DATES» => $arParams[«CHECK_DATES»],

Читайте также:  Jabber настройка active directory

«CELL-LARGE» => $arParams[«CELL-LARGE»],
«CELL-MEDIUM» => $arParams[«CELL-MEDIUM»],
«CELL-SMALL» => $arParams[«CELL-SMALL»],
),
$component
);

Архив магазина StartShop на момент урока можно скачать отсюда.

От автора:
Ну вот, наконец-то мы доделали наш каталог для магазина Битрикс на редакции Старт StartShop. Теперь он выглядит вполне достойно, можно редактировать количество выводимых элементов, количество колонок. Он адаптивный — меняет количество колонок в зависимости от размера экрана. Конечно, над красотой каталога можно ещё работать и работать, но это уже выходит за рамки моего курса (по крайней мере пока). А в следующим уроке мы займемся выводом детальной страницы товара.
Давайте обратную связь и подписывайтесь, чтобы не пропустить новые статьи. До встречи.

Источник

Работа с компонентами CMS 1С-Битрикс

«1С-Битрикс: Управление сайтом» — профессиональная система управления содержимым сайта, универсальный программный продукт для создания и поддержки:

корпоративных сайтов, интернет-магазинов, информационных порталов, сайтов сообществ,

социальных сетей и других веб-проектов.

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

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

Компоненты делятся на простые (одностраничные) и комплексные (многостраничные).

С точки зрения структуры и способов подключения простые и комплексные компоненты очень похожи. Но с точки зрения функционирования они сильно отличаются.

Простые (обычные, одностраничные) компоненты создают какую-либо область на одной странице. Их удобно использовать, когда на одной странице требуется разместить данные из различных модулей (блоги и инфоблоки, например) или данные из разных инфоблоков (новости и каталог товаров). Для создания полного раздела новостей или каталога товаров пользоваться ими довольно неудобно: приходится создавать большое число статических страниц и следить за тем, чтобы они были корректно связаны друг с другом.

Комплексные (сложные, многостраничные) компоненты создают разделы сайта. Например, компонент каталога создает на сайте весь раздел каталога: список каталогов, список групп и страницы товаров. То есть, комплексный компонент состоит из набора динамических страниц при просмотре сайта, но из одной статической страницы на физическом уровне. Комплексные компоненты строятся на основе простых компонентов, используя их логику.

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

Комплексные компоненты разрешают следующие проблемы:

  • Отпадает необходимость создания большого числа статических страниц для размещения всех требуемых подкомпонентов.
  • Отпадает необходимость отдельно настраивать для каждого из подкомпонентов общие (пересекающиеся) свойства (например, тип инфоблока и инфоблок).
  • Происходит установление сложных взаимосвязей между подкомпонентами. Например, нет необходимости для страницы со списком сообщений темы форума настраивать, как эта страница может указать на страницу списка тем форума, а как на страницу профиля посетителя.
  • В компонент (даже с кастомизированными шаблонами вывода) можно добавить новую страницу. Например, если на форуме появится страница (подкомпонент) по выводу 10 посетителей с самым высоким рейтингом, то эта страница станет доступной и в публичной части.
  • Можно сменить шаблон вывода всего комплексного компонента одним действием, а не настраивать вывод каждого из подкомпонентов.

Алгоритм работы комплексного компонента таков:

  1. На основании действий посетителя сайта (например, переход по пунктам меню) комплексный компонент определяет, какая страница должна быть показана пользователю, и подключает свой шаблон компонента для этой динамической страницы;
  2. Шаблон страницы подключает обычные компоненты, автоматически настраивая необходимым образом их свойства;
  3. Обычные компоненты выполняют свою работу: запрашивают данные у ядра системы, форматируют их и выводят посетителю, а также предоставляют пользователю различные элементы управления (ссылки, формы, кнопки и т.п.);
  4. Пользователь с помощью каких-либо элементов управления, посылает новый запрос комплексному компоненту.
Читайте также:  Агат настройка маршрутизации китай

Панель компонентов в визуальном редакторе

Для быстрого размещения компонентов на странице разработан интерфейс на базе визуального HTML-редактора.

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

При необходимости панель компонентов может быть скрыта или развернута, используя специальные кнопки.

Если вам нужно найти какой-то конкретный компонент, но вы не хотите самостоятельно искать его в списках, вы можете найти его, используя функцию Поиск компонентов.

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

Настройки компонента из визуального редактора

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

В данной форме можно выделить три основные области:

  1. Группы настройки компонента

Для удобства настройки компонента его параметры разделены по группам. Например, Настройки фильтра, Основные параметры и т.д. Количество групп параметров и их содержимое зависит от конкретного компонента. Кликая на каждое поле с названием группы параметров , вы сможете перейти непосредственно к их изменению.

  1. Область редактирования параметров

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

  • выбор элемента из выпадающего списка; (для некоторых полей типа Выпадающий список возможен выбор значения (другое)–>. В этом случае необходимо ввести код в поле, расположенное рядом)
  • выбор нескольких элементов из множественного списка (удерживая нажатой клавишу Ctrl);
  • снятие или отметка некоторой опции (поле типа CheckBox);
  • ввод информации в текстовую строку.

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

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

Настройки компонента из рабочего поля

  • Для того, чтобы изменить параметры компонента из рабочего поля страницы нужно установить курсор на область компонента, размещенного в рабочей области страницы и в появившейся панели выбрать пункт Редактировать параметры компонента;
  • Использовать диалог Параметры компонента, который можно вызвать, дважды кликнув на иконке компонента в рабочей области страницы.

Если на странице расположены несколько компонентов, каждый из которых может устанавливать заголовок страницы, то заголовок страницы будет установлен последним компонентом.

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

Редактировать параметры компонента – редактирование параметров данного компонента. Команда отображается всегда для любого компонента, за исключением подкомпонентов в составе комплексного. По нажатии отображается форма настройки параметров, где можно изменить настройки компонента без перехода к режиму редактирования страницы.

Копировать шаблон компонента – копирование шаблона компонента. Команда отображается всегда. По нажатии появляется диалоговое окно, где указывается имя шаблона компонента, и в какой шаблон сайта осуществить копирование.

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

Читайте также:  Настройка пульта one for all urc6440

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

Обновить кэш компонента – обновление информации, содержащейся в кэше компонента.

Для удобства настройки компонента его параметры разделены по группам, причем каждому компоненту присущ свой набор групп параметров.

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

Рассмотрим наиболее встречающиеся группы параметров компонентов:

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

Если для компонента доступно несколько шаблонов, то следует выбрать нужный в выпадающем списке (например, для комплексного компонента Каталог дополнительно доступны встроенные шаблоны offers и properties или же разработчик сайта создал собственный шаблон). Учтите, что при смене шаблона изменится внешний вид создаваемой страницы сайта.

Основные параметры и Источник данных

В группах параметров Основные параметры и/или Источник данных (например, для компонентов веб-форм) задается источник публикуемых данных (инфоблок, форумы, веб-форма, опрос и т.д.). В некоторых случаях источник следует задавать с помощью кода, в котором передается идентификатор элемента данных.

Также в группе параметров Источник данных для многих компонентов задаются параметры сортировки разделов и элементов данных (следует выбрать по какому признаку и как сортируются данные).

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

Данная группа параметров предназначена для настройки адресов к связанным компонентом страницам сайта.

Управление адресами страниц

Группа параметров Управление адресами страниц встречается только в комплексных компонентах и в следующих одностраничных: Список своих элементов, Заполнение веб-формы,Просмотр результата, Редактирование результата и Список результатов. В группе выполняется настройка поддержки режима ЧПУ.

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

Управление режимом AJAX

Данная группа параметров служит для использования режима AJAX в компоненте. Технология AJAX позволяет обновлять (загружать) целиком не всю страницу, а только изменившуюся ее часть в результате действий пользователя (например, при переходе по ссылке), таким образом, пользователь быстрее увидит результат своих действий.

Параметры режима AJAX настраиваются в зависимости от отображаемых данных компонентом.

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

В компонентах есть встроенная поддержка кеширования. Для тех компонентов, для которых возможно кеширование, в наборе параметров отражаются настройки кеширования.

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

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

ЛЕКЦИЯ 8

Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ — конструкции, предназначен­ные для поддерживания проводов на необходимой высоте над землей, водой.

Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого.

Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим.

Источник

Adblock
detector