♥mommaroodles Posted February 10, 2014 Posted February 10, 2014 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."
♥mommaroodles Posted February 12, 2014 Author Posted February 12, 2014 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."
Roaddoctor Posted March 15, 2014 Posted March 15, 2014 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
dipanchokshi Posted June 6, 2014 Posted June 6, 2014 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.
dipanchokshi Posted June 6, 2014 Posted June 6, 2014 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.
shafa1827 Posted October 4, 2014 Posted October 4, 2014 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?
Roaddoctor Posted November 19, 2014 Posted November 19, 2014 @@dipanchokshi Here is an example of a shop using this framework (live shop - test orders will be filled :)) My Store -Dave
Roaddoctor Posted January 14, 2015 Posted January 14, 2015 @@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
clustersolutions Posted January 22, 2015 Posted January 22, 2015 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...
Roaddoctor Posted March 15, 2015 Posted March 15, 2015 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
Roaddoctor Posted April 8, 2015 Posted April 8, 2015 @@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
Hotclutch Posted April 9, 2015 Posted April 9, 2015 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 http://www.oscommerce.com 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 http://www.oscommerce.com 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; } } ?>
Psytanium Posted April 10, 2015 Posted April 10, 2015 product_listing.php !!!! how can it be useful if it did not work on products listing ?
Hotclutch Posted April 11, 2015 Posted April 11, 2015 There's a missing closing <section> tag, opened in template_top.php. I add </section> after </div><!-- bodyContent //--> in template_bottom.php
mystique71 Posted September 30, 2015 Posted September 30, 2015 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
tgely Posted September 30, 2015 Posted September 30, 2015 @@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. 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.
mystique71 Posted October 1, 2015 Posted October 1, 2015 so what you are saying is: I should not use this add-on??
Hotclutch Posted October 1, 2015 Posted October 1, 2015 so what you are saying is: I should not use this add-on?? Rather not. Try to use / upgrade to the bootstrap version of osCommerce
mystique71 Posted October 1, 2015 Posted October 1, 2015 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.
mystique71 Posted October 13, 2015 Posted October 13, 2015 Rather not. Try to use / upgrade to the bootstrap version of osCommerce is there a simple way to upgrade my store to the bootstrap version or do I have to start all over again?
davecohen Posted October 10, 2016 Posted October 10, 2016 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.
MrPhil Posted October 18, 2016 Posted October 18, 2016 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.