clustersolutions Posted March 1, 2015 Share Posted March 1, 2015 I needed a back to top btn for my BS store so this was hack up...2 files to add and 1 file to mod...substitute catalog with your own dir... *1) Create a catalog/includes/modules/header_tags/ht_back_to_top_btn.php with the following content: <?php/* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright © 2014 osCommerce Author: Clustersolutions 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;$output = <<<EOD <span id="back-to-top-link-block" class="hidden"> <a href="#top" class="well well-sm" id="backToTopBtn"> <i class="glyphicon glyphicon-chevron-up"></i> </a> </span><!-- /back-to-top-link-block --> <script> $(document).ready(function(){ if ( ($(window).height() + 100) < $(document).height() ) { $('#back-to-top-link-block').removeClass('hidden').affix({ // how far to scroll down before link "slides" into view offset: {top:100} }); } $('#backToTopBtn').click(function(){ $('html,body').animate({scrollTop:0},'slow');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 ('Enable Equal Heights Module', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_STATUS', 'True', 'Do you want to enable the Equal Heights module?', '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 ('Sort Order', 'MODULE_HEADER_TAGS_BACK_TO_TOP_BTN_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', 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'); } }?> **2) Create the language file catalog/includes/languages/english/modules/header_tags/ ht_back_to_top_btn.php for this module. <?php/* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright © 2014 osCommerce Author: Clustersolutions Released under the GNU General Public License*/ 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.');?> ***3) Add these to your user.css, change according to your liking... #back-to-top-link-block.affix-top { position: absolute; /* allows it to "slide" up into view */ bottom: -82px; right: 5px;}#back-to-top-link-block.affix { position: fixed; /* keeps it on the bottom once in view */ bottom: 50px; right: 5px;}#back-to-top-link-block .well { border-radius: 50%;}@@media (min-width: 1170px) { #back-to-top-link-block.affix-top { position: absolute; /* allows it to "slide" up into view */ bottom: -82px; right: -moz-calc(50% - 650px); right: -webkit-calc(50% - 650px); right: -o-calc(50% - 650px); right: calc(50% - 650px); } #back-to-top-link-block.affix { position: fixed; /* keeps it on the bottom once in view */ bottom: 50px; right: -moz-calc(50% - 650px); right: -webkit-calc(50% - 650px); right: -o-calc(50% - 650px); right: calc(50% - 650px); }} Link to comment Share on other sites More sharing options...
♥kymation Posted March 1, 2015 Share Posted March 1, 2015 Great idea! I need something like this, or will whenever my clients go to Bootstrap. I would make a couple of modifications: Change references to the Equal Heights Module to the Back to Top Module. Move the code from the $output variable into a template file to make it easier to modify. Name the template file back_to_top.php and add the contents: <?php /* $Id$ osCommerce, Open Source E-Commerce Solutions http://www.oscommerce.com Copyright © 2014 osCommerce Author: Clustersolutions Released under the GNU General Public License */ ?> <span id="back-to-top-link-block" class="hidden"> <a href="#top" class="well well-sm" id="backToTopBtn"> <i class="glyphicon glyphicon-chevron-up"></i> </a> </span><!-- /back-to-top-link-block --> <script> $(document).ready(function(){ if ( ($(window).height() + 100) < $(document).height() ) { $('#back-to-top-link-block').removeClass('hidden').affix({ // how far to scroll down before link "slides" into view offset: {top:100} }); } $('#backToTopBtn').click(function(){ $('html,body').animate({scrollTop:0},'slow');return false; }); }); </script> and then replace the execute() method in the module code with this: function execute() { global $oscTemplate; ob_start(); include(DIR_WS_MODULES . 'content/' . $this->group . '/templates/back_to_top.php'); $template = ob_get_clean(); $oscTemplate->addContent($template, $this->group); } This deserves to be a full addon. Please package it up and upload it. And thanks for posting your work. Regards Jim See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
De Dokta Posted March 2, 2015 Share Posted March 2, 2015 Really a great idea! I use a similar script for a back-to-top-button and never had the idea to put it into a module. And also a great idea to add a template file! But for a header_tag module the function execute should read: function execute() { global $oscTemplate; ob_start(); include(DIR_WS_MODULES . 'header_tags/templates/back_to_top.php'); $template = ob_get_clean(); $oscTemplate->addBlock($template, $this->group); } J.J. Link to comment Share on other sites More sharing options...
♥kymation Posted March 2, 2015 Share Posted March 2, 2015 @@De Dokta This is not a header tags module; it's designed to go at the bottom of the page. it might work in the header (I haven't tried it) but it works quite well at the bottom. It's also a good idea to put as many scripts as you can at the bottom of the page to speed page loading. Regards Jim See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
greasemonkey Posted March 2, 2015 Share Posted March 2, 2015 I was looking for a mod like this as well. Link to comment Share on other sites More sharing options...
burt Posted March 2, 2015 Share Posted March 2, 2015 I thought we had it in the core already - I know it was discussed and a solution was tested in the large bootstrap thread... Just checked and there it is not in the core, must have been forgotten about :blush: You can see an example. Link to comment Share on other sites More sharing options...
De Dokta Posted March 2, 2015 Share Posted March 2, 2015 @@kymation This is not a header tags module; it's designed to go at the bottom of the page. it might work in the header (I haven't tried it) but it works quite well at the bottom. It's also a good idea to put as many scripts as you can at the bottom of the page to speed page loading. There are some modules in the header_tags group which install into the bottom area using the footer_scripts hook in template_bottom.php. Can you put such a module to where you think it's right. But if I follow clustersolutions approach to create a file ht_back_to_top_btn.php in catalog/includes/modules/header_tags/ and then add your changes to that file - it does not work. J.J. Link to comment Share on other sites More sharing options...
clustersolutions Posted March 2, 2015 Author Share Posted March 2, 2015 @@kymation & @dedokta ...thx for the advise...will do and writing good codes take time and time is hard to come by for a store owner...great catch there with the equal height div, too... I was debating between content vs. headers_tag modules and I knew I want it in the footer...I was having difficulty with writing so many files all over the places for a simple implementation. I really wanted to just do it all in one file. The css is really a show stop though as it should be within the header tag...any comments on this??? BTW, the headers_tag is really for the footer???!!! Arrrrr....So far all my changes if I could help it I did them as modules because I think I may take them and run one day :-> Link to comment Share on other sites More sharing options...
firstbizsoft Posted June 24, 2015 Share Posted June 24, 2015 Do you have this packaged an uploaded? Thanks, Costel Link to comment Share on other sites More sharing options...
De Dokta Posted June 24, 2015 Share Posted June 24, 2015 http://addons.oscommerce.com/info/9307 for Bootstrap only! Link to comment Share on other sites More sharing options...
firstbizsoft Posted June 24, 2015 Share Posted June 24, 2015 Thanks De Dokta! This is ! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.