Как вывести слайдер битрикс

Делаем слайдер на «Битрикс»

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

Источник:

Разберем типовую задачу, актуальную для 99,99999% создаваемых сайтов. Как организовать слайдер на «Битрикс»? Приводим пошаговую инструкцию.

1. Инфоблок для элементов слайдера

Прежде всего создадим инфоблок не – товарного типа. Например, типа «Новости». Задаем в разделе «Поля», что заполнение картинки для анонса обязательно. Указываем, что картинка для анонса создается из детальной, если не задана отдельно.

Обязательно настроим специальное свойство для ссылки элемента слайдера:

Ссылка — Строка — Акт — SLIDER_LNK

2. Компонент вывода слайдера

Возьмем за основу компонент списка новостей bitrix:news.list и настроим. Отключим заголовок страницы, статус 404, включение в цепочку навигации. Получим примерно такой код компонента:

IncludeComponent(
«bitrix:news.list»,
«slider»,
Array(
«DISPLAY_DATE» => «Y»,
«DISPLAY_NAME» => «Y»,
«DISPLAY_PICTURE» => «Y»,
«DISPLAY_PREVIEW_TEXT» => «Y»,
«AJAX_MODE» => «N»,
«IBLOCK_TYPE» => «news»,
«IBLOCK_ID» => «4»,
«NEWS_COUNT» => «20»,
«SORT_BY1» => «ACTIVE_FROM»,
«SORT_ORDER1» => «DESC»,
«SORT_BY2» => «SORT»,
«SORT_ORDER2» => «ASC»,
«FILTER_NAME» => «»,
«FIELD_CODE» => array(«SLIDER_LINK»),
«PROPERTY_CODE» => array(«SLIDER_LINK»),
«CHECK_DATES» => «Y»,
«DETAIL_URL» => «»,
«PREVIEW_TRUNCATE_LEN» => «»,
«ACTIVE_DATE_FORMAT» => «»,
«SET_TITLE» => «N»,
«SET_STATUS_404» => «N»,
«INCLUDE_IBLOCK_INTO_CHAIN» => «N»,
«ADD_SECTIONS_CHAIN» => «N»,
«HIDE_LINK_WHEN_NO_DETAIL» => «N»,
«PARENT_SECTION» => «»,
«PARENT_SECTION_CODE» => «»,
«CACHE_TYPE» => «A»,
«CACHE_TIME» => «36000000»,
«CACHE_NOTES» => «»,
«CACHE_FILTER» => «N»,
«CACHE_GROUPS» => «N»,
«DISPLAY_TOP_PAGER» => «N»,
«DISPLAY_BOTTOM_PAGER» => «N»,
«PAGER_TITLE» => «Слайдер»,
«PAGER_SHOW_ALWAYS» => «N»,
«PAGER_TEMPLATE» => «»,
«PAGER_DESC_NUMBERING» => «N»,
«PAGER_DESC_NUMBERING_CACHE_TIME» => «36000»,
«PAGER_SHOW_ALL» => «N»,
«AJAX_OPTION_JUMP» => «N»,
«AJAX_OPTION_STYLE» => «Y»,
«AJAX_OPTION_HISTORY» => «N»,
«AJAX_OPTION_ADDITIONAL» => «»
)
);?>

3. Шаблон слайдера

Создадим отдельную папку для слайдера по адресу
SHABLON/components/bitrix/news.list/slider/

Поместим в эту папку код компонента, HTML-настройки слайдера и JQuery – скрипт Slides.js.

Слайдер будет вызываться кодом:

4. Скрипт Slides.js

Скачиваем скрипт по адресу http://slidesjs.com/. Затем загружаем slides.min.jquery.js в папку шаблона, и переименовываем в slides.js. В папке шаблона создайте папку images и помещайте в нее изображения слайдера. Поместите файл стиля в папку шаблона, присвойте ему имя style.css и отредактируйте пути до картинок.

5. Код шаблона

Код шаблона должен содержать код подобного вида:

Источник

Урок 9. Создание собственного компонента слайдера для интернет-магазина на Битрикс на CMS-Foundation

Приветствую моих читателей! Мы продолжаем строить наш собственный интернет-магазин на Битрикс редакции Старт. В прошлых уроках мы уже реализовали адаптивный каталог товаров и сделали карточку товара. Теперь пришло время немного подкрасить наш магазин и внести такую модную штуку, как слайдер. Если бы мы не пользовались никаким CSS-фреймворками, то нам потребовалось бы изучать Java Script и JQuery. Или по крайней мере искать в интернете готовые скрипты и как-то их прикручивать к сайту. Но как вы помните наш интернет магазин строится полностью на CSS-фреймворке Foundation, а в нём уже есть готовый класс для слайдера Orbit.

Но внедрять PHP код и API Битрикс непосредственно в шаблон не очень правильное решение, не bitrix-way, так сказать. Поэтому для вывода слайдера мы создадим собственный компонент. Ну и конечно при этом научимся создавать свои собственные компоненты Битрикс.

План создания компонента Битрикс

Логику работы мы заложим следующую. Слайдер будет строится на том же инфоблоке Товары, что и каталог. Но попадать в слайдер будут только те товары, у которых задано свойство Слайдер (SLIDER). Входными параметрами для нашего компонента будет Тип инфоблока, Инфоблок и свойство указывающее, что необходимо выводить слайдер.

Если у вас нет свойства Слайдер в инфоблоке добавьте его.

Тип у свойство должен быть список.

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

Инфоблок настроили, теперь можно приступить к созданию собственного компонента Битрикс. Что может быть интереснее написания собственных компонент.

Создание компонента Битрикс

«Слайдер»,
«DESCRIPTION» => «Слайдер на фреймворке CSS Foundation»,
«ICON» => «/images/icon.gif»,
«SORT» => 100,
«CACHE_PATH» => «Y»,
«PATH» => array(
«ID» => «startshop»,
«NAME» => ‘Компоненты StartShop’
),
);
?>

В этом фале задается наименование и описание компонента. А так же иконка для отображения в палитре компонентов и параметр PATH указывает на то, в какой папочке будет находится компонент в палитре компонентов.

$arIBlocks=array();
$db_iblock = CIBlock::GetList(array(«SORT»=>»ASC»), array(«TYPE» => ($arCurrentValues[«IBLOCK_TYPE»]!=»-«?$arCurrentValues[«IBLOCK_TYPE»]:»»)));
while($arRes = $db_iblock->Fetch())
$arIBlocks[$arRes[«ID»]] = «[«.$arRes[«ID»].»] «.$arRes[«NAME»];

$arProperty_LNS = array();
$rsProp = CIBlockProperty::GetList(array(«sort»=>»asc», «name»=>»asc»), array(«ACTIVE»=>»Y», «IBLOCK_ID»=>($arCurrentValues[«IBLOCK_ID»])));
while ($arr=$rsProp->Fetch())
<
$arProperty[$arr[«CODE»]] = «[«.$arr[«CODE»].»] «.$arr[«NAME»];
if (in_array($arr[«PROPERTY_TYPE»], array(«L», «N», «S»)))
<
$arProperty_LNS[$arr[«CODE»]] = «[«.$arr[«CODE»].»] «.$arr[«NAME»];
>
>

$arComponentParameters = array(
«PARAMETERS» => array(
«IBLOCK_TYPE» => array(
«PARENT» => «BASE»,
«NAME» => «Тип инфоблока»,
«TYPE» => «LIST»,
«VALUES» => $arTypesEx,
«DEFAULT» => «news»,
«REFRESH» => «Y»,
),
«IBLOCK_ID» => array(
«PARENT» => «BASE»,
«NAME» => «Инфобок»,
«TYPE» => «LIST»,
«VALUES» => $arIBlocks,
«DEFAULT» => ‘=<$_REQUEST["ID"]>‘,
«ADDITIONAL_VALUES» => «Y»,
«REFRESH» => «Y»,
),
«PROPERTY_CODE» => array(
«PARENT» => «DATA_SOURCE»,
«NAME» => «Укажите свойство по которому будет фильтроваться товары для слайдера»,
«TYPE» => «LIST»,
«MULTIPLE» => «N»,
«VALUES» => $arProperty_LNS,
«ADDITIONAL_VALUES» => «Y»,
),
),
);

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

IntVal($arParams[«IBLOCK_ID»]), «ACTIVE»=>»Y», «PROPERTY_».$arParams[«PROPERTY_CODE»].»_VALUE» => ‘Да’);
$res = CIBlockElement::GetList(Array(), $arFilter, false, false, $arSelect);
while($arFields = $res->GetNext())
<
$arResult[] = $arFields;
>

Код компонента получился очень короткий в отличие от стандартного кода вывода списка новостей. Тут нет ничего лишнего. Вначале мы объявили пространство имен для загрузчика Loader, далее с его помощью подгрузили модуль инфоблоков iblock. И с помощью самой распространенной конструкции API Bitrix CIBlockElement::GetList() выполнили запрос к базе данных отобрав записи инфоблока Товары, в котором свойство Слайдер установлено в занчение «Да«. Далее результатом выборки заполнили предопределенный массив $arResult и последней строкой подключили файл шаблона.

1100,’height’ => 500), BX_RESIZE_IMAGE_EXACT, true);
?>

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

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

Почему же не работать с визуальной частью сайта (в частности с картинками) средствами CSS?? Зачем городить php для картинок и в предыдущих уроках сетку под разные экраны?? Ведь для этого верстка на CSS Foundation! Эх)

А как средствами CSS можно смасштабировать картинку, которая изначально не подходящего размера и не потерять пропорции?

Источник

Создание слайдера на 1С-Битрикс

Допустим вам необходимо создать слайдер, который заказчик сможет без проблем редактировать (содержание), и каждое изображение должно вести на определённую страницу + появлятся в определённое время. В помощь нам приходят инфоблоки.

1. Вначале подготовим структуру для слайдера.

• Создадим новый инфоблок, например с типом «Новости» (Рабочий стол > Контент > Информ. блоки > Типы информ. блоков > Новости)
• Заполняем настройки по вашему усмотрению (дальше я буду писать на своем примере). Желательно поставить обязательным пункт «Картинка для анонса» в разделе «Поля» и проставить галки у «Создавать картинку анонса из детальной (если не задана)», «Создавать картинку анонса из детальной даже если задана».
• В разделе «Свойства» добавляем свойство (извините) для настройки ссылки, по которой будет ввести картинка (примерные настройки: Ссылка — Строка — Акт — SLIDER_LINK).

Сохраняем, останется правильно настроить страницу добавления картинки в слайдер. У меня сделано примерно так:

Т.е. картинка будет идти из анонса, вы можете сделать наоборот (из детальной).

Теперь уже всё идёт на ваше усмотрение. Вы можете сделать через свой компонент. Я покажу, как сделано у меня.

2. Добавляем компонент «Список новостей (bitrix:news.list)» в необходимую область сайта.

При этом в свойствах сделаем наше поле активным (slider_link) и уберём галки у «Устанавливать заголовок страницы, Устанавливать статус 404. Включать инфоблок в цепочку навигации, Включать раздел в цепочку навигации»

У меня компонент выглядит примерно так:

• Теперь создадим шаблон для bitrix:news.list (ШАБЛОН/components/bitrix/news.list/slider/, например).
• Поменяем шаблон выше указанного компонента на slider.
• В содержание можем помещать html часть слайдера и прописать настройки скрипта.
• Сам скрипт помещаем в нашу папку slider и называем script.js, он будет подключаться автоматически.

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

3. Частным пример подключения слайдера:

Для работы скрипта необходимо подключить библиотеку JQuery!

Скачиваем слайдер SlidesJs ( http://slidesjs.com/ ). Кидаем slides.min.jquery.js в папку шаблона слайдера (ШАБЛОН/components/bitrix/news.list/slider/) и меняем имя на script.js, изображения перемещаем в папку images в ней же, стиль кидаем в папку шаблона слайдера, назвав style.css, и поменяв пути до картинок.

Содержание шаблона будет выглядеть так:

Источник

Создаём слайдер на Битрикс

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

Для подобных задач в системе Битрикс есть довольно мощный инструмент для организации работы показа баннеров, о котором и пойдет речь далее. Для этих задач удобно использовать модуль «Баннерная реклама», который располагается по в админке в разделе:

Маркетинг > Баннерная реклама

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

Разделение баннеров по типам

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

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

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

Список баннеров располагается по такому пути:

В этом списке можно добавляться новые баннера, а также редактировать или удалять существующие.

Добавление нового баннера

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

Для наших целей потребуется заполнить минимум полей:

Название (можно указать произвольное), т.к. нами в публичной части оно использоваться не будет;
Тип баннера – нужно указать какой тип баннера мы добавляем, мобильный либо полноэкранный;
Вес (приоритет) – это поле используется для сортировки порядка баннеров;
Файл – это и есть изображение добавляемого баннера, можно добавить файл методом перетаскивания либо по клику на области;
URL – ссылка на баннере, если есть необходимость возможности перехода пользователя по клику на баннере;
Статус баннера – обозначает готовность показа баннера на сайте.

Всё это находится на первой вкладке добавления баннера, и этого для нашего примера вполне достаточно. Далее немного рассмотрим вкладки так сказать «для ознакомления».

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

На вкладке «таргетинг» можно гибко настраивать показ банеров по конкретным разделам, к примеру, если компонент подключён в каталоге, и есть необходимость показа конкретного баннера для конкретных разделов. Можно так же настраивать от обратного – показывать баннер во всех разделах, и сделать исключение для некоторых.

Настраивать показ можно с использованием разграничения по группам пользователя.

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

Для сбора и обработки аналитики на вкладке «статистика» можно настраивать отслеживание событий кликов на баннерах. Это позволяет собирать дополнительную информацию по эффективности того или иного баннера.

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

Создаём компонент для показа баннеров

Итак, у нас есть некий набор баннеров в администраторской части сайта. В публичной части сайта нам нужно вывести слайдер, который будет вытягивать данные из базы, и показывать из с необходимой разметкой. Что касается верстки, то в подавляющем большинстве случаев в каждой верстке может использоваться различные плагины для показа изображений. По этой причине целесообразно нам сделать простой самостоятельный компонент, в котором уже реализуется нужная разметка.
Для показа было решено прикрутить Swiper Slider, ссылка на него будет в самом конце поста. Создаём кастомный компонент, который будет получать данные из базы, а в шаблоне компонента будет подключаться Swiper Slider, который будет выполнять показ этих самых баннеров.

Путь размещения компонента:
/local/components/custom/swiper.slider/

Как вы поняли директория /local/ в этом случае используется для ваших шаблонов и компонентов. Вызов компонента происходит стандартным образом:

В качестве параметра мы передаём TYPE_SID, который и передаёт тип баннеров, которые следует загрузить. Константа SITE_TYPE задаётся в файле init.php, посредством элементарной проверки юзер-агента браузера, и может принимать значение original либо pda.

Итак вы подключаем компонент custom:swiper.slider на главной странице, теперь пора перейти к логике самого компонента. Логика компонента находится в скрипте component.php, те кто работал с системой битрикс, наверное, уже знают об этом.

Рассмотрим исходный код компонента

Сама логика компонента расположена в файле component.php:
/local/components/custom/swiper.slider/component.php

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

В папке компонента так же мы размещаем шаблон компонента, который собственно и будет содержать всю основную разметку слайдера, а также подключать дополнительные js-скрипты и файлы стилей. Так как при подключении компонента мы не указали имя шаблона компонента, то по умолчанию будет подгружаться шаблон из папки с названием .default:
/local/components/custom/swiper.slider/templates/.default/

В этой директории размещён файл шаблона компонента с именем templates.php, в него помещается разметка:

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

Swiper.css – это файл стилей который идет вместе со слайдером swiper slider;
Swiper.min.js – в этом файле находится сам javascript код слайдера, он так же подключается в шаблоне компонента;

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

Источник