Jump to content
vampirehunter

Bootstrap Home Page Carousel Banner Slider Module Plugin Complete - Testing Welcome

Recommended Posts

Ok, using Gergley's and Kymation's existing code and modifying and refining it slightly. I have managed to make the following module which hopefully is useful for people here:

If anyone wants to try it out and check for any issues, that would be great. Any ideas for tweaking the code are also welcome, but this is a working module.

 

 

 

A bootstrap carousel for the Home Page (Index Page) Only which will display any banners created from the Banner Manager in Admin.

 

I've tested this, just 3 Files to install and just install via Admin, Modules and under Content.

 

Its titled

 

"Carousel Banners For Home Page" to make it easy to find.

 

You can also set the content width of the carousel container which I've added in as a configuration option.

 

 

So here are the files to insert:

 

 

1.) Includes/modules/content/header/cm_carousel.php

<?php
/*
  $Id: banner_rotator.php v1.1.2 20110108 Kymation $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

class cm_carousel {

    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_carousel() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));
      
      $this->title = MODULE_FRONT_PAGE_BANNER_ROTATOR_TITLE;
      $this->description = MODULE_FRONT_PAGE_BANNER_ROTATOR_DESCRIPTION;

      if (defined('MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS')) {
        $this->sort_order = MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER;
        $this->enabled = (MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS == 'True');
      }
    }



    function execute() {
    
     global $PHP_SELF, $oscTemplate, $cPath;
      
      $content_width = (int)MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH;
      


      if ($PHP_SELF == 'index.php' && $cPath == '') {
        // Set the Javascript to go in the header
        $footer_scripts = '<script>' . '$(\'.carousel\').carousel({ interval: ' . ( int ) MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME . '})' . "\n" .'</script>';
        
        $oscTemplate->addBlock($footer_scripts, 'footer_scripts');


// Set the banner rotator code to display on the front page
        $banner_query_raw = "
                  select
                    banners_id,
                    banners_url,
                    banners_image,
                    banners_html_text
                  from
                    " . TABLE_BANNERS . "
                  where
                    banners_group = '" . MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP . "'
                    and status
                  order by banners_id " . MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER . "
                  limit
                    " . MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY;


        $banner_query = tep_db_query($banner_query_raw);
        
        if (tep_db_num_rows($banner_query) > 0) {
          $body_text = '<!-- Banner Rotator BOF -->' . "\n";
          $body_text .= '  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">' . "\n";

          $indicators = '<!-- Indicators -->
          <ol class="carousel-indicators">';
          $wrapper_slides = '<!-- Wrapper for slides -->' . "\n" .
          '<div class="carousel-inner">';

          $background = $this->createImage(544, 172, 118, 115, 115);

          $counter = 0;
          while ($banner = tep_db_fetch_array($banner_query)) {
            $indicators .= '  <li data-target="#carousel-example-generic" data-slide-to="' . $counter . '"' . ($counter == 0 ? 'class="active"' : '') . '></li>';

            $wrapper_slides .= '      <div class="item' . ($counter == 0 ? ' active' : '') . '">';
            if ($banner['banners_url'] != '') {
              $wrapper_slides .= '<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=banner&goto=' . $banner['banners_id']) . '">';
            }

              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);


            if ($banner['banners_image'] !== '') {
              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);
              $wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], '', 544, 172);
              $wrapper_slides .= '<div class="carousel-caption"> </div>';
            } else {
              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . 'pixel_silver.gif', 'alt', 544, 172 );
              $wrapper_slides .= '<img class="img-responsive" alt="544x172" src="' . $background . '" />';
              $wrapper_slides .= '<div class="carousel-caption">' . $banner['banners_html_text'] . '</div>';
            }

            if ($banner['banners_url'] != '') {
              $wrapper_slides .= '</a>';
            }

            $wrapper_slides .= ' </div>' . "\n";
            $counter++;
          }

          $indicators .= '</ol>';  // close indicator

          $wrapper_slides .= '</div>';  // wrapper close

          $controls = '  <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          </a>';

          // öszefuzés
          $body_text .= $indicators . $wrapper_slides . $controls;
 
          $body_text .= '  </div>' . "\n";
          $body_text .= '  <div class="clearfix"></div>' . "\n";
          $body_text .= '<!-- Banner Rotator EOF -->' . "\n";
          
          $carousel = $body_text;

          $oscTemplate->addBlock($carousel, $this->group);
        }
  




      
      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/carousel.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
      
      
    }

}

 function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS');
    }
                
                

                                                                                                                                                                                                                                                                                                                                                                      
    function install() {
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH', '12', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Banner Rotator', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS', 'True', 'Do you want to show the banner rotator?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Fade Time', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME', '500', 'The time it takes to fade from one banner to the next. 1000 = 1 second', '6', '0', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Hold Time', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME', '4000', 'The time each banner is shown. 1000 = 1 second', '6', '0', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Banner Order', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER', 'desc', 'Order that the Banner Rotator uses to show the banners.', '6', '0', 'tep_cfg_select_option(array(\'asc\', \'desc\'), ', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Rotator Group', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP', 'rotator', 'Name of the banner group that the Banner Rotator uses to show the banners.', '6', '0', now())");
      tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Rotator Max Banners', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY', '4', 'Maximum number of banners that the Banner Rotator will show', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array (
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY'
      );
    }
    
    
      function createImage($width = 900, $height = 500, $red = 255, $green = 0, $blue = 0) {
      $im = imagecreatetruecolor($width, $height);

      // sets background to red
      $color = imagecolorallocate($im, (int)$red, (int)$green, (int)$blue);
      imagefill($im, 0, 0, $color);

      //header('Content-type: image/png');
      ob_start();
      imagepng($im);
      $contents =  ob_get_contents();
      ob_end_clean();
      imagedestroy($im);

      $imgData = base64_encode($contents);
      $src = 'data: image/png;base64,'.$imgData;
      return $src;
    }



  
  } 
  

?>

2.) Includes/modules/content/header/templates/carousel.php

<div id="carousel" class="col-sm-<?php echo $content_width; ?>">

<?php

echo $carousel;


?>

</div>

3.) Includes/languages/english/modules/content/header/cm_carousel.php

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  define('MODULE_FRONT_PAGE_BANNER_ROTATOR_TITLE', 'Carousel Banners For Home Page');
  define('MODULE_FRONT_PAGE_BANNER_ROTATOR_DESCRIPTION', 'Adds a carousel to Home Page with banner images set from Banner Manager.');
  
  
  
?>
  
  

The only thing needed is to style your carousel in your user.css file by specifying whichever minimum heights you want or using bootstrap media queries for various screens.

 

 

I've checked the code, and its working. Feel free to improve and offer any tips on this.

 

Screenshot attached of the admin options and carousel on home page. I just used the stock oscommerce logo as a banner in this one.

post-214618-0-82017800-1422107783_thumb.jpg

post-214618-0-60335900-1422108022_thumb.jpg

Edited by vampirehunter

Share this post


Link to post
Share on other sites

@@vampirehunter

 

well done, it works well :thumbsup:

 

just do us all a favour and stop posting in lots of different threads :P it makes it a bloomin nightmare to follow you lol


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

have you tested with and without url, html text and in different versions of IE ?

there are the kind of things that messed up my banner carrousel (not a BS version)


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

have you tested with and without url, html text and in different versions of IE ?

there are the kind of things that messed up my banner carrousel (not a BS version)

 

testing locally seems to work ok


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

nice

 

Sugestion

 

change FILENMAE_REDIRECT BY redirect.php

and " . TABLE_CONFIGURATION . " by configuration

 

==> next release not include this element. It's better to do now andfor new contribution or update, I think  :-

 

if you want full size on image :

 

.item img {
background-color: #fff;
width:100%;
}



Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

 

Share this post


Link to post
Share on other sites

Thanks.

Yes, I was actually looking at changing those bits as I was comparing with the new modules that are standard with osc bs.

 

As I used gergely and kymations older code, you are correct, I will update those bits.

 

Many thanks.

Share this post


Link to post
Share on other sites

Hi. I will do some tests on different browsers.

Hopefully it should be compatible.

 

 

 

 

have you tested with and without url, html text and in different versions of IE ?

there are the kind of things that messed up my banner carrousel (not a BS version)

Share this post


Link to post
Share on other sites

i have installes this files and installed via Admin --> Modules --> Header,

 

but the Shop shows nothing.

 

Sorry for my bad langue Skill..., i am from Germany.

Share this post


Link to post
Share on other sites

i have installes this files and installed via Admin --> Modules --> Header,

 

but the Shop shows nothing.

 

Sorry for my bad langue Skill..., i am from Germany.

Check your steps. It definitely works.

You have to create banners in banner manager and assign them the name of the banner group which is rotator by default.

Share this post


Link to post
Share on other sites

now it works, i have the lost code found,

 

there was no

<div class="modular-header">
<?php echo $oscTemplate->getContent('header'); ?>
</div>

 

in the header.php
 

Share this post


Link to post
Share on other sites

now it works, i have the lost code found,

 

there was no

<div class="modular-header">

<?php echo $oscTemplate->getContent('header'); ?>

</div>

 

in the header.php

 

 

hi

great.

i think maybe because you modified something before it was not showing.

 

I am using a default bootstrap installation and it works fine on that.

 

I like the side categories box, is that a modified css? what did you use for that nice slide effect on the categories?!

thanks

Edited by vampirehunter

Share this post


Link to post
Share on other sites

i want to show

$banner['banners_html_text']

as a tooltip

 

i make this so:

<a href="' . tep_href_link(FILENAME_REDIRECT, 'action=banner&goto=' . $banner['banners_id']) . '" data-original-title="'.$banner['banners_html_text'].'" data-toggle="tooltip" title="" data-placement="left">


But this show only a Part of the Tooltip, is it possible to show all of the Tooltip?

post-129280-0-75858000-1422342994_thumb.jpg

Share this post


Link to post
Share on other sites

@@vampirehunter

 

In the cm_carousel.php module file, MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME should be MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME, since the bootstrap carousel only has a delay time (pause) for the interval option http://getbootstrap.com/javascript/#carousel-options. The fade time setting in that case doesn't do anything and can be removed.

 

You should also include the carousel id when initializing the carousel in-case there are other carousels in the store (prevents conflicts):

$(\'#carousel-example-generic.carousel\').carousel({

And you could also include swipe for the banner for mobile\touch screen devices (maybe have an option to enable/disable).

  <script>
    $(document).ready(function() {
      $("#carousel-example-generic").swiperight(function() {
        $(this).carousel('prev');
      });
      $("#carousel-example-generic").swipeleft(function() {
        $(this).carousel('next');
      });
    });
  </script>

cheers


My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Share this post


Link to post
Share on other sites

Also, this line is not needed

$oscTemplate->addBlock($carousel, $this->group);

since this one further below does the job

$oscTemplate->addContent($template, $this->group);

My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Share this post


Link to post
Share on other sites

@@vampirehunter

 

And you could also include swipe for the banner for mobile\touch screen devices (maybe have an option to enable/disable).

  <script>
    $(document).ready(function() {
      $("#carousel-example-generic").swiperight(function() {
        $(this).carousel('prev');
      });
      $("#carousel-example-generic").swipeleft(function() {
        $(this).carousel('next');
      });
    });
  </script>

 

Sorry!  :blush: Forgot to add that this js file is required for the swipe feature (attached), and this line to be included:

<script src="ext/jquery/jquery.mobile.custom.min.js"></script>

jquery.mobile.custom.min.js.zip


My Add-ons
Advanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download Support
Ajax Product Listing for osC 2.3.4 (bootstrap) Download Support
Category New Products Carousel for osC 2.3.4 (bootstrap) Download Support
Category Popular Products Carousel for osC 2.3.4 (bootstrap) Download Support
Customer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download Support
Front Page New Products Carousel for osC 2.3.4 (bootstrap) Download Support

Index Nested - Product Listing for osC 2.3.4 (bootstrapDownload Support
Match Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download Support
Modular Category Page for osC 2.3.4 (bootstrap)
Download Support

NEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download Support
NEW Equal Height Module for osC 2.3.4 (bootstrapDownload Support
Products Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download Support
Twitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap)
Download Support

Upcoming Products Modules for osC 2.3.4 (bootstrap) Download Support

 
Assisted Add-ons
Scroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support
 
Bootstrap Add-ons created by other members
osCommerce Bootstrap Addons and Code

Share this post


Link to post
Share on other sites

@@vampirehunter

 

In the cm_carousel.php module file, MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME should be MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME, since the bootstrap carousel only has a delay time (pause) for the interval option http://getbootstrap.com/javascript/#carousel-options. The fade time setting in that case doesn't do anything and can be removed.

 

You should also include the carousel id when initializing the carousel in-case there are other carousels in the store (prevents conflicts):

$(\'#carousel-example-generic.carousel\').carousel({

And you could also include swipe for the banner for mobile\touch screen devices (maybe have an option to enable/disable).

  <script>
    $(document).ready(function() {
      $("#carousel-example-generic").swiperight(function() {
        $(this).carousel('prev');
      });
      $("#carousel-example-generic").swipeleft(function() {
        $(this).carousel('next');
      });
    });
  </script>

cheers

 

Hi you are correct.

Its actually mislabelled. Since i used the previous code from Gergeley, it seems they labelled the carousel hold time as fade time.

So i've removed the Fade Time from configuration as its not needed and relabelled it in $footer_scripts where it picks up that number.

If im in Admin and change the "fade time" as its currently labelled in admin section, it does indeed change the hold time and its nothing to do with fade.

 

So i've updated the code now and also removed that additional template loading line you also noted above, thanks.

 

This code has taken on point most of the above mentioned steps highlighted as follows.

 

1.) Renamed "TABLE CONFIGURATION" to configuration

2.) FILENAME_REDIRECT changed simply to redirect.php (Not totally sure if this is recommended?ive done it anyway)

3.) renamed in $footer_scripts, "MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME" to the correct "MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME"

4.) Removed MODULE_FRONT_PAGE_BANNER_ROTATOR_FADE_TIME from configuration install and key array

5.) Removed this line completely "$oscTemplate->addBlock($carousel, $this->group);"  as its already referenced further down by "$oscTemplate->addContent($template, $this->group);"

6.) Added the generic carousel ID to the javascript script.

 

Things to look at next.

 

1.) Add mobile swipe touch

2.) Have a look at the Tooltip question

 

 

Here's the current code updated. Just uninstall the previous version,  replace the files (just the first one really) with these and re-install.

 

 

1.) Includes/modules/content/header/cm_carousel.php

<?php
/*
  $Id: banner_rotator.php v1.1.2 20110108 Kymation $

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

class cm_carousel {

    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_carousel() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));
      
      $this->title = MODULE_FRONT_PAGE_BANNER_ROTATOR_TITLE;
      $this->description = MODULE_FRONT_PAGE_BANNER_ROTATOR_DESCRIPTION;

      if (defined('MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS')) {
        $this->sort_order = MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER;
        $this->enabled = (MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS == 'True');
      }
    }



    function execute() {
    
     global $PHP_SELF, $oscTemplate, $cPath;
      
      $content_width = (int)MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH;
      

      if ($PHP_SELF == 'index.php' && $cPath == '') {
        // Set the Javascript to go in the header
        $footer_scripts = '<script>' . '$(\'#carousel-example-generic.carousel\').carousel({ interval: ' . ( int ) MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME . '})' . "\n" .'</script>';
  
        $oscTemplate->addBlock($footer_scripts, 'footer_scripts');


// Set the banner rotator code to display on the front page
        $banner_query_raw = "
                  select
                    banners_id,
                    banners_url,
                    banners_image,
                    banners_html_text
                  from
                    " . TABLE_BANNERS . "
                  where
                    banners_group = '" . MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP . "'
                    and status
                  order by banners_id " . MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER . "
                  limit
                    " . MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY;


        $banner_query = tep_db_query($banner_query_raw);
        
        if (tep_db_num_rows($banner_query) > 0) {
          $body_text = '<!-- Banner Rotator BOF -->' . "\n";
          $body_text .= '  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">' . "\n";

          $indicators = '<!-- Indicators -->
          <ol class="carousel-indicators">';
          $wrapper_slides = '<!-- Wrapper for slides -->' . "\n" .
          '<div class="carousel-inner">';

          $background = $this->createImage(544, 172, 118, 115, 115);

          $counter = 0;
          while ($banner = tep_db_fetch_array($banner_query)) {
            $indicators .= '  <li data-target="#carousel-example-generic" data-slide-to="' . $counter . '"' . ($counter == 0 ? 'class="active"' : '') . '></li>';

            $wrapper_slides .= '      <div class="item' . ($counter == 0 ? ' active' : '') . '">';
            if ($banner['banners_url'] != '') {
              $wrapper_slides .= '<a href="' . tep_href_link('redirect.php', 'action=banner&goto=' . $banner['banners_id']) . '">';
            }

              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);


            if ($banner['banners_image'] !== '') {
              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], $banner['banners_html_text']);
              $wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], '', 544, 172);
              $wrapper_slides .= '<div class="carousel-caption"> </div>';
            } else {
              //$wrapper_slides .= tep_image(DIR_WS_IMAGES . 'pixel_silver.gif', 'alt', 544, 172 );
              $wrapper_slides .= '<img class="img-responsive" alt="544x172" src="' . $background . '" />';
              $wrapper_slides .= '<div class="carousel-caption">' . $banner['banners_html_text'] . '</div>';
            }

            if ($banner['banners_url'] != '') {
              $wrapper_slides .= '</a>';
            }

            $wrapper_slides .= ' </div>' . "\n";
            $counter++;
          }

          $indicators .= '</ol>';  // close indicator

          $wrapper_slides .= '</div>';  // wrapper close

          $controls = '  <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          </a>';

          // öszefuzés
          $body_text .= $indicators . $wrapper_slides . $controls;
 
          $body_text .= '  </div>' . "\n";
          $body_text .= '  <div class="clearfix"></div>' . "\n";
          $body_text .= '<!-- Banner Rotator EOF -->' . "\n";
          
          $carousel = $body_text;

        }
  

      ob_start();
      include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/carousel.php');
      $template = ob_get_clean();

      $oscTemplate->addContent($template, $this->group);
      
      
    }

}

 function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS');
    }
                
                

                                                                                                                                                                                                                                                                                                                                                                      
    function install() {
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Width', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH', '12', 'What width container should the content be shown in?', '6', '1', 'tep_cfg_select_option(array(\'12\', \'11\', \'10\', \'9\', \'8\', \'7\', \'6\', \'5\', \'4\', \'3\', \'2\', \'1\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Banner Rotator', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS', 'True', 'Do you want to show the banner rotator?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Hold Time', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME', '4000', 'The time each banner is shown. 1000 = 1 second', '6', '0', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Banner Order', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER', 'Desc', 'Order that the Banner Rotator uses to show the banners.', '6', '0', 'tep_cfg_select_option(array(\'Asc\', \'Desc\'), ', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Rotator Group', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP', 'rotator', 'Name of the banner group that the Banner Rotator uses to show the banners.', '6', '0', now())");
      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Banner Rotator Max Banners', 'MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY', '4', 'Maximum number of banners that the Banner Rotator will show', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array (
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_CONTENT_WIDTH',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_STATUS',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_SORT_ORDER',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_HOLD_TIME',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_BANNER_ORDER',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_GROUP',
        'MODULE_FRONT_PAGE_BANNER_ROTATOR_MAX_DISPLAY'
      );
    }
    
    
      function createImage($width = 900, $height = 500, $red = 255, $green = 0, $blue = 0) {
      $im = imagecreatetruecolor($width, $height);

      // sets background to red
      $color = imagecolorallocate($im, (int)$red, (int)$green, (int)$blue);
      imagefill($im, 0, 0, $color);

      //header('Content-type: image/png');
      ob_start();
      imagepng($im);
      $contents =  ob_get_contents();
      ob_end_clean();
      imagedestroy($im);

      $imgData = base64_encode($contents);
      $src = 'data: image/png;base64,'.$imgData;
      return $src;
    }







  
  
  } 
  

?>

2.) Includes/modules/content/header/templates/carousel.php

<div id="carousel" class="col-sm-<?php echo $content_width; ?>">

<?php

echo $carousel;


?>

</div>

3.) Includes/languages/english/modules/content/header/cm_carousel.php

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  define('MODULE_FRONT_PAGE_BANNER_ROTATOR_TITLE', 'Carousel Banners For Home Page');
  define('MODULE_FRONT_PAGE_BANNER_ROTATOR_DESCRIPTION', 'Adds a carousel to Home Page with banner images set from Banner Manager.');
  
  
  
?>
Edited by vampirehunter

Share this post


Link to post
Share on other sites

I have added code for an additional element in banner manager in order captions can be added.

 

HTML TEXT 1: <H3>

HTML TEST 2: <p>

 

NOTE: i have added extra an extra column in SQL banners_html_text2, and applied this accordingly.

_____________________________________________________________

 

if ($banner['banners_image'] !== '') {

$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], '', 1800, 600);

if ($banner['banners_html_text'] . $banner['banners_html_text2'] !== '') {

$wrapper_slides .= '<div class="carousel-caption">';

 

if ($banner['banners_html_text'] !== '') {

$wrapper_slides .= '<h3>'. $banner['banners_html_text'] . '</h3>';

}

 

if ($banner['banners_html_text2'] !== '') {

$wrapper_slides .= '<p>'. $banner['banners_html_text2'] . '</p>';

}

 

$wrapper_slides .= '</div>';

}

 

} else {

$wrapper_slides .= '<img class="img-responsive" alt="544x172" src="' . $background . '" />';

$wrapper_slides .= '<div class="carousel-caption">' . $banner['banners_html_text'] . '</div>';

}

_____________________________________________

 

NOTE:

 

The default image size was: $banner['banners_image'], '', 544, 172);

I changed this to: 1800, 600 - now i will add a config for this in admin > configuration > images.

Edited by OSC-Sevilla

Share this post


Link to post
Share on other sites

wich class create round corners?

 

i have tested

 

.carousel

{

order-bottom-left-radius: 8px;      border-bottom-right-radius: 8px;      border-top-left-radius: 8px;      border-top-right-radius: 8px;

}

 

but ho corners from the controlers doesnt round...

Share this post


Link to post
Share on other sites

@@vampirehunter

Hi

 

Great addon, just entrigued as to what the highlighted in red means, please excuse my lack of knowledge>

 

<a data-slide="prev" role="button" href="#carousel-example-generic" class="left carousel-control">
          <span class="glyphicon glyphicon-chevron-left"></span>
          </a>

 

Cheers

Grandpa

Share this post


Link to post
Share on other sites

I have added code for an additional element in banner manager in order captions can be added.

 

HTML TEXT 1: <H3>

HTML TEST 2: <p>

 

NOTE: i have added extra an extra column in SQL banners_html_text2, and applied this accordingly.

_____________________________________________________________

 

if ($banner['banners_image'] !== '') {

$wrapper_slides .= tep_image(DIR_WS_IMAGES . $banner['banners_image'], '', 1800, 600);

if ($banner['banners_html_text'] . $banner['banners_html_text2'] !== '') {

$wrapper_slides .= '<div class="carousel-caption">';

 

if ($banner['banners_html_text'] !== '') {

$wrapper_slides .= '<h3>'. $banner['banners_html_text'] . '</h3>';

}

 

if ($banner['banners_html_text2'] !== '') {

$wrapper_slides .= '<p>'. $banner['banners_html_text2'] . '</p>';

}

 

$wrapper_slides .= '</div>';

}

 

} else {

$wrapper_slides .= '<img class="img-responsive" alt="544x172" src="' . $background . '" />';

$wrapper_slides .= '<div class="carousel-caption">' . $banner['banners_html_text'] . '</div>';

}

_____________________________________________

 

NOTE:

 

The default image size was: $banner['banners_image'], '', 544, 172);

I changed this to: 1800, 600 - now i will add a config for this in admin > configuration > images.

could you post up the full code?

thanks

Share this post


Link to post
Share on other sites

I installed this carousel and all seems fine...  but I am getting this error in my admin...

 

Warning: Cannot modify header information - headers already sent by (output started at /home/site/catalog/includes/languages/english/modules/content/header/cm_carousel.php:19) in /home/site/catalog/admin/includes/functions/general.php on line 38

 

and similar errors...

 

I usually got it on installing the module and any time I save a change to it... 

 

I turned off the navbar module as I don't want it on my site...  does this maybe have anything to do with it?

 

I am still adding in banner images, could that be the problem?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×