Меню

Настройка слайдера в битриксе



1C-Битрикс _Старт

Построение сайта с нуля.

Статьи

Гостевая книга. Продолжение 2. Спам

Создано:
23 января 2017 в 11:45:23
Изменено:
5 августа 2017 в 21:56:42

В этой статье описывается процесс решения проблемы спама в гостевой книге.
Подробнее

Полезные ссылки

Слайдер

Создано: 05.09.2013 19:34:33 | Изменено: 06.11.2016 17:07:56 | Просмотров: 14402

Реализуем новую возможность для нашего сайта — а именно добавление картинок через административную панель в слайдер на сайте. Для этого нужно создать инфоблок, и настроить его согласно нашей задаче. В первую очередь создадим общий тип для будущих инфоблоков. Назовем его «Контент».

Откроем административный раздел сайта, «Контент» – «Инфоблоки» – «Типы инфоблоков». Нажимаем кнопку «Добавить новый тип». Откроется вкладка «Настройка типа». В поле «Идентификатор (ID)» укажем «content». В поле «Russian (Название)» укажем «Контент». В поле «English (Название)» укажем «Content».

Создадим новый инфоблок для слайдера.

На форме информационного блока, в поле «Символьный код» укажем «slider». Отметим чекбокс с сайтом по умолчанию. В поле «Название» укажем «Слайдер». Уберем галки из чекбоксов с индексированием разделов и элементов.

С вкладкой «Инфоблок» закончили.

Открываем вкладку «Поля». Находим строчку «Картинка для анонса». Выбираем первый чекбокс. Теперь при создании элемента инфоблока картинка для анонса будет обязательна. Затем выбираем чекбокс «Уменьшать если большая». Откроются поля ширины и высоты. Указываем 950 и 300.

Переходим к вкладке «Доступ». В разделе «Доступ по умолчанию». Для всех пользователей выберем уровень доступа «Чтение» (чтобы все посетители сайта могли просматривать изображения слайдера).

На этом все, сохраняем инфоблок.

Переходим в инфоблок «Слайдер». Жмем «Добавить элемент». Справа есть «шестеренка» для открытия окна «Настройка формы редактирования». Нажимаем. Удаляем все вкладки кроме вкладки «Элемент». В выбранных полях оставляем: «Активность», «Название», «Картинка для анонса».

На форме осталась только одна вкладка «Элемент».

В поле «Название» указываем, например, 1. Переносим картинку с размерами 950×300 px в область для перетаскивания. Жмем «Сохранить».

Так повторяем еще один-два раза (можно больше). С созданием инфоблока закончили.

В публичной части сайта открываем на редактирование тестовую страницу «page.php». Добавим на страницу компонент «Список новостей» (раздел «Контент» – «Новости»). Открываем «Параметры компонента». Отменяем все чекбоксы в разделе «Дополнительные настройки». В разделе «Основные параметры» выбираем тип информационного блока — «Контент». Код информационного блока «Слайдер». В разделе «Настройки кеширования» убираем галку из чекбокса «Учитывать права доступа». В разделе «Настройки постраничной навигации» убираем все галки. Сохраняем.

Копируем шаблон компонента. Назовем новый шаблон «slider». Скопируем в основной шаблон сайта. Шаблон будем редактировать через FTP.

Читайте также:  Настройки для встроенной звуковой карты

Через FTP открываем папку шаблона компонента слайдера (папка_сайта/bitrix/templates/main/components/bitrix/news.list/slider). На редактирование открываем файл «template.php». Удаляем все его содержимое. И всавляем следующий код:

Затем в публичной части сайта открываем тестовую страницу на редактрование и копируем вызов компонента. Через FTP открываем файл «header.php» в папке основного шаблона сайта. Находим «div» с классом «gallery» (

Вставляем вызов компонента вместо этого «div’a». Сбрасываем кэш в публичной части сайта. Смотрим что получилось.

Источник

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

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

Разберем типовую задачу, актуальную для 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 и отредактируйте пути до картинок.

Читайте также:  Traffic inspector настройка смс

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 можно смасштабировать картинку, которая изначально не подходящего размера и не потерять пропорции?

Источник

Adblock
detector