Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive HTML 5 osCommerce 2.3.3.4


mommaroodles

Recommended Posts

Hi Everyone,

 

I'm happy to announce that I've made osCommerce 2.3.3.4 Responsive and have converted it to HTML5.

 

I'll welcome anyone who is interested in participating in this project as I do believe that it has huge potential but needs some tweaking and at this point I'll welcome any feedback, suggestions or advice.

 

I'm sure that there will be persons who would be willing to use my version and will assist with further development.

 

The reason for this project is so that it can be a good starting point for someone looking for a responsive store. Bare bones vanilla install with some (actually minor) modifications.

 

I have this project on Github: github.com/mommaroodles/responsive-html5-oscommerce

 

and there is a demo here: responsiveoscommerce.webwolf.co.za

 

I would suggest that to test the site you should use Malte Wassermanns Responsive Design Testing Tools lab.maltewassermann.com/viewport-resizer/ - create the bookmarklets see how how the site behaves.

 

There are issues I'm working on - table on the product_listing.php may need to be re-written in order to get it responsive.

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites

Here is how I made osCommerce 2.3.3.4 Responisve and HTML5 - which it will have to be if you want a responsive design in just only 3 steps and 5 file edits, you can do it in 5 minutes.

 

I must however add that it doesnt seem to be the the general trend amongst the community at here at osCommerce - buit it is in fact the norm today and it is for this reason I created this type of boiler plate from a stock standard vanilla install of osCommerce so that ppl can start to design and create beautiful stores that display on all devices.

 

Here is how you do it.

 

(or you can skip this and just download the addon with all the files needed for a 'drop on top' of a fresh install of osCommerce.

 

Responsive and HTML5 osCommerce in 3 Easy Steps

 

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.

 

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

 

 

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

 

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 - www.unsemantic.com/css-documentation

 

I do hope that some of you find this useful and in fact I'm sure some will.

"The doorstep to the temple of wisdom is a knowledge of our own ignorance."

Link to comment
Share on other sites

  • 1 month later...

Very nice! @@mommaroodles

Works like a charm. I downstepped to the unsemantic-grid-responsive.css, without the tablet step, and like the result even more. Could you post more on any other steps you took to smooth things out? especially on the existing osc css. This was very simple to do. Given it's this simple to become responsive, I guess I should really be asking what negative consequences might result? or er uh, Why should I not do this change to a fresh 2.3.3.4 install and move forward?

 

I just don't want to make developing this new shop any more difficult than it needs to be.

-Dave

Link to comment
Share on other sites

  • 2 months later...

Very nice! @@mommaroodles

Works like a charm. I downstepped to the unsemantic-grid-responsive.css, without the tablet step, and like the result even more. Could you post more on any other steps you took to smooth things out? especially on the existing osc css. This was very simple to do. Given it's this simple to become responsive, I guess I should really be asking what negative consequences might result? or er uh, Why should I not do this change to a fresh 2.3.3.4 install and move forward?

 

I just don't want to make developing this new shop any more difficult than it needs to be.

Link to comment
Share on other sites

Hi

Thanks for making this. I am wondering is it really working as I got only arranged store in column and it's not working when I hit CTRL+SHIFT+M in Firefox. Please try this or send me link of your working store with this. Thanks a lot friends.

Link to comment
Share on other sites

  • 2 months later...
  • 1 month later...

Hi,

 

I used this. It works like a charm. But when i view in my computer, or any bigger screen than a smart phone, the items are not displayed correctly.

Each item take up the whole container. Any idea where did i go wrong?

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

@@mommaroodles or anyone who can help

 

I have my 2.3.4 new shop running well using this framework. Thank you for your work on this. As far as I've found so far all the pages are fully responsive and all is good EXCEPT for the product_listing.php file. For the life of me (I've tried and tried) I cannot get the product listings to work properly at tablet/phone. Everything just overflows off screen to the right.

 

Would you have a working version of product_listing.php? I've tried your github version and several others with no love. Even better would be a list/grid version like the bootstrap version... so awesome.

 

Any guidance appreciated.

-Dave

Link to comment
Share on other sites

  • 2 weeks later...

Probably because it's not truly responsive? The product attributes are listed in <td>s, and I don't think you can break <td> into separate lines...try putting everything into one <td>, if <td> is the way to go, and perhaps left float them...also, do a search online...there is a way to make table responsive...but to a point as there are contents inside the table...

Link to comment
Share on other sites

  • 1 month later...

With all the responsive talk lately -

 

Do know that -

If bootstrap is not a good option for you,

or you just want to wait until it is matured or osc official,

or if you want to use standard 2.3.4 osc and all its add-ons,

 

This Unsemantic CSS Framework IS A VIABLE ALTERNATIVE. I've got a site running quite well using it, and is 99.9% responsive with just a few tiny issues still to resolve.... mainly just need to rewrite product_listing.php.

 

The amount of work to get it to this point was minimal once I understood how the % based grid system worked.

I pass all Google tests for mobile friendly and the site is indexing well.

 

Feel free to visit my unsemantic site, but note the site is live and orders will be filled.

 

Hope that helps.

 

-Dave

Link to comment
Share on other sites

  • 4 weeks later...

@@mommaroodles

 

 

There are issues I'm working on - table on the product_listing.php may need to be re-written in order to get it responsive.

 

Has anyone been able to accomplish this? I tried again yesterday and fail... beyond my abilities. If no one has done this yet would anyone want to share in the cost to have it done by one of the forums friendly pro's?  please pm me

-Dave

Link to comment
Share on other sites

Since there are no public uploads on the add on page: for anyone who wants to try this on a 2.3.4 store, here are modified versions of template_top.php and osc_template.php. The other files in the contribution; footer, header, template-bottom.php can be used as is. Remember to download responsive.css and place it in the css folder.

 

<?php
/*
  $Id$
 
  osCommerce, Open Source E-Commerce Solutions
 
  Copyright © 2014 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 your 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.4.min.css" />
<script type="text/javascript" src="ext/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="ext/jquery/ui/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="ext/photoset-grid/jquery.photoset-grid.min.js"></script>
<link rel="stylesheet" type="text/css" href="ext/colorbox/colorbox.css" />
<script type="text/javascript" src="ext/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
 
<!-- 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">
 
<!-- repositioned the call for the html5.js - it should be below stylesheets and also below the call for the jquery -->
<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
<![endif]-->
 
<?php
  if (tep_not_null(JQUERY_DATEPICKER_I18N_CODE)) {
?>
<script type="text/javascript" src="ext/jquery/ui/i18n/jquery.ui.datepicker-<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>.js"></script>
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['<?php echo JQUERY_DATEPICKER_I18N_CODE; ?>']);
</script>
<?php
  }
?>
</head>
<body>
<!-- this is optional remove if you want to - add styling to the stylesheet .browsehappy and style as you want -->  
<!--[if lt IE 8]>
   <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgradeyour 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() : ''); ?> ">
 
modified version of osc_template.php
 
<?php
/*
  $Id$
 
  osCommerce, Open Source E-Commerce Solutions
 
  Copyright © 2014 osCommerce
 
  Released under the GNU General Public License
*/
 
  class oscTemplate {
    var $_title;
    var $_blocks = array();
    var $_content = array();
    var $_grid_container_width = 100;
    var $_grid_content_width = 60;
    var $_grid_column_width = 20;
    var $_data = array();
 
    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();
                }
              }
            }
          }
        }
      }
    }
 
    function addContent($content, $group) {
      $this->_content[$group][] = $content;
    }
 
    function hasContent($group) {
      return (isset($this->_content[$group]) && !empty($this->_content[$group]));
    }
 
    function getContent($group) {
      global $language;
 
      if ( !class_exists('tp_' . $group) && file_exists(DIR_WS_MODULES . 'pages/tp_' . $group . '.php') ) {
        include(DIR_WS_MODULES . 'pages/tp_' . $group . '.php');
      }
 
      if ( class_exists('tp_' . $group) ) {
        $template_page_class = 'tp_' . $group;
        $template_page = new $template_page_class();
        $template_page->prepare();
      }
 
      foreach ( $this->getContentModules($group) as $module ) {
        if ( !class_exists($module) ) {
          if ( file_exists(DIR_WS_MODULES . 'content/' . $group . '/' . $module . '.php') ) {
            if ( file_exists(DIR_WS_LANGUAGES . $language . '/modules/content/' . $group . '/' . $module . '.php') ) {
              include(DIR_WS_LANGUAGES . $language . '/modules/content/' . $group . '/' . $module . '.php');
            }
 
            include(DIR_WS_MODULES . 'content/' . $group . '/' . $module . '.php');
          }
        }
 
        if ( class_exists($module) ) {
          $mb = new $module();
 
          if ( $mb->isEnabled() ) {
            $mb->execute();
          }
        }
      }
 
      if ( class_exists('tp_' . $group) ) {
        $template_page->build();
      }
 
      if ($this->hasContent($group)) {
        return implode("\n", $this->_content[$group]);
      }
    }
 
    function getContentModules($group) {
      $result = array();
 
      foreach ( explode(';', MODULE_CONTENT_INSTALLED) as $m ) {
        $module = explode('/', $m, 2);
 
        if ( $module[0] == $group ) {
          $result[] = $module[1];
        }
      }
 
      return $result;
    }
  }
?>
 
Link to comment
Share on other sites

  • 5 months later...

can these add on be used on an already working shop?? since I am getting these people complaining they cannot view my site in normal proportions( sorry I am more old skool type) I prefer online shopping on my computer and I do not have any smartphone tablet Ipad or whatever.

 

But if I can use these add -on without screwing my shop it would be great ofcourse

Link to comment
Share on other sites

@@mystique71 if you were using firefox press ctrl+shift+M combo to see what happening on a standard devices. Chrome can do the same on another way.

 

This html5 solution is a half way. You should figure out a lot of another problem.

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Link to comment
Share on other sites

thank you everyone, as soon as life gets normal here I am going to try the bootstrap version but this time I am going to install it on my computer first with wampp before getting it online, it might take a while before i get the time to do it cause my daughter suddenly moved in with us due to a relation break up so we need to find her a new place to stay first as soon as possible (sigh) ain't life just great when it never goes how I want it to be :( in the meantime I will just keep my dutch shop up and running even though it's only suitable for pc and laptop users , as long as the shop works it's fine by me.

Link to comment
Share on other sites

  • 2 weeks later...
  • 11 months later...

Big shout out to mamroodles and hotclutch for posting the responsive info. This works great so far, I'm really pleased it took so few changes to get a nice responsive site. I'm still polishing things up, but it looks like this will work. I also have some sites that use Zencart, and their responsive templates will require massive changes based on my customizations. This was much better.

Link to comment
Share on other sites

  • 2 weeks later...

Just keep in mind, if you choose to bootstrap-enable osC 2.3.4 or earlier, that there still will likely be no upgrade path to 2.4 other than a complete reinstallation. This means you're going to have to do the work of customizing a new out-of-the-box mobile-friendly installation (2.3.4BS or 2.4) at some point. Be careful -- you may be driving off into a dead-end, and should consider whether it is worth the effort if you're eventually going to have to largely do it all over again.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...