Слайдер товаров bitrix: Как включить или отключить слайдер для товаров

Leave a Comment / Разное / By /

Содержание

Помогите пожалуйста! Как сделать переключение между несколькими слайдерами битрикс?

Вопрос задан

Изменён 3 года 2 месяца назад

Просмотрен 258 раз

Есть блок в котором есть слайдер, при нажатии на кнопку ниже можно выбрать другой слайдер, то есть меняется картинки. Нужно реализовать его на битриксе. Сам в нём не силён, пробовал сделать через компонент news.list. Помогите решить мою проблему, какой компонент использовать.Прилагаю фото и ссылку на сайт с слайдером. Заранее спасибо!

Ссылка на сайт

  • битрикс

Можно найти много примеров например вот https://dev.1c-bitrix.ru/learning/course/index.php?COURSE_ID=95&LESSON_ID=7805&LESSON_PATH=7785.7805 . (подобное делают постоянно и много всякой информации)

Смысл в том что bitrix у вас будет для хранения самих фото слайдера, и ссылок которые будут на ваших слайдах (из админки контенщик будет задавать слайды).

Например можно сделать инфоблок слайдеры, в нём добавить элементы которые будут слайдами, например детальная картинка элемента это сама картинка слайдера, детальное описание это урл ссылки, тут же можно задать сортировку элементу. (если нужно несколько слайдеров на сайте можно создавать для каждого раздел инфоблока и в него добавлять определённые слайдеры, а код раздела указать в компоненте)

Что бы при такой реализации сделать слайдер нужен будет компонент news.list указываете в него созданный вами инфоблок, задаёте сортировку параметры кеша, укажите имя шаблона <придумайте любое> далее создадите шаблон.

Затем создайте в папке /local/templates/<шаблон вашего сайта>/components/news.list/<придумнное имя шаблона>/template.php , а далее в этом файле в массиве $arResult (можете сделать print_r и посмотреть содержимое) будут все нужные вам данные это урл на картинку и ссылка, добавьте в шаблон html код любого слайдера (при необходимости создайте в этом же шаблоне файлы script.

js и style.css с кодом из вашего слайдера).

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как настроить главный экран приложения из панели bitrix

February 11, 2020

Перейдите в инфоблок «Mainapp.

Слайдер на главной»

В этом инфоблоке, для удобства, мы уже создали несколько разделов для элементов главного экрана. Разделы названы в соответствии с типами баннеров или слайдеров. Сортировка разделов соответствует порядку отображения баннеров и слайдеров.

Приложение группирует баннеры, находящиеся в одной категории. Т.е. если разместить 3 баннера в категории «Большие баннеры», то они будут сгруппированы в один слайдер.

Сортировка баннеров на главном экране приложения идет в соответствии с сортировкой категорий.

   

Добавление Большого баннера:

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

  • В поле «Тип баннера/слайдера» необходимо выбрать Большой баннер
  • В поле «Название» указываем название баннера (может быть любым). Например: Большой баннер 1
  • В поле «Символьный код» указываем любое название на латинице. Например: big_banner_1
  • В поле «Сортировка» указываем порядковый номер баннера
  • В поле «Изображение» выберите соответствующий файл баннера
  • Выберите тип ссылки в мобильном приложении
  • В поле «Ссылка в мобильном приложении» укажите соответствующий id (куда должен ссылаться баннер)
  • Нажмите кнопку «Сохранить»
  1. Ссылкой в мобильном приложении в зависимости от вида является либо id раздела, либо id товара, либо id новости или статьи, а также внешний url (например: https://yandex. ru). 
  2. ID раздела можно посмотреть так: http://joxi.ru/gmvKP9wh2JbVR2. 
  3. ID товара, новости или статьи можно посмотреть так: http://joxi.ru/VrwZP9wh5JYE8A
  4. Ширину большого баннера рекомендуется делать не менее 900px.
  5. Большие баннеры в приложении всегда растягиваются по ширине, т.е. если размер баннера 900x450px, то в приложении это будет прямоугольник, если 1920×450, то он будет выглядеть как тонкая полоса. Высота баннера определяется индивидуально, в зависимости от представленного контента.
  6. Все баннеры одного типа должны быть одинаковыми по размерам.

Добавление Маленьких баннеров

Маленькие баннеры добавляются по аналогии с большими, только в поле «Тип баннера/слайдера»  необходимо выбрать Маленький баннер.

Добавление Слайдера акций

Заполняем поля:

  • В поле «Тип баннера/слайдера» выбираем Список товаров
  • В поле «Название» указываем название слайдера акций (может быть любым). ВАЖНО: название слайдера будет отображаться в приложении
  • В поле «Символьный код» указываем любое название на латинице. Например: act_slider_1
  • В поле «Сортировка» указываем порядковый номер Слайдера акций. Чем меньше сортировка, тем выше будет показан Слайдер акций на главном экране приложения. При размещении Слайдера акций под баннерами необходимо учитывать порядковые номера баннеров и указывать порядковый номер Слайдера акций следующим за номерами баннеров
  • В поле «Выбор товаров для Слайдера акций» выбираем товары, которые будут показываться в этом слайдере
  • Нажмите кнопку «Сохранить»

Добавление Слайдера категорий

Заполняем поля:

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

Добавление списка товаров плиткой

Добавление этого типа баннер происходит аналогично добавлению слайдера акций, только в поле «Тип баннера/слайдера» выбираем «Плитка товаров».

Добавление баннера с ближайшим интервалом доставки (для проектов с этим функционалом)

Заполняем поля:

  • В поле «Тип баннера/слайдера» выбираем Интервалы доставки
  • В поле «Название» указываем название баннера (может быть любым)
  • В поле «Символьный код» указываем любое название на латинице. Например: int_banner

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

Управление информационными экранами (по событию) (для проектов с этим функционалом)

  1. Приветственный баннер: показывается при первом входе в приложение. 
  2. Всплывающие баннеры по событию делятся на 3 типа: вход в приложение, при нажатии кнопки «в корзину», при открытии экрана «каталог».

Создание приветственного баннера (для создания баннера рекомендуем обратиться к разработчику приложения):

Заполняем поля:

  • В поле «Тип баннера/слайдера» выбираем Приветственный экран
  • В поле «Название» указываем название баннера (может быть любым)
  • В поле «Символьный код» указываем любое название на латинице. Например: wellc_slider_1
  • В поле «Сортировка» оставляем по-умолчанию
  • В поле «Фон баннера» размещаем изображение с фоном приветственного экрана
  • В поле «Изображение» размещаем основное изображение экрана с прозрачным фоном в формате png
  • Нажмите кнопку «Сохранить»

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

Заполняем поля:

  • В поле «Тип баннера/слайдера» выбираем Всплывающее окно
  • В поле «Название» указываем название баннера (может быть любым)
  • В поле «Символьный код» указываем любое название на латинице. Например: popup_slider_1
  • В поле «Сортировка» оставляем по-умолчанию
  • В поле «Изображение» выберите соответствующий файл баннера
  • В поле «События открытия экрана» выбираем соответствующее событие для показа баннера (Для одного события может быть только один баннер)
  • Нажмите кнопку «Сохранить»

Sliders

Подключить расширение Landing_Carousel в манифесте блока.

 'активы' => массив(
   'ext' => массив('landing_carousel'),
)

Установить классы для узлов в блочном макете:

  • .js-carousel — слайд-корневой контейнер
  • .js-слайд — каждый слайд отдельно

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


Атрибуты

Кнопки пейджинга.

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

 data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-45 g-height-45 g-color-white g-bg-primary"
data-arrow-left-classes="fa fa-chevron-left g-left-0"
data-arrow-right-classes="fa fa-chevron-right g-right-0"

Индикаторы страниц (разбивка на страницы)

Атрибут добавляет элемент пагинации и устанавливает его классы.

 data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-60 text-center"

Количество слайдов на экране 

 data-slides-show=" 3"

Количество слайдов, переключаемых за одну страницу 

 data-slides-scroll="2"

Включить/выключить автоматическую прокрутку 

 data-autoplay="true"
Скорость автоматической прокрутки in миллисекунды 

 data-speed="1000"

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

 data-fade="true"

Внимание! Корректно работает только с data-slides-show=»1″

Вертикальный слайдер 

 data-vertical="true"

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

Количество строк 

 data-rows="2"

Параметры data-slides-show и data-slides-scroll в многострочном слайдере не влияют на количество слайдов, но влияют количество столбцов.

Цикл слайд-шоу

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

 data-infinite="true"

Адаптивность

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

В атрибуте должен быть передан массив объектов. Каждый объект должен содержать:

  • точка останова — размер экрана в пикселях. Правило применяется для экранов указанного размера и меньше.
  • settings — массив настроек, используемых для данного правила. Имена настроек отличаются от имен атрибутов данных. Список имен для ранее упомянутых атрибутов:
    • стрелкиКласс
    • предыдущаяСтрелка
    • следующаяСтрелка
    • точекКласс
    • слайдыToShow
    • слайдыToScroll
    • автовоспроизведение
    • autoplaySpeed ​​
    • пауза при наведении
    • выцветание
    • вертикальный 
 ответ на данные='[{
   "точка останова": 1200,
   "настройки": {
      "слайдтошоу": 5
   }
}, {
   "точка останова": 992,
   "настройки": {
      "слайдтошоу": 3
   }
}, {
   "точка останова": 768,
   "настройки": {
      "слайдтошоу": 2
   }
}, {
   "точка останова": 576,
   "настройки": {
      "слайдтошоу": 1
   }
}]'

Пример

См. примеры блоков этого типа в нашем репозитории с помощью методов landing.block.getmanifestfile и landing.block.getrepository. Их коды:

  • 01.big_with_text
  • 01.big_with_text_blocks
  • 28.5.team_4_cols_slider
  • 39.1.five_blocks_carousel
  • 45.2.gallery_app_with_slider — с галереей
  • и многие другие

Общий пример:

 <дел
    данные-стрелки-классы = "u-стрелка-v1 g-абсолютно-центрированный--y g-width-45 g-height-45 g-color-white g-bg-primary"
    data-arrow-left-classes="fa fa-chevron-left g-left-0"
    data-arrow-right-classes="fa fa-chevron-right g-right-0"
    data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-60 text-center"
    данные-слайды-шоу = "3"
    данные-слайды-прокрутка = "2"
    данные-автовоспроизведение = "истина"
    скорость передачи данных = "1000"
    данные-пауза-наведения = "истина"
    данные-ответ = '[
      {
         "точка останова": 768,
         "настройки": {
            "слайдтошоу": 2
         }
      }, {
         "точка останова": 576,
         "настройки": {
            "слайдтошоу": 1
         }
      }
   ]'
>

   <дел>
      <дел>
          
Слайд 1
<дел> <дел>

Слайд 2