OpenCart – настраиваем эффекты перехода для модуля слайдшоу

В последних версиях OpenCart 2 и OcStore несколько урезан функционал слайдера. Для того чтобы восстановить этот функционал необходимы не сложные манипуляции с кодом буквально в паре файлов. В OpenCart 3 и вовсе будет достаточно указать эффект слайдшоу в одном файле.

Настраиваем смену картинок слайдшоу Owl Carousel в OpenCart 2 и OcStore

Эффект смены картинок (баннеров) в стандартном модуле слайдшоу второго опенкарта только один - "пролистывание". Однако использующийся в версиях OpenCart 2 и свежих версиях OcStore 2, плагин owl Carousel, способен несколько на большие. Так среди доступных анимаций, есть следующие эффекты:

"fade" - прозрачное растворение;
"backSlide" - перед переключением, слайды отъезжают на второй план.
"goDown" - новый слайд падает сверху.
"fadeUp" - увеличение с растворением (именно fadeUp, иногда в документации ошибочно пишут "scaleUp")

Эти анимации не будут работать если в контролере слайдшоу не подключен CSS файл переходов. Местонахождение файла переходов Owl Carousel в OpenCart 2 и OcStore:

catalog\view\javascript\jquery\owl-carousel\owl.transitions.css

Для того чтобы задействовать дополнительную анимацию необходимо:

1 - Перейти в контролер слайдшоу, который находиться в

catalog\controller\extension\module\slideshow.php

2 - найти строку с подключением стилевого файла Owl Carousel -

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');

3 - после найденной строки добавить подключение файла эффектов перехода:

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

4 - перeйти в видовой файл слайдшоу

\catalog\view\theme\default\template\extension\module\slideshow.tpl

5 - добавить опцию перехода в настройки слайдера, например "fade" для затемнения:

transitionStyle : "fade"

Не забудьте в 5 пункте, поставить запятую у предыдущей опции

Файл контроллера слайдшоу для OpenCart 2 и OcStore в итоге должен выглядеть так:

<?php
class ControllerExtensionModuleSlideshow extends Controller {
	public function index($setting) {
		static $module = 0;		

		$this->load->model('design/banner');
		$this->load->model('tool/image');

		$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
		$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
		$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');

		$data['banners'] = array();

		$results = $this->model_design_banner->getBanner($setting['banner_id']);

		foreach ($results as $result) {
			if (is_file(DIR_IMAGE . $result['image'])) {
				$data['banners'][] = array(
					'title' => $result['title'],
					'link'  => $result['link'],
					'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height'])
				);
			}
		}

		$data['module'] = $module++;

		return $this->load->view('extension/module/slideshow', $data);
	}
}

<?php

class ControllerExtensionModuleSlideshow extends Controller {

public function index($setting) {

static $module = 0;

$this->load->model('design/banner');

$this->load->model('tool/image');

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');

$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');

$data['banners'] = array();

$results = $this->model_design_banner->getBanner($setting['banner_id']);

foreach ($results as $result) {

if (is_file(DIR_IMAGE . $result['image'])) {

$data['banners'][] = array(

'title' => $result['title'],

'link' => $result['link'],

'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height'])

);

}

$data['module'] = $module++;

return $this->load->view('extension/module/slideshow', $data);

}

Видовой файл слайдшоу Owl Carousel в OpenCart 2 должен выглядеть так:

<div id="slideshow<?php echo $module; ?>" class="owl-carousel sssss" style="opacity: 1;">
  <?php foreach ($banners as $banner) { ?>
  <div class="item">
    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
    <?php } ?>
  </div>
  <?php } ?>
</div>
<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: true,
	navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
	pagination: true,
        transitionStyle : "fade"
});
--></script>

<div id="slideshow<?php echo $module; ?>" class="owl-carousel sssss" style="opacity: 1;">

<?php foreach ($banners as $banner) { ?>

<?php if ($banner['link']) { ?>

<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>

<?php } else { ?>

<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />

<?php } ?>

</div>

<?php } ?>

</div>

$('#slideshow<?php echo $module; ?>').owlCarousel({

items: 6,

autoPlay: 3000,

singleItem: true,

navigation: true,

navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],

pagination: true,

transitionStyle : "fade"

});

--></script>

Почему не работает "scaleUp" в Owl Carousel?

Принцип подключения эффектов перехода в Owl Carousel виден из картинке ниже. К название эффекта перехода добавляются префиксы CSS классов анимаций, а потом применяются к слайдеру. Но в документации иногда ошибочно приписывают эффект "scaleUp", вместо "fadeUp", ввиду того, что даже в оригинальном архиве с CSS файлами перехода в комментариях допущена ошибка и вместо "fadeUp" написано "scaleUp". Сейчас сайт с официальной документацией не функционирует (будьте осторожны, так как домен с оф. документацией перенаправляет на вредоносные сайты), поэтому в различных инструкциях в сети создалась небольшая путаница. В любом случае вы можете открыть свой CSS файл переходов ("owl.transitions.css") и посмотреть какие классы переходов там есть.

Как изменить эффект смены картинок в банере/слайдшоу в OpenCart 3?

Здесь немного проще, так как в OpenCart 3 используется слайдер jQuery Swiper и дополнительно подключать ничего не придется. Слайдер имеет следующие эффекты перехода (смены картинок) в слайдшоу:

"slide" - перелистывание, включено по умолчанию;
"fade" - затемнение;
"cube" - псевдо 3d вращения слайдера с эфектом куба;
"coverflow" - перелистывание с уменьшением предыдущего слайда;
"flip" - 3d вращение вокруг центра.

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

catalog\view\theme\default\template\extension\module\slideshow.twig

Для того чтобы добавить эффект затемнения при смене картинки, используйте анимацию "fade":

effect: 'fade'

После добавления эффекта необходимо сбросить кэш модификаторов в админке OpenCart и сбросить кэш в вашем браузере (в большинстве случаев - Ctrl-R).

Если вы добавляете эффект в конец не забудьте поставить запятую у предыдущей опции, в итоге видовой файл слайдшоу будет выглядеть так:

<div class="swiper-viewport">
  <div id="slideshow{{ module }}" class="swiper-container">
    <div class="swiper-wrapper"> {% for banner in banners %}
      <div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div>
      {% endfor %} </div>
  </div>
  <div class="swiper-pagination slideshow{{ module }}"></div>
  <div class="swiper-pager">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>
<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 1,
	pagination: '.slideshow{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
	prevButton: '.swiper-button-prev',
	spaceBetween: 30,
	autoplay: 2500,
	autoplayDisableOnInteraction: true,
	loop: true, 
	effect: 'fade'
});
--></script>

<div class="swiper-wrapper"> {% for banner in banners %}

<div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div>

{% endfor %} </div>

</div>

</div>

$('#slideshow{{ module }}').swiper({

mode: 'horizontal',

slidesPerView: 1,

pagination: '.slideshow{{ module }}',

paginationClickable: true,

nextButton: '.swiper-button-next',

prevButton: '.swiper-button-prev',

spaceBetween: 30,

autoplay: 2500,

autoplayDisableOnInteraction: true,

loop: true,

effect: 'fade'

});

--></script>

На 24 строке поставили запятую после опции "loop:true" и добавили на 25 строку эффект перехода "fade".

Также стоит упомянуть, что эффекты в слайдере Swiper можно дополнительно настраивать, например эффект "coverflow", имеет пять дополнительных настроек, среди которых вращение слайдов при перелистывание, тени, смещение и другие - подробнее в документации.

Tags:

jQuery OcStore OpenCart

(1 votes, average: 10,00 out of 10)

Загрузка...