Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Back to Top Button For BS


clustersolutions

Recommended Posts

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

Great idea! I need something like this, or will whenever my clients go to Bootstrap.

 

I would make a couple of modifications:

  1. Change references to the Equal Heights Module to the Back to Top Module.
  2. 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

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

@@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

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

@@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

@@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

  • 3 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...