Jump to content
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

SHOPOWNERS

As of 1st June 2019, most shopowners will want the FROZEN download.  This is a fixed point in time along the Edge timeline.

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

Gold Download (very old, avoid):
EOL.  No longer available.

Frozen Download (this one for most shopowners):
https://github.com/gburton/Responsive-osCommerce/archive/2341-Frozen.zip

Also:

EDGE:  (this one for "adventurous" shopowners)
https://github.com/gburton/osCommerce-234-bootstrap/archive/master.zip

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

Edited by burt
Update URLs

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

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

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

 

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.


Matt

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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

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.

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

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.


Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

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

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?

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.


Matt

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

Now that is quick :thumbsup: turbo from my internet


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

 

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

Share this post


Link to post
Share on other sites

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


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

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 ?


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

  • 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:

Edited by altoid

I am not a professional webmaster or PHP coder by background or training but I will try to help as best I can.

I remember what it was like when I first started with osC. It can be overwhelming.

However, I strongly recommend considering hiring a professional for extensive site modifications, site cleaning, etc.

There are several good pros here on osCommerce. Look around, you'll figure out who they are.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×