readme

Installation Instructions
=========================

Getting your osCommerce files responsive is actually quite easy and you can get it done in approximately 15minutes.
If you are going to make your site responsive, you must change the DocType to HTML5.

You will need to download Usemantic CSS Framework from here http://unsemantic.com/css-documentation
Download and add the:

Mobile, Tablet, and Desktop breakpoints
unsemantic-grid-responsive-tablet.css 

It would be a good idea to read the documentation before you start too

There are 5 files to edit and 1 additional .css file to add.

You can download the addon at osCommerce.com - http://addons.oscommerce.com/info/9008

File to be edited
=================

1.) includes/template_top.php
2.) includes/template_bottom.php
3.) includes/header.php
4.) includes/footer.php
5.) includes/classes/osc_template.php

Files to add
============
unsemantic-grid-responsive-tablet.css

====================================================================================================================

1.) STEP 1: Prepare the template_top.php
========================================
(Please note: Although not a must but it is preferred move the javascript to the footer and as far as possible load 
your javascript from a CDN - here is a good place - http://cdnjs.com/)
Use a file compare to see the changes made to the template_top.php
===================================================================================================================

2.) STEP 2: Prepare the includes/classes/osc_template.php

Note: The added CSS Framework works on percentages and not columns so we going to change the 
grid_container, 
grid_content
grid_column_widths

Change the following

    var $_grid_container_width = 24;
    var $_grid_content_width = 16;
    var $_grid_column_width = 4;
    
TO

    var $_grid_container_width = 100; // 100%
    var $_grid_content_width = 60; // 60% for the center content
    var $_grid_column_width = 20; // 20% for each of the columns
===================================================================================================================== 
   
3.) STEP 3: Now we change the classes of the content and the column widths. 
    Open template_bottom.php, footer,php and header.php and change all the instances of the grid_xxx class to grid-
    Note the underscore to hyphen. Remember we set the widths in the osc_template.php file.
    
    grid_container_width must be 100%
    grid_content_width must be 60%
    grid_column_width must be 20%
    
    The footer and header classes will really depend on the design of the theme and that could change but for the 
    purpose of this example - I will make them a full width of 100%
    
    At this point if you refresh your browser you site will be responsive.  You now have to decide the width of your
    site and that will be set in the stylesheet.css file.
    
    #bodyWrapper {
    margin: 0 auto; /* margin of 0 and auto to center */
    width: 85%; /* 85% = 1000px change this to whatever width but in increments of 5 and in percentages */
    }
    
    If you refer to the demo at http://unsemantic.com/demo-responsive
    
    You will see the column percentages and the widths (they go in increments of 5)
    
    100% = 1180px
    95% = 1120px
    90% = 1060px
    85% = 1000px
    80% = 940px
    
    Now go to your stylesheet.css and add the width to the #bodyWrapper.
    
#bodyWrapper {
  margin: 0 auto; /* margin of 0 and auto to center */
  width: 85%; /* 85% = 1000px change this to whatever width but in increments of 5 and in percentages */
}

=============================================================================================================

Thats it! - You done - now the rest will be trial and error and changes that need to be made will depend on your store.
It would be a good idea to get to know the structure of HTML5 layouts.  Problematic areas will be where there are tables
eg. the product_listing.php and the new_products.php module.

IMPORTANT: THIS WILL HELP A LOT
What is so great about this framework is that there are these 3 additional classes which can be added to elements

Refer to the examples on Mobile and Hidden classes - http://unsemantic.com/css-documentation

Fork on Github: https://github.com/mommaroodles/responsive-html5-oscommerce

View Demo: http://responsiveoscommerce.webwolf.co.za

footer.php

<?php
/*
  $Id$

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

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

  require(DIR_WS_INCLUDES . 'counter.php');
?>

<div class="grid-100 footer">
  <p align="center"><?php echo FOOTER_TEXT_BODY; ?></p>
</div>

<?php
  if ($banner = tep_banner_exists('dynamic', 'footer')) {
?>

<div class="grid-100" style="text-align: center; padding-bottom: 20px;">
  <?php echo tep_display_banner('static', $banner); ?>
</div>

<?php
  }
?>

<script type="text/javascript">
$('.productListTable tr:nth-child(even)').addClass('alt');
</script>

header.php

<?php
/*
  $Id$

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

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

  if ($messageStack->size('header') > 0) {
    echo '<div class="grid-100">' . $messageStack->output('header') . '</div>';
  }
?>

<div id="header" class="grid-100">
  <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

  <div id="headerShortcuts">
<?php
  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }
?>
  </div>

<script type="text/javascript">
  $("#headerShortcuts").buttonset();
</script>
</div>

<div class="grid-100 ui-widget infoBoxContainer">
  <div class="ui-widget-header infoBoxHeading"><?php echo '&nbsp;&nbsp;' . $breadcrumb->trail(' &raquo; '); ?></div>
</div>

<?php
  if (isset($HTTP_GET_VARS['error_message']) && tep_not_null($HTTP_GET_VARS['error_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerError">
    <td class="headerError"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['error_message']))); ?></td>
  </tr>
</table>
<?php
  }

  if (isset($HTTP_GET_VARS['info_message']) && tep_not_null($HTTP_GET_VARS['info_message'])) {
?>
<table border="0" width="100%" cellspacing="0" cellpadding="2">
  <tr class="headerInfo">
    <td class="headerInfo"><?php echo htmlspecialchars(stripslashes(urldecode($HTTP_GET_VARS['info_message']))); ?></td>
  </tr>
</table>
<?php
  }
?>

osc_template.php

<?php
/*
  $Id$

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

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
  
  file found in catalog/includes/classes/osc_template.php
*/

  class oscTemplate {
    var $_title;
    var $_blocks = array();
    var $_grid_container_width = 100;
    var $_grid_content_width = 60;
    var $_grid_column_width = 20;

    function oscTemplate() {
      $this->_title = TITLE;
    }

    function setGridContainerWidth($width) {
      $this->_grid_container_width = $width;
    }

    function getGridContainerWidth() {
      return $this->_grid_container_width;
    }

    function setGridContentWidth($width) {
      $this->_grid_content_width = $width;
    }

    function getGridContentWidth() {
      return $this->_grid_content_width;
    }

    function setGridColumnWidth($width) {
      $this->_grid_column_width = $width;
    }

    function getGridColumnWidth() {
      return $this->_grid_column_width;
    }

    function setTitle($title) {
      $this->_title = $title;
    }

    function getTitle() {
      return $this->_title;
    }

    function addBlock($block, $group) {
      $this->_blocks[$group][] = $block;
    }

    function hasBlocks($group) {
      return (isset($this->_blocks[$group]) && !empty($this->_blocks[$group]));
    }

    function getBlocks($group) {
      if ($this->hasBlocks($group)) {
        return implode("\n", $this->_blocks[$group]);
      }
    }

    function buildBlocks() {
      global $language;

      if ( defined('TEMPLATE_BLOCK_GROUPS') && tep_not_null(TEMPLATE_BLOCK_GROUPS) ) {
        $tbgroups_array = explode(';', TEMPLATE_BLOCK_GROUPS);

        foreach ($tbgroups_array as $group) {
          $module_key = 'MODULE_' . strtoupper($group) . '_INSTALLED';

          if ( defined($module_key) && tep_not_null(constant($module_key)) ) {
            $modules_array = explode(';', constant($module_key));

            foreach ( $modules_array as $module ) {
              $class = substr($module, 0, strrpos($module, '.'));

              if ( !class_exists($class) ) {
                if ( file_exists(DIR_WS_LANGUAGES . $language . '/modules/' . $group . '/' . $module) ) {
                  include(DIR_WS_LANGUAGES . $language . '/modules/' . $group . '/' . $module);
                }

                if ( file_exists(DIR_WS_MODULES . $group . '/' . $class . '.php') ) {
                  include(DIR_WS_MODULES . $group . '/' . $class . '.php');
                }
              }

              if ( class_exists($class) ) {
                $mb = new $class();

                if ( $mb->isEnabled() ) {
                  $mb->execute();
                }
              }
            }
          }
        }
      }
    }
  }
?>

stylesheet.css

/* add to stylesheet */

#bodyWrapper {
  margin: 0 auto; /* margin of 0 and auto to center */
  width: 85%;
}

template_bottom.php

<?php
/*
  $Id$

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

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/
?>

</div> <!-- bodyContent //-->

<?php
  if ($oscTemplate->hasBlocks('boxes_column_left')) {
?>
<aside> <!-- wrap elements in html5 tags -->
<div id="columnLeft" class="grid-<?php echo $oscTemplate->getGridColumnWidth(); ?> pull-<?php echo $oscTemplate->getGridContentWidth(); ?>">
  <?php echo $oscTemplate->getBlocks('boxes_column_left'); ?>
</div>
</aside>
<?php
  }

  if ($oscTemplate->hasBlocks('boxes_column_right')) {
?>
<aside> <!-- wrap elements in html5 tags -->
<div id="columnRight" class="grid-<?php echo $oscTemplate->getGridColumnWidth(); ?>">
  <?php echo $oscTemplate->getBlocks('boxes_column_right'); ?>
</div>
</aside>
<?php
  }
?>
<footer> <!-- wrap elements in html5 tags -->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
</footer>

</div> <!-- bodyWrapper //-->

<?php echo $oscTemplate->getBlocks('footer_scripts'); ?>

</body>
</html>

template_top.php

<?php
/*
 $Id$

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

 Copyright (c) 2013 osCommerce

 Released under the GNU General Public License
 */

$oscTemplate -> buildBlocks();

if (!$oscTemplate -> hasBlocks('boxes_column_left')) {
  $oscTemplate -> setGridContentWidth($oscTemplate -> getGridContentWidth() + $oscTemplate -> getGridColumnWidth());
}

if (!$oscTemplate -> hasBlocks('boxes_column_right')) {
  $oscTemplate -> setGridContentWidth($oscTemplate -> getGridContentWidth() + $oscTemplate -> getGridColumnWidth());
}
?>
<!DOCTYPE html>
<html <?php echo HTML_PARAMS; ?> class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>">
<title><?php echo tep_output_string_protected($oscTemplate -> getTitle()); ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<?php echo $oscTemplate -> getBlocks('header_tags'); ?>

<!-- meta tag is for IE only and will not validate unless you place it in conditional tags -->
 
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<![endif]-->

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<!-- this is optional but recommended place your favicons in root These are not provided you will need to get our own -->
<link rel="shortcut icon" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-precomposed.png">


<!--[if (gt IE 8) | (IEMobile)]><!-->
  <link rel="stylesheet" href="css/responsive.css" />  <!-- this is the added framework -->
<!--<![endif]-->
<!--[if (lt IE 9) & (!IEMobile)]>
  <link rel="stylesheet" href="css/ie.css" />
<![endif]-->

<!-- default oscommerce scripts -->
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.10.3.min.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.3.min.js"></script>
<link rel="stylesheet" href="ext/colorbox/colorbox.css">
<link rel="stylesheet" href="css/stylesheet.css">

<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->

<!-- add custom google font files if you want -->
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<?php
  if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script>  $.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);</script>
<?php
}
?>
</head>
<body>
<!-- this is optional remove if you want to -->  
<!--[if lt IE 8]>
   <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->  

<div id="bodyWrapper" >
  
<header>  
<!-- wrap the elements in HTML5 tags -->
<?php
require (DIR_WS_INCLUDES . 'header.php');
 ?>
</header> 
<section role="main"> <!-- wrap the elements in HTML5 tags -->
  <!-- note here that the classes assigned to the widths of the columns and content have underscores - 
    the added css framework uses hyphens - so here we change the underscore to a hyphen :) -->
<div id="bodyContent" class="grid-<?php echo $oscTemplate -> getGridContentWidth(); ?> <?php echo($oscTemplate -> hasBlocks('boxes_column_left') ? 'push-' . $oscTemplate -> getGridColumnWidth() : ''); ?> ">