Latest News: (loading..)
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

2,155 posts in this topic

Example site of (more or less) 2.3.4 with Bootstrap 3.

http://template.me.uk/234bs3/index.php

Please point out any areas that you feel need attention.  Thanks

Gold Download:
https://github.com/gburton/osCommerce-234-bootstrap/archive/v2.3.4-GOLD.zip

EDGE:  Gold + Extra Commits such as bugfixes:
https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

Edited by burt

Share this post


Link to post
Share on other sites

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://forums.oscommerce.com/topic/395092-colourbox-photosetgrid/

 

Regards

John

Edited by joli1811

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@

 

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

 

Please do! I've starting upping commits, so please do fork it and compare against yours and vice versa - let's get this the best product we possibly can. Same for anyone else who has a bootstrapped version :thumbsup: @@mattjt83 @@wHiTeHaT

Tsimi likes this

Share this post


Link to post
Share on other sites

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

Edited by Dan Cole

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

joli1811 likes this

Share this post


Link to post
Share on other sites

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

Tsimi likes this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

That would be great, thanks Nick

Share this post


Link to post
Share on other sites

So far so good. Got a few more bits done today;

 

- Bootstrap Datepicker

http://www.eyecon.ro/bootstrap-datepicker/

New HT Module - this allows to use the getblocks function to call in the files on a per page basis only loading the .js and .css file on the pages needed

 

- Product Listings

http://bootsnipp.com/snippets/featured/list-grid-view

Grid / List chooser

 

- Products_New and Specials

Now use the product listing module to benefit from the Grid/Lists

 

- Messagestack CSS

Messagestack now outputs into Bootstrap Alert Div (looks nicer)

 

- Start of HTML5 Forms

login.php

 

- Buttons & Icons

Added Glyphicons to the Buttons and the Account List

 

- HT Module to call the Colorbox scripts

This allows to use the getblocks function to call in the files on a per page basis only loading the .js and .css file on the pages needed.

 

NEED MORE FEEDBACK, PLEASE: http://template.me.uk/2334bs3/index.php

 

 

 

Updated site at http://template.me.uk/2334bs3/index.php

Edited by burt

Share this post


Link to post
Share on other sites

Now that is quick :thumbsup: turbo from my internet

Share this post


Link to post
Share on other sites
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.

Edited by toyicebear

Share this post


Link to post
Share on other sites

:thumbsup: thanks guys :)

 

It'll be an ongoing project, but I would like to try to get the whole shop side completed by the end of March (or if possible earlier). 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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Edited by toyicebear

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now