Latest News: (loading..)
vampirehunter

Quick Addon, Cart Totals in Header module, Testing welcome.

13 posts in this topic

I have made a quick easy addon for anyone interested. Please test it and leave any feedback if anything seems incorrect or wrongly coded.

 

It simply adds a small bar with the current Shopping cart totals into the Header bar.

You can resize it in Admin so it can sit nicely with the Shop Logo and the Search Bar (if you have those turned on).

 

It resizes nicely in XS mobile view.

 

Testing welcome, and any tips to improve is welcome.

 

 

Instructions

 

1.) Copy and paste code below into a file called "cm_headercart.php" and place file into this location: "includes/modules/content/header/"

<?php
/*
  $Id$

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

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class cm_headercart {
    var $code;
    var $group;
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function cm_headercart() {
      $this->code = get_class($this);
      $this->group = basename(dirname(__FILE__));

      $this->title = MODULE_CONTENT_HEADERCART_TITLE;
      $this->description = MODULE_CONTENT_HEADERCART_DESCRIPTION;

      if ( defined('MODULE_CONTENT_HEADERCART_STATUS') ) {
        $this->sort_order = MODULE_CONTENT_HEADERCART_SORT_ORDER;
        $this->enabled = (MODULE_CONTENT_HEADERCART_STATUS == 'True');
      }
    }
      
      
    function execute() {
      global $PHP_SELF, $cart, $lng, $language, $currencies, $HTTP_GET_VARS, $request_type, $currency, $oscTemplate;
      
      $content_width = MODULE_CONTENT_HEADERCART_CONTENT_WIDTH;


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

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

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

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

    function install() {
      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 Header Cart Module', 'MODULE_CONTENT_HEADERCART_STATUS', 'True', 'Do you want to enable the Header Cart content module?', '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, set_function, date_added) values ('Content Width', 'MODULE_CONTENT_HEADERCART_CONTENT_WIDTH', '4', '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, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADERCART_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

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

    function keys() {
      return array('MODULE_CONTENT_HEADERCART_STATUS', 'MODULE_CONTENT_HEADERCART_CONTENT_WIDTH', 'MODULE_CONTENT_HEADERCART_SORT_ORDER');
    }
  }


2.) Copy and paste code below into a file called "headercart.php" and place file into this location: "includes/languages/english/modules/content/header/templates/"

 

Feel free to change the div classes or layout to your preference. With this code, the cart total bar resizes nicely in XS View.

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

		<!-- Shopping Cart Starts -->
		
    <div class="searchbox-margin">
    <div class="hidden-xs text-center-xs">
    <a role="button" class="btn btn-info btn-block" href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><i class="glyphicon glyphicon-shopping-cart"></i>
    <?php echo HEADERCART_TEXT . $cart->count_contents() . ' ' . HEADERCART_ITEMS . ' - ' . $currencies->format($cart->show_total()); ?></a>

    </div>
    </div>
				
    <div class="visible-xs text-center-xs">
    <a role="button" class="btn btn-info btn-block" href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><i class="glyphicon glyphicon-shopping-cart"></i>
    <?php echo $cart->count_contents() . ' ' . HEADERCART_ITEMS . ' - ' . $currencies->format($cart->show_total()); ?></a>

    </div>
      
    <div class="clearfix"></div>
    
    <br>
    
  	<!-- Shopping Cart Ends -->

</div>

3.) Copy and paste code below into a file called "cm_headercart.php" and place file into this location: "includes/languages/english/modules/content/header/"

<?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_CONTENT_HEADERCART_TITLE', 'Header Cart');
  define('MODULE_CONTENT_HEADERCART_DESCRIPTION', 'Adds Shopping Cart into the Header Area of your site.');
  
  define('HEADERCART_TEXT', 'Cart: ');
  define('HEADERCART_ITEMS', 'Item(s) ');

4.) Add to "user.css" file.

 

I put this to move the bar slightly down so it centers with the shop logo and also used this same class and outer div on the searchbox module template so they line up nicely.

You can remove or change these if you are doing your own layout.

.searchbox-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}

post-214618-0-90694100-1435840718_thumb.jpg

post-214618-0-79010800-1435840725_thumb.jpg

Mikepo likes this

Share this post


Link to post
Share on other sites

Are you going to package it up and add it to the addons area rather than leave it in a thread like this.

Share this post


Link to post
Share on other sites

Are you going to package it up and add it to the addons area rather than leave it in a thread like this.

 

If someone can test it and is happy, i can do it then.

Share this post


Link to post
Share on other sites

Work good!! I test in 2.3.4 BS Edge

 

Great Work!

 

Thanks

 

just a question if anyone can clarify.

 

is it best to have both the visible and insivisible div inside a single outer div tag?

 

for example,

 

is it better to use this code here

<div class="searchbox-margin">
    <div class="hidden-xs text-center-xs">
    <a role="button" class="btn btn-info btn-block" href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><i class="glyphicon glyphicon-shopping-cart"></i>
    <?php echo HEADERCART_TEXT . $cart->count_contents() . ' ' . HEADERCART_ITEMS . ' - ' . $currencies->format($cart->show_total()); ?></a>

    </div>

				
    <div class="visible-xs text-center-xs">
    <a role="button" class="btn btn-info btn-block" href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><i class="glyphicon glyphicon-shopping-cart"></i>
    <?php echo $cart->count_contents() . ' ' . HEADERCART_ITEMS . ' - ' . $currencies->format($cart->show_total()); ?></a>

    </div>

 </div>

than this?

<div class="searchbox-margin">
    <div class="hidden-xs text-center-xs">
    <a role="button" class="btn btn-info btn-block" href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><i class="glyphicon glyphicon-shopping-cart"></i>
    <?php echo HEADERCART_TEXT . $cart->count_contents() . ' ' . HEADERCART_ITEMS . ' - ' . $currencies->format($cart->show_total()); ?></a>

    </div>
</div>
	
<div class="searchbox-margin">			
    <div class="visible-xs text-center-xs">
    <a role="button" class="btn btn-info btn-block" href="<?php echo tep_href_link(FILENAME_SHOPPING_CART)?>"><i class="glyphicon glyphicon-shopping-cart"></i>
    <?php echo $cart->count_contents() . ' ' . HEADERCART_ITEMS . ' - ' . $currencies->format($cart->show_total()); ?></a>

    </div>

 </div>

Share this post


Link to post
Share on other sites

@@vampirehunter

 

Love this. How could I move this to the breadcrumbs area, or would this not be a good move.

 

Many thanks

Cheers

 

Grandpa

Share this post


Link to post
Share on other sites

@@vampirehunter

 

How can I align the button to the right?

 

good question, i didn't really look at it when i did it, but I think maybe just doing it in the div tag in the html template of the module? or it maybe be a case of adding a variable to the code for alignment.

 

in the admin you can select the content width from 1 to 12.

 

in mine ive set the shop logo, then search bar, then the cart total bar modules seperately in one line, so each is set to content width 4, so i haven't needed to set an alignment. I just use the Sort order to put each one i want first before the other.

 

If you have just the cart total bar and nothing else on the same line, then I think you should be able to do it with CSS. can someone verify?

Edited by vampirehunter

Share this post


Link to post
Share on other sites

@@vampirehunter

 

How can I align the button to the right?

 

I think best way if you have no other module alongside it on the same line.

 

Its to add a variable that will add alignment to the module.

 

In bootstrap the pull-right or pull-left is what aligns.

<div class="col-sm-4 pull-right">

ill see if i can edit the code to add this variable

 

at the moment the code is just specifying the column width of the module so we just need to add an extra variable for setting the alignment I think.

<div class="col-sm-<?php echo $content_width; ?>">
Edited by vampirehunter

Share this post


Link to post
Share on other sites

@@vampirehunter

 

On the last </div> of the includes/modules/content/header/templates/logo.php I added three <br>. This forced down the sales hotline button, search bar and cart total button to it's own row.
I was then able to properly space what I needed. Since the mods start from the left side and expand to the right, I couldn't get the spacing right without adding the <br>.
Fortunately the sales hotline button offers 3 options for content align. They are text-left, text-center and text-right. It would be wonderful if all mods did this. I didn't like the cramped look of my logo anyway so, this worked for me.

Take care
Bill

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