Октябрь 2017
Автор: Рубрика: Магазин opencart Комментариев нет

Добавим opencart слайдер с атрибутами и стилизуем

Добавим opencart слайдер

В магазин opencart добавлен слайдер, остается его только настроить.

Slider находится в выпадающем списке модули в меню расширения.

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

Ширину для баннеров сделаем на девять колонок bootstrap сетки 850, а ширину 400.

В поле баннер будут выводиться все изображения.

Перейдем в меню с баннерами и добавим новые.

Добавляем новые баннеры для слайдера товаров.

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

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

баннеры для слайдера товаров в opencart

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

Здесь можно добавлять новые плагины на главную страницу, либо отключить, которые установлены по умолчанию.

Добавим свои стили для модуля слайдер opencart2.

Для стилизации базовых вещей откроем файл stylesheet.sass.

Запустим gulp для магазина и openserver, где мы создаем свой уникальный шаблон.

  1. Сделаем отступ от top-menu 40 пикселей.
  2. Добавим border: 3px solid #b641b0 бордюр к слайдеру и закруглим края.
  3. Уменьшим иконку для перелистывания изображений до 20 пикселей. Сперва в инспекторе определим класс, для задания своего размера. Зададим класс в файле stylesheet.sass.

стили для модуля слайдер opencart2

Код в stylesheet.sass.

Добавим слева вывод категории.

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

В левую колонку добавим категории, которые создали и сохраняем.

выводbv категории для slider opencart

Зададим атрибуты slider.

По умолчанию слишком быстро меняются изображения у слайдера с товарами.

Изменим этот параметр файлом в нашей теме C:\OpenServer\domains\opencart.loc\catalog\view\theme\my\template\extension\module\ slideshow.tpl, этот файл мы скопируем в свою тему из основной.

Открываем на редактирование и задаем атрибуты.

  • autoPlay: 5000 увеличим время перелистывания.
  • pagination: false убираем внизу точки навигации.
  • stopOnHover: true когда наведем мышкой на баннер, он перестанет менять картинки.
  • sliderSpeed:1000 этот атрибут используется совместно с другими, ниже.
  • paginationSpeed: 1000 скорость смены картинок
  • rewindSpeed: 1000 скорость перемотки.
  • loop: true атрибут разрешает зациклить воспроизведение картинок.

Код в slideshow.tpl

Комментариев нет

Комментарии:

Комментарии запрещены