vampirehunter Posted January 24, 2015 Share Posted January 24, 2015 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. Link to comment Share on other sites More sharing options...
PupStar Posted January 24, 2015 Share Posted January 24, 2015 @@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 Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted January 24, 2015 Share Posted January 24, 2015 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 Link to comment Share on other sites More sharing options...
PupStar Posted January 24, 2015 Share Posted January 24, 2015 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 Link to comment Share on other sites More sharing options...
♥Gyakutsuki Posted January 24, 2015 Share Posted January 24, 2015 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 Link to comment Share on other sites More sharing options...
vampirehunter Posted January 24, 2015 Author Share Posted January 24, 2015 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. Link to comment Share on other sites More sharing options...
vampirehunter Posted January 24, 2015 Author Share Posted January 24, 2015 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) Link to comment Share on other sites More sharing options...
ringo667 Posted January 26, 2015 Share Posted January 26, 2015 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. Link to comment Share on other sites More sharing options...
vampirehunter Posted January 26, 2015 Author Share Posted January 26, 2015 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. Link to comment Share on other sites More sharing options...
ringo667 Posted January 26, 2015 Share Posted January 26, 2015 Yes here ist a link to the Shop: http://kuerzer.de/NQ914pFUM Link to comment Share on other sites More sharing options...
ringo667 Posted January 26, 2015 Share Posted January 26, 2015 with which code is output the Carousell in header? Link to comment Share on other sites More sharing options...
ringo667 Posted January 26, 2015 Share Posted January 26, 2015 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 Link to comment Share on other sites More sharing options...
vampirehunter Posted January 27, 2015 Author Share Posted January 27, 2015 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 Link to comment Share on other sites More sharing options...
♥Tsimi Posted January 27, 2015 Share Posted January 27, 2015 I like the side categories box, is that a modified css? what did you use for that nice slide effect on the categories?! http://www.oscommerce.com/forums/topic/397547-tep-draw-categories-tree-finally-no-recursion-just-one-mysql-query/?p=1706646 Link to comment Share on other sites More sharing options...
ringo667 Posted January 27, 2015 Share Posted January 27, 2015 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? Link to comment Share on other sites More sharing options...
auzStar Posted January 28, 2015 Share Posted January 28, 2015 @@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-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
auzStar Posted January 28, 2015 Share Posted January 28, 2015 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-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
auzStar Posted January 28, 2015 Share Posted January 28, 2015 @@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-onsAdvanced Cache Control Tool for osCommerce 2.3.x (non-bootstrap) Download SupportAjax Product Listing for osC 2.3.4 (bootstrap) Download SupportCategory New Products Carousel for osC 2.3.4 (bootstrap) Download SupportCategory Popular Products Carousel for osC 2.3.4 (bootstrap) Download SupportCustomer Testimonials for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportFront Page New Products Carousel for osC 2.3.4 (bootstrap) Download SupportIndex Nested - Product Listing for osC 2.3.4 (bootstrap) Download SupportMatch Categories in Search Results for osCommerce versions 2.3.x (non-bootstrap) Download SupportModular Category Page for osC 2.3.4 (bootstrap) Download SupportNEW Australia Post Shipping Modules for osCommerce 2.3.x (non-bootstrap) Download SupportNEW Equal Height Module for osC 2.3.4 (bootstrap) Download SupportProducts Low Stock Report for osC 2.3.x (bootstrap and non-bootstrap) Download SupportTwitter Typeahead Autocomplete Search for osCommerce 2.3.4 (bootstrap and non-bootstrap) Download SupportUpcoming Products Modules for osC 2.3.4 (bootstrap) Download Support Assisted Add-onsScroll Boxes for osCommerce 2.3.x (bootstrap and non-bootstrap) Download Support Bootstrap Add-ons created by other membersosCommerce Bootstrap Addons and Code Link to comment Share on other sites More sharing options...
vampirehunter Posted January 29, 2015 Author Share Posted January 29, 2015 @@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.'); ?> Link to comment Share on other sites More sharing options...
OSC-Sevilla Posted February 2, 2015 Share Posted February 2, 2015 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. Link to comment Share on other sites More sharing options...
ringo667 Posted February 4, 2015 Share Posted February 4, 2015 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... Link to comment Share on other sites More sharing options...
Guest Posted February 19, 2015 Share Posted February 19, 2015 @@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 Link to comment Share on other sites More sharing options...
vampirehunter Posted February 26, 2015 Author Share Posted February 26, 2015 I think its hyperlinking to the div tag specified. Link to comment Share on other sites More sharing options...
vampirehunter Posted February 27, 2015 Author Share Posted February 27, 2015 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 Link to comment Share on other sites More sharing options...
Jackdeth Posted February 27, 2015 Share Posted February 27, 2015 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? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.