Responsive osCommerce now a reality, using Bootstrap

For the last couple of months a small team of coders has been working on updating the shop side of osCommerce to be responsive…

What is responsive?

Responsive Web Design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

In easy to understand terms, the site changes "shape" if you visit in a mobile phone compared to an iPad compared to a desktop computer.

With that in mind, we had a lot of recoding to do, we pretty much pulled apart the cosmetic look of normal osCommerce and updated it to Responsive osCommerce. Have a look at the responsive version and see how it changes shape depending upon which device you are viewing it in…

Going so in-depth into the code, I also took the opportunity to update a few areas to make them more modern;

The Footer area (which is now modular and controlled from the Admin)

footer

The Reviews (which has a top-down bottom-up overhaul)

reviews

The Header area (modularisation mostly implemented)

header

Other bits and pieces new to this version;

  1. New Category Tree Class
  2. Updated checkout experience
  3. New Card Icons
  4. New Infoboxes (contact us, generic text, customer services)
  5. Grid / List switching in category display
  6. and too much more to list…

Speed

Another important factor in todays online experience is the speed at which your page displays to your customers. We put together this version to be as fast as we could make it. Using "Gt Metrix" to test our changes we saw a great result:

97

Go ahead and try your own osCommerce site and compare your results…you'll be shocked at the difference.

Changing the look of the site

Pretty much how osCommerce has always been as we did not yet have the time to build in a template system. With just a few changes to around 4 core files I built this:

LARGE
large view

SMALL
small view

Conclusion

I'm really pleased with how this project turned out. Shopowners now have a choice to use the normal 2.3 series osCommerce or to use the new Bootstrapped 2.3. It is possible to upgrade an existing osCommerce shop from normal to Bootstrap, and this Bootstrap version has a massive advantage in that all of the existing addons are useable with it.

So, have a look at the test site. Feel free to fork the codebase or to download the master zip. Install as you would any osCommerce, then go into Admin and turn on the relevant boxes that you would like to show and relevant Header Tags.

Enjoy.

Posted in Bootstrap
  • arlisabijoux

    Hi Gary, very interesting and above all amazing speed! great work, congrats!

    I need to seriously consider upgrading my shop to use BS (if at all possible).

    One question…..I do notice on some responsive sites that when I view them on my phone they become a sort of simplified version of themselves and lose a lot of fonctionality (amazon and ebay for example), so I usually end up viewing the classic site.

    So does your BS version force a specific view, for example on your phone, or can the viewer still choose to view the classic version instead?

  • Gary

    Hi Isa – going responsive is definitely the way to go. Looking at a lot of stats over the past few months of a lot of different websites that I look after shows about a 35% segment of people using mobile/tablet. And that number can only get bigger as the months and years go by.

    Your site would be relatively straightforward to update as your design is quite a nice layout to make responsive. Certainly worth doing at some point.

  • Daniel Klejnstrup Sørensen

    Is all this totally free to use?
    What about the graphics? That's not stock osc, is it?

  • Gary

    Go right ahead, here's the download link:

    https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

    All for no money.

  • Siahguy

    Nice work! One little glitch I noted – in Opera (so presumably webkit, but haven't tried it), the bottom left item on the homepage bumps into a new line. Not sure if you've noticed that.

  • Gary

    Could you please provide a screenshot into the thread at the osCommerce forum, thanks.

  • jimdavis007

    I tried it http://pontiworld.com.au/usgmsp-responsive/index.php and for some reason it looks nothing like the sample. I have looked for these extra modules that need activating and cant find them. What am I doing wrong?
    Also you wouldn't happen to be giving away the code for that green template would you. I like it like that :)

    Basically there is no header or footer.

  • Gary

    You need to install the header and footer modules. admin > content > modules.


Buy Gary A Beer?
Buying me a "beer" helps me to keep my contributions updated and keep this blog alive - and you get a link from my homepage to your site. Cheers!