Responsive osCommerce - Bootstrap

[burt 5,612]

SHOPOWNERS

As of 4th July 2019, most shopowners will want the PHOENIX download.

https://github.com/gburton/Responsive-osCommerce/releases

PHOENIX:

Phoenix has osCommerce 2.3.4.1 as its foundation.  It uses Bootstrap 4 in the Shop Side.

FROZEN:

Frozen has osCommerce 2.3.4.1 as its foundation.  It uses Bootstrap 3 in the Shop Side.
Frozen is now in Sunset Status with EOL slated for 31 December 2019 [extended to 31 March 2020 by request].

GOLD:

EOL

 

Developers
You do you, you know what's best for your needs.

[♥joli1811 171]

Hi Burt

 

Just had a quick look noticed the html is not working you tube

 

http://template.me.uk/2334bs3/product_info.php?products_id=28

 

my test site with color box also never noticed before as have not used the html box??

 

May be something to do with what Matt was saying overflow:hidden property

 

http://www.oscommerce.com/forums/topic/395092-colourbox-photosetgrid/

 

Regards

John

[♥mattjt83 133]

@@burt Just tested with the latest stable FF. You must be working on the site or something because there were weird things happening and now they're gone!

 

 

You should remove inline styles from inputs, selects where possible since it messes with the default bootstrap styles (left-hand search for instance)

 

Video can't be seen on http://template.me.uk/2334bs3/product_info.php?products_id=28

 

I would suggest moving forms out of the <table> structure and instead use the form classes available. form-horizontal for instance.

 

Overall nice effort so far. I'm glad to see things moving away from 960gs. Let me know if you want any help working on the responsive design aspects.

[burt 5,612]

Tested it in IE, Chrome. The youtube popup works OK.

 

In Firefox, the opened modal includes the video => OK.

But the window has no height.

 

Reason:

 

<object type="application/x-shockwave-flash" width="640" height="385" data="http://www.youtube.com/v/tAbsmHMAhrQ?fs=1&autoplay=1"><param name="movie" value="http://www.youtube.com/v/tAbsmHMAhrQ?fs=1&autoplay=0" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent" /></object>

 

should be

 

<iframe width="560" height="315" src="http://www.youtube.com/embed/tAbsmHMAhrQ?autoplay=0" frameborder="0" allowfullscreen></iframe>

 

In other words, colorbox needs the iframe? Maybe, possibly??

[burt 5,612]

Thanks Matt, I need as much help as possible from as many people as possible....

 

This is to be a community effort, Github will be coming soon.

 

[burt 5,612]

https://github.com/gburton/osCommerce-2334-bootstrap

 

This is not more than a basic 2.3.3.4 at the moment, I will be adding the Bootstrap over the next 48 hours.

[Ken44 4]

Hi Burt

 

This is looking promising. One thing I noticed.

 

http://template.me.uk/2334bs3/index.php?manufacturers_id=4

 

There's Something About Mary gets pushed onto a third row in grid view (Chrome)

 

Can’t wait to see it on Git

 

Regards

 

Ken

[♥GLWalker 149]

Awesome! Ive also been working on one that is compatible with the frame controller mod I recently released.

 

Its not much to lok at right now, but I took the same category/grid list and did a rough setup with a button dropdown for sorting, and added a jQuery cookie so that it will remember a users choice of grid or list from page to page:

http://newtheme.wsfive.com/index.php?cPath=3_10

 

Other changes I have done were to the input fields and forms, I added the nessasary classes VIA the function to give them the polished look Bootstrap provides. I also added upon tep_draw_input_field to add in HTML5 fields for email, number, date, etc; It makes it so much more user friendly when accessing from a mobile device.

 

The button function was also slightly changed to allow for the bootstrap button classes, and font-awesome icons.

 

Perhaps I should place mine on git hub and we share code.

[♥toyicebear 206]

Made a basic bootstrap 3 demo some time ago at http://www.activeebiz.com/demo/osc2334-bootstrap3/

[♥Dan Cole 547]

Hi @@burt I really like what I'm seeing and the direction your taking things...we really need a responsive design. In an effort to try and give you some input I took a good look around and the only thing I noticed that seemed strange is the images on the product_info pages...they seem to come up in an oversized mode and if you click on them they shrink to a thumbnail size...maybe they just need to have separate images uploaded but in any case I thought I'd point that out in case it is of any help.

 

You're getting me excited about upgrading now...

 

Dan

[♥Dan Cole 547]

Wanted to see what the new site looked like on a small device and discovered that FireFox has a responsive design view under the Web Developer tab...Ctrl+Shift+M will get you there. You learn something new everyday...I'm now off to look at you own site...

[♥Tsimi 525]

i can't contribute anything to this topic since i have no clue about bootstrap or anything you guys are talking about here. sounds all like rocket science to me.

i only have a question regarding responsive design.

i have seen a couple ecommerce and non ecommerce sites that implement bootstrap or like mommaroodles recently created HTML5 to create a responsive function.

what all have in common is this "flat" design, i don't know how to explain this in web developers term.....maybe this article (point 3) explains it better...

 

http://www.practicalecommerce.com/articles/63124-7-Ecommerce-Design-Trends-for-2014

 

is this a "must have" for a site to be responsive or can it be changed to look more................different?

[♥mattjt83 133]

@@Tsimi

 

the flat design is just what is in fashion right now I think. It looks nice and professional and is very popular right now. Does it have to be used? No. Is it important for responsive design? No.

[♥toyicebear 206]

When I get time I might just fork yours at github and add over relevant parts so they can easily be pushed back into yours again.

[♥joli1811 171]

Now that is quick :thumbsup: turbo from my internet

[♥toyicebear 206]

That would be great, thanks Nick

 

Made a fork and added:

 

- Review stars using Glyphicons

- Updated create account form and also added in a progress bar.

[♥GLWalker 149]

Ive forked it, going to make some changes and push it.

[♥toyicebear 206]

Bootstrap 3 pagination added.

[♥Dan Cole 547]

For this we who have forks will need a lot more input from shopowners (by going to the test shop and looking around) please, make note of any inconsistencies - test it out on your ipad, on your iphone etc.

 

For iphones etc I'm wondering if we're going to need to rethink the entire shop design? Seems like all the "boxes" end up towards the bottom of the display on small screens...for example the search box (and others of course) end up below the products being displayed...at least that is what I'm seeing. Probably not the best way to present those options, shout outs etc for customers. We might need to rethink the overall shop design. I'm not sure what other e-commerce sites do in that regard but it's probably worth looking at.

[♥toyicebear 206]

Essential links, navigation and search can be placed in the header so that they are easily accessible on all devices.

 

Which also opens up for having a 1 column or 2 column design as opposed to the "boxy" 3 column design.

[♥Dan Cole 547]

Essential links, navigation and search can be placed in the header so that they are easily accessible on all devices.

 

Which also opens up for having a 1 column or 2 column design as opposed to the "boxy" 3 column design.

@@toyicebear Agreed!

 

BTW, I took a quick look at the demo sites for Prestashop, Magento and Opencart...Burt had linked to them in a previous post and found that none of them are using a responsive design. No learning there but on a positive note we'll be out in front of the pack with the bootstrap version you guys are working on. :)

 

Dan

[♥toyicebear 206]

The upcoming Opencart 2.0 will be responsive, http://oc2.opencartdemo.com/

[♥bruyndoncx 260]

@@burt

Here's some feedback from a shopowner/(ex-)developer ;-)

 

The banner image at the bottom doesn't scale down on small screens.

 

The listing of products in the 'New Products for xxx' is slightly differently structured from the product listing where you don't have a view button. I personally favour consistent layout of the thumb/mini description in product listing, modules and boxes.

 

As all the boxes are full width at the bottom, they take up a lot of space when they should not.

I don't remember where exactly, but in other designs optimized for small screens, the link to what's new and specials is usually very prominent and opening up a new screen. They do not show the little picture boxes.

While for medium (tablet) size screens, the layout is more visual, so you'd show a rather big picture of the new item with a prominent link to see more new items next to it.

 

An icon (wheel like top right on facebook) is often used to hide configuration settings behind on small screens. I think it could be used to put the language and currency options behind on small screens.

 

Navigation on top, and responsive is one of the big issues.

Should it support multi-level dropdown out of the box, apparently some functionality removed from bs3, but implemented by this guy again http://www.jeffmould.com/2014/02/10/responsive-multi-level-drop-menu-bootstrap-3-updated/

Having bm_categories, and wanting it on top, I think that we are also looking at having header content modules (and then possibly footer too while we are at it ...)

[♥bruyndoncx 260]

Question on how you use bootstrap with osC

On some sites I have seen a header sticking to the top of the screen. Is this something that would be configurable from within oscommerce admin screens, or are there certain design decisions like this coded in the stylesheet ?

[♥altoid 153]

• What's the effect on the layout if a larger shop logo is used? on smartphone, it appears the logo is affecting the way the header shortcuts appear in portrait or landscape view.
  
• 
  
• on a smartphone, at the index page, the new products is exclusively in list format which leads to a lot of scrolling, whereas grid layout would be more space efficient. this is more pronounced when the phone is held landscape view. or give view a list/grid option there.
  
• 
  
• I ran a test purchase all the way through, no layout/graphical issues appeared in the process.
  
• 
  
• Doing a search box query for "dvd" the results are somewhat elongated product displays with a lot of blank space between the image/title above and the price / buy now button below. That's in both grid and list layout.
  
• 
  
• in mobile device view, my preference would be to want the category box before the "what's new" list. If the shop owner could control placement of the boxes on the admin side as can be done in the current system that may deal with such preferences.
  

Good to see this move to address built in core responsiveness. I see in my Google Analytics a significant portion of site visitors using mobile devices when visiting my shops. The way things are going on with mobile site visitation this seems to be the way to go for shop design. :thumbsup: