vampirehunter Posted March 9, 2015 Share Posted March 9, 2015 Can someone explain the correct way to add a "back to top" arrow icon at the bottom of the BS oscommerce? Whats the correct way to add it in? Link to comment Share on other sites More sharing options...
azpro Posted March 17, 2015 Share Posted March 17, 2015 Here you can find snippet: http://bootsnipp.com/snippets/featured/back-to-top Add CSS to stylesheet user.css #toTop{ position: fixed; bottom: 10px; right: 10px; cursor: pointer; display: none; } Add js to template_bottom.php $(document).ready(function(){ $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>'); $(window).scroll(function () { if ($(this).scrollTop() != 0) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); That's it! Off course you should wrap this all in a footer_scripts module to do it really right ... I would say ht_product_colorbox.php is a good example how to create yur own module. Link to comment Share on other sites More sharing options...
greasemonkey Posted March 21, 2015 Share Posted March 21, 2015 @@azpro thank you very much for this hint. I've made this into a header_tag module so there are no core changes (to template_bottom.php) required... Please someone test to be sure it works (attached). The only issue I see is the "back to top" button" disappears behind the class"thumbnail equal-height wrapper" (the new product boxes) on index.php. I was trying something like; display: visible !important; but no joy. Any ideas????? I will add as a contribution if I can get this fixed.... BOOTSTRAP - back to top.zip Link to comment Share on other sites More sharing options...
multimixer Posted March 21, 2015 Share Posted March 21, 2015 @@greasemonkey There is no such rule: "display:visible" link. What you probably need is z-index link I think that @@De Dokta already did something like that? My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
De Dokta Posted March 21, 2015 Share Posted March 21, 2015 @@greasemonkey @@multimixer Yes I did and I did it a little different, but I don't remember if and/or where I posted it :- includes\modules\header_tags\ht_back_to_top_btn.php: <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright © 2015 osCommerce Released under the GNU General Public License */ class ht_back_to_top_btn { var $code = 'ht_back_to_top_btn'; var $group = 'footer_scripts'; var $title; var $description; var $sort_order; var $enabled = false; function ht_back_to_top_btn() { $this->title = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_TITLE; $this->description = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_DESCRIPTION; if ( defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS') ) { $this->sort_order = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER; $this->enabled = (MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS == 'True'); } } function execute() { global $oscTemplate; $vertical_position = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION; $speed = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED; $output = <<<EOD <script> $(document).ready(function(){ $('body').append('<div id="toTop" class="btn btn-lg btn-info"><span class="glyphicon glyphicon-chevron-up"></span></div>'); $(window).scroll(function () { if ($(this).scrollTop() > $vertical_position) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function(){ $("html, body").animate({ scrollTop: 0 }, $speed); return false; }); }); </script> EOD; $oscTemplate->addBlock($output, $this->group); } function isEnabled() { return $this->enabled; } function check() { return defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS'); } function install() { 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 ('Back to Top Module', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'True', 'Do you want to enable the Back to top module?', '6', '', '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 ('Sort Order', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', '1500', 'Sort order of display. Lowest is displayed first.', '6', '', now())"); tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Vertical Position', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', '150', 'Defines where, when scrolling down, the button is displayed. Default 150.', '6', '', now())"); tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Scroll Speed ', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED', '500', 'Defines the scrolling up speed in ms. Low value = fast - high value =slow. Default 500.', '6', '', now())"); } function remove() { tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')"); } function keys() { return array('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED'); } } ?> user.css: /* Back-to-Top-Button*/ #toTop {cursor: pointer; position: fixed; bottom: 30px; right:15px; z-index: 2; display:none; border: 1px solid #000; color: #ffffff; border-color: #357ebd; background-color: #0489FB; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#B5DCFD), to(#0489FB)); background-image: -webkit-linear-gradient(top, #B5DCFD, 0%, #0489FB, 100%); background-image: -moz-linear-gradient(top, #B5DCFD 0%, #0489FB 100%); background-image: linear-gradient(to bottom, #B5DCFD 0%, #0489FB 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B5DCFD', endColorstr='#0489FB', GradientType=0);} #toTop:hover, #toTop:focus {background-color:#fff;} You don't need the color settings or may change them to your needs. language file: define('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_TITLE', 'Add a Back To Top Button to your pages.'); define('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_DESCRIPTION', 'Add a Back To Top Button to your pages.'); J.J. Link to comment Share on other sites More sharing options...
greasemonkey Posted March 21, 2015 Share Posted March 21, 2015 @@multimixer thank you very much.... yes z-index worked perfectly. To get in front of the wrapper element mentioned above I had to increase to; z-index: 91; @De Dokta I will add your speed and position variables to mine... Would you like to release the addon? Link to comment Share on other sites More sharing options...
De Dokta Posted March 21, 2015 Share Posted March 21, 2015 I will add your speed and position variables to mine... Would you like to release the addon? @@greasemonkey No time for it - if you want to release it as addon, just do it.... :) J.J. Link to comment Share on other sites More sharing options...
vampirehunter Posted May 1, 2015 Author Share Posted May 1, 2015 Is this uploaded as an addon? Link to comment Share on other sites More sharing options...
Hotclutch Posted May 1, 2015 Share Posted May 1, 2015 The code appears not to work as it stands. Link to comment Share on other sites More sharing options...
♥14steve14 Posted May 1, 2015 Share Posted May 1, 2015 I have just implemented something similar but the button floats on the page. I started with the above code but made a few alterations. Hopefully the code will work on all mobile devices. Create a new file in includes\modules\header_tags\ and call it ht_back_to_top_btn.php: In that file add <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright © 2015 osCommerce Released under the GNU General Public License */ class ht_back_to_top_btn { var $code = 'ht_back_to_top_btn'; var $group = 'footer_scripts'; var $title; var $description; var $sort_order; var $enabled = false; function ht_back_to_top_btn() { $this->title = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_TITLE; $this->description = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_DESCRIPTION; if ( defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS') ) { $this->sort_order = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER; $this->enabled = (MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS == 'True'); } } function execute() { global $oscTemplate; $vertical_position = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION; $speed = MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED; $output = <<<EOD <script> $(document).ready(function(){ $('body').append('<div id="toTop" class="btn btn-info"><span class="glyphicon glyphicon-chevron-up"></span> Back to Top</div>'); $(window).scroll(function () { if ($(this).scrollTop() != 0) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script> EOD; $oscTemplate->addBlock($output, $this->group); } function isEnabled() { return $this->enabled; } function check() { return defined('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS'); } function install() { 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 ('Back to Top Module', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'True', 'Do you want to enable the Back to top module?', '6', '', '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 ('Sort Order', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', '1500', 'Sort order of display. Lowest is displayed first.', '6', '', now())"); tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Vertical Position', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', '150', 'Defines where, when scrolling down, the button is displayed. Default 150.', '6', '', now())"); tep_db_query("insert into " . TABLE_CONFIGURATION . " (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Scroll Speed ', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED', '500', 'Defines the scrolling up speed in ms. Low value = fast - high value =slow. Default 500.', '6', '', now())"); } function remove() { tep_db_query("delete from " . TABLE_CONFIGURATION . " where configuration_key in ('" . implode("', '", $this->keys()) . "')"); } function keys() { return array('MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_VERTICAL_POSITION', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SCROLL_SPEED'); } } ?> Create the same language file as included above. In the user.css stylesheet add the following code /* Back-to-Top-Button*/ #toTop{ position: fixed; bottom: 40px; right: 40px; cursor: pointer; display: none; } #toTop .fa {margin-right: 5px;} Once uploaded to your site just go to admin - modules- headertags- and click the install module at the top right of the page. The button should appear in the bottom right corner of your site and should show once the page has moved. Works on my site like that anyway. Hopefully the code is correct and no core files are changed. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
Hotclutch Posted May 1, 2015 Share Posted May 1, 2015 Sorry, it does work, code just appears funny in the editor. Both De Dokta and 14Steve14 tests OK. Link to comment Share on other sites More sharing options...
Hotclutch Posted May 1, 2015 Share Posted May 1, 2015 I have packaged the code into an addon: http://addons.oscommerce.com/info/9307 Link to comment Share on other sites More sharing options...
Dan Cole Posted May 14, 2015 Share Posted May 14, 2015 @@Hotclutch Ashley thanks for packaging this up...I downloaded and installed it last night and it was very easy to install and works perfectly. Thanks also to the folks who wrote the code. Dan Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
Artisan Foundry Posted May 17, 2015 Share Posted May 17, 2015 Thanks to all involved for a great package. I am running Osc234BS I have this working on all pages but then it only works on top level categories pages. As you enter the sub levels the arrow is not present. This may just be me - but can somone else check this out - or point me in the right direction to fix it. Tom Link to comment Share on other sites More sharing options...
Hotclutch Posted May 17, 2015 Share Posted May 17, 2015 I tested it now on a vanilla shop, and the button does show on 2nd level categories. Link to comment Share on other sites More sharing options...
Artisan Foundry Posted May 17, 2015 Share Posted May 17, 2015 Does it show on the second level product within the category? This is when it does not show for me. Link to comment Share on other sites More sharing options...
Hotclutch Posted May 17, 2015 Share Posted May 17, 2015 I see on a brand new store the button does not display on the product pages. I have it working properly elsewhere though, can't say what the problem may be. Maybe a setting, or conflict with another script, don't know, will have a look later. Link to comment Share on other sites More sharing options...
azpro Posted May 17, 2015 Share Posted May 17, 2015 Probably you need to give the z-index in your css a higher value ... Link to comment Share on other sites More sharing options...
Hotclutch Posted May 17, 2015 Share Posted May 17, 2015 On the test store it works on some products (where there are bigger pics eg. id=12) others not, eg id=24. Link to comment Share on other sites More sharing options...
♥14steve14 Posted May 17, 2015 Share Posted May 17, 2015 Are you sure its not there. Is it being covered. Try adding a z-index: 999; to the css file where the other css is in the user.css file. That should bring it to the top layer on the page. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
Hotclutch Posted May 17, 2015 Share Posted May 17, 2015 Tried it with a higher z-index: 999 and still does not show on some products. Odd Link to comment Share on other sites More sharing options...
Artisan Foundry Posted May 17, 2015 Share Posted May 17, 2015 Hi Steve,T Tried z-index 999 but still no sign on product page. Hi Ashley, I am not a programmer so what is the pic id=12 and how do I change that? or do I need larger images? Thank you both for the help! Link to comment Share on other sites More sharing options...
azpro Posted May 17, 2015 Share Posted May 17, 2015 Try even higher .. Bootstrap - if I remember correctly - also uses z-index around 1020 ... So try for example 19000 ... Link to comment Share on other sites More sharing options...
Hotclutch Posted May 17, 2015 Share Posted May 17, 2015 Hi Steve,T Tried z-index 999 but still no sign on product page. Hi Ashley, I am not a programmer so what is the pic id=12 and how do I change that? or do I need larger images? Thank you both for the help! On a brand new store, products_id=12 (Die hard with a vengeance :lol: ) works. Link to comment Share on other sites More sharing options...
Hotclutch Posted May 17, 2015 Share Posted May 17, 2015 Having just one big pic in itself won't let the button display, it seems to display only when you select at least one large image for the pic gallery. This is the source code when it does not work: <img src="images/die_hard_3_large.jpg" alt="" width="400" height="531" class="img-responsive" itemprop="image" style="display:none;" /> <div class="piGal pull-right"> <img src="images/die_hard_3_large.jpg" alt="Die Hard With A Vengeance" title="Die Hard With A Vengeance" width="400" height="531" class="img-responsive" /> </div> This is the code when it works: <img src="images/die_hard_3.gif" alt="" width="100" height="80" class="img-responsive" itemprop="image" style="display:none;" /> <div class="piGal pull-right" data-imgcount="1"> <img src="images/die_hard_3_large.jpg" alt="" width="400" height="531" class="img-responsive" id="piGalImg_1" /> </div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.