Disable the opencart slideshow when only one banner available

The default behavior of the opencart module "banners" doesn't check how many banners are provided. This causes the banner to briefly glimpse every few seconds if there is only one banner to be displayed.

In that case the banner should remain static and the slideshow should be disabled.

How to disable the opencart slideshow?

By editing a few lines in the opencart code we can easily disable the slideshow when there is only one banner in the system. As soon as we add multiple banners, we want the slideshow to kick in again and act as before, alternating the banners every few seconds.



Open your ftp editor and locate the file

catalog/view/theme/default/template/extension/module/banner.tpl
# path may differ when using another theme

Replace the original code

<div id="banner<?php echo $module; ?>" class="owl-carousel">
  <?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"><!--
$('#banner<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: false,
	pagination: false,
	transitionStyle: 'fade'
});
--></script>

with the below code



<?php
$bannernr = count($banners);
$class = ($bannernr>1) ? "owl-carousel" : "";
?>
<div id="banner<?php echo $module; ?>" class="<?php echo $class; ?>">
  <?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>
<?php if($bannernr>1){ ?>
<script type="text/javascript"><!--
$('#banner<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	singleItem: true,
	navigation: false,
	pagination: false,
	transitionStyle: 'fade'
});
--></script>
<?php } ?>

The first 2 lines check how many banners are present, if more than one is found, the "owl-carousel" class is added to the banner element. In the other case it is not and the javascript code to animate the banners is disabled.

Removing the class "owl-carousel" is required, if not removed the banner will be hidden from sight

Created on : 2017/01/23 - Last updated on : 2017/01/23

Back