Jump to content



Photo
* * * * * 3 votes

Bootstrap 3 in 2.3.3.4 - Responsive from the Get Go


  • Please log in to reply
1167 replies to this topic

#1   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 16 February 2014 - 15:37

Example site (about half done!) of 2.3.3.4 with Bootstrap 3.

http://template.me.u...34bs3/index.php

- ripped out the 960 system in favour of BS
- replaced fancybox and bxgallery with photoset grid and colorbox per 2.4
- replaced category lists with grid/list view as here. Hat-tip @WebSource 5
- replaced new products for month with inbuilt BS grid.

Still much to do, please point out any areas that need attention.

Note that I am (at this point) solely interested in the parts of the shop PRIOR to the checkout procedure, the checkout and account pages will come later.

Thanks

DOWNLOAD LINK:
https://github.com/g...hive/master.zip

Edited by burt, 28 April 2014 - 11:55.

IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#2 ONLINE   joli1811

joli1811

    Anybody seen this leprechaun say yeah !!

  • Community Sponsor
  • 2,257 posts
  • Real Name:john dunlop
  • Gender:Male
  • Location:Ireland

Posted 16 February 2014 - 16:55

Hi Burt

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

http://template.me.u...?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.oscomm...x-photosetgrid/

Regards
John

Edited by joli1811, 16 February 2014 - 16:58.

To improve is to change; to be perfect is to change often.

#3   mattjt83

mattjt83
  • Community Sponsor
  • 414 posts
  • Real Name:Matt Toste
  • Gender:Male
  • Location:CA, USA

Posted 16 February 2014 - 17:06

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

#4   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 16 February 2014 - 17:08

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&amp;autoplay=1"><param name="movie" value="http://www.youtube.com/v/tAbsmHMAhrQ?fs=1&amp;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??
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#5   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 16 February 2014 - 17:27

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.

IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#6   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 16 February 2014 - 18:32

https://github.com/g...-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.
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#7   Ken44

Ken44
  • Members
  • 307 posts
  • Real Name:Ken
  • Gender:Male
  • Location:UK

Posted 16 February 2014 - 18:33

Hi Burt

This is looking promising. One thing I noticed.

http://template.me.u...ufacturers_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

#8 ONLINE   GLWalker

GLWalker

    ıllıllı < /> ıllıllı

  • Community Sponsor
  • 799 posts
  • Real Name:G.L.Walker
  • Gender:Male
  • Location:Republic of Texas

Posted 16 February 2014 - 22:39

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

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!


#9   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 16 February 2014 - 22:44

@WebSource 5

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.gif' class='bbc_emoticon' alt=':thumbsup:' /> @mattjt83 @wHiTeHaT
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#10 ONLINE   toyicebear

toyicebear
  • Community Sponsor
  • 6,409 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 17 February 2014 - 00:29

Made a basic bootstrap 3 demo some time ago at http://www.activeebi...334-bootstrap3/

#11   Dan Cole

Dan Cole
  • Community Sponsor
  • 424 posts
  • Real Name:Dan Cole
  • Gender:Male
  • Location:Ontario, Canada

Posted 17 February 2014 - 00:41

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, 17 February 2014 - 00:45.


#12   Dan Cole

Dan Cole
  • Community Sponsor
  • 424 posts
  • Real Name:Dan Cole
  • Gender:Male
  • Location:Ontario, Canada

Posted 17 February 2014 - 01:15

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

#13 ONLINE   Tsimi

Tsimi

    Gaijin

  • Community Sponsor
  • 611 posts
  • Real Name:Lambros
  • Gender:Male
  • Location:Japan

Posted 17 February 2014 - 03:42

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.practical...Trends-for-2014

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

"IF YOU REALLY WANT TO ENSLAVE PEOPLE,
TELL THEM YOU ARE GOING TO GIVE THEM
TOTAL FREEDOM."

-L.Ron Hubbard


#14   mattjt83

mattjt83
  • Community Sponsor
  • 414 posts
  • Real Name:Matt Toste
  • Gender:Male
  • Location:CA, USA

Posted 17 February 2014 - 05:04

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

#15   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 17 February 2014 - 10:11

Made a basic bootstrap 3 demo some time ago at http://www.activeebi...334-bootstrap3/


Would/could you github it ?
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#16 ONLINE   toyicebear

toyicebear
  • Community Sponsor
  • 6,409 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 17 February 2014 - 10:26

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.

#17   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 17 February 2014 - 10:56

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
IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#18   burt

burt

    Vanquisher of Demons

  • Community Team
  • 10,002 posts
  • Real Name:G Burton
  • Gender:Male
  • Location:UK/DEV/on

Posted 17 February 2014 - 17:18

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

- Bootstrap Datepicker
http://www.eyecon.ro...rap-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.../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.u...34bs3/index.php



Updated site at http://template.me.u...34bs3/index.php

Edited by burt, 17 February 2014 - 17:33.

IF YOU MAKE A POST REQUESTING HELP...please state the exact version of osCommerce that you are using. THANKS
 
Big Bang Templates for 2.3 osCommerce - 2.3.1 > 2.3.4 - Buy One, Get One Free
 
--
Making your osCommerce better, one module at a time - get in touch.

#19 ONLINE   joli1811

joli1811

    Anybody seen this leprechaun say yeah !!

  • Community Sponsor
  • 2,257 posts
  • Real Name:john dunlop
  • Gender:Male
  • Location:Ireland

Posted 17 February 2014 - 17:36

Now that is quick /thumbsup.gif' class='bbc_emoticon' alt=':thumbsup:' /> turbo from my internet
To improve is to change; to be perfect is to change often.

#20 ONLINE   toyicebear

toyicebear
  • Community Sponsor
  • 6,409 posts
  • Real Name:Nick
  • Gender:Male
  • Location:World Citizen

Posted 17 February 2014 - 22:17

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, 17 February 2014 - 22:19.