Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

Hi Burt

 

There appears to be a problem with the photoset-grid.

 

A product with one large image is OK

A product with three (or more) large images is OK

 

But a product with only two large images and the images do not thumbnail. We just get one large image above the other.

 

Regards

 

Ken

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

@ I had a quick look and the first thing I noticed is that the product prices get mixed in with the product names when viewed on a small screen as follows:

Link to comment
Share on other sites

@ Gary just an FYI here's what I see on index.php for that. Desktop.

 

 

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.

Link to comment
Share on other sites

@ That's got it Gary and I think it solves @@altoid problem too...looking back at @@burt post maybe it's time to move some of the column stuff to a menu at the top of the screen so we can see where we're at and I think @@toyicebear might have already worked through that or some of it at least.

Link to comment
Share on other sites

@@altoid Thanks for looking, but I havent touched the new products yet - it will be next if @@burt is hapy with the product listing module.

 

I did notice that the new products display looks pretty good with the default layout in osc_template.php of columns set @ -2 and main content set @ -8 But when I change it to column @ -3 and main content @ -6 it gets the hanging cliff effect.

 

What I wrapped around the product_listing layout will remedy that cliff effect.

 

The css and such I used is not dependent on bootstrap, so it can be an osC exclusive :thumbsup:

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

Hi Burt

 

There appears to be a problem with the photoset-grid.

 

A product with one large image is OK

A product with three (or more) large images is OK

 

But a product with only two large images and the images do not thumbnail. We just get one large image above the other.

 

Regards

 

Ken

 

Hi Ken

 

That's the correct behaviour as the images expand in size to meet the width of the containing div.

Link to comment
Share on other sites

@

 

Just looked at it in Grid mode and noticed that the special/sale price is hidden behind the buy button...probably related to the issue @@burt mentioned.

Link to comment
Share on other sites

I'm not sure if I like the double column grid in the XS view...1 column works well there I feel.

 

THoughts ?

 

agree, 1 column works just fine on a 320x480 resolution

Link to comment
Share on other sites

I'm also considering to "remove" some infoboxes when in the smallest view...I'm not a regular user of sites on a mobile, so need some advice from those who are in the know...

 

In my opinion (and note my comment above), the only boxes we need are;

 

categories

cart

maybe currencies ?

 

The others can maybe be removed (when in xs view) ?

 

 

Thoughts ? @@Dan Cole @@Ken44 @@Tsimi

Link to comment
Share on other sites

@@burt Good idea!

 

IMO, take away the "new products for march", "reviews" and "bestsellers". But leave, if possible, "specials" and "what's new".

that should put the categories box most top where it belongs. or evtl. put the search box on top and then categories...can't make up

my mind.

 

or something like this?

 

1. search

2. shopping cart

3. categories

4. manufacturers

5. whats new

6. specials

7. languages

8. currencies

9. information

 

like i said that is just my opinion don't know how other people browse or use osC.

Link to comment
Share on other sites

@@burt

 

I'm not sure if I like the double column grid in the XS view...1 column works well there I feel.

 

I tend to agree at least when it's viewed Vertically but if you view it Horizontally it looks pretty good...can it be tweaked to how it is viewed in XS mode?

Link to comment
Share on other sites

@@burt

 

In my opinion (and note my comment above), the only boxes we need are;

 

categories

cart

maybe currencies ?

 

The others can maybe be removed (when in xs view) ?

 

I'm wondering if all of the info boxes should go into some sort of a navigation/menu bar that sits at the top of the screen, at least in the XS view.

Link to comment
Share on other sites

I see the issues with double boxes in small viewport - and they can be remedied by changing the width in responsive mode, I'll put some fixes in for them shortly.

 

I do agree that it is probably best to have a single display in small viewports rather than double, but depending how much is turned on to actually display, double could work out.

 

A seperate class is used for responsive viewports, so its really very simple to change it to show 1 item per row. What may look good is to hide the switch for grid/list and keep it at 1 product per row.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

Hi

 

I found this site ‘The Haberdash Fox’ it has won awards for its responsive design.

 

In xs view a small menu icon appears at the top by the company name which leads to a separate menu screen. I don’t know if this is possible but it makes navigation very easy and cleans up all the pages.

 

Regards

 

Ken

Link to comment
Share on other sites

Hi...@

 

I changed some of the responsive styling if anyone wants to check it out

 

I had a quick look again focusing on XS mode and am coming to the conclusion that getting a decent grid view is probably going to be a bit of a challenge....at this point the buy button is getting pushed out of the column and when there is a special price it is hidden behind the buy button. I'm thinking that, as some one suggested, limiting it to a list view in XS vertical mode might be the best approach.

 

I also noticed that the price, in list view, is shown at the top of the product box instead of beside the buy button where I think it is intended to be. A couple of image shots showing what I'm seeing are attached.

 

Dan

Link to comment
Share on other sites

In xs view a small menu icon appears at the top by the company name which leads to a separate menu screen. I don’t know if this is possible but it makes navigation very easy and cleans up all the pages.

 

Hi Ken...I'm no expert on Bootstrap but I think that's a fairly standard feature...in fact Nick uses it in his example...he just used it for some of the categories but you'll see how it might work in an osC shop at his demo site that can be found here. I agree that it can be used to clean things up in some of the smaller views.

 

http://www.activeebiz.com/demo/osc2334-bootstrap3/

 

Dan

Link to comment
Share on other sites

@@Dan Cole , thanks for checking it.

 

I think you may be viewing a cached copy - Im getting things to stack now in mobile grid.

 

I think in actuallity, certian items in the grid need to just hide in mobile view, Im just trying to leave them all on to begin with.

 

The price in list view, by default it would set next to the buy button, but I tweaked the css just a bit to show proof of concept that each element can actually be moved around to diffrent areas. It gives a lot of flexibility for when a shop owner wants to have a certian look. Every item is inside its own wrapper, which in part gives it the ability to be placed anywhere inside the thumbnail.

 

I do agree that the mobile should be limited to just a single listing per row, but I'm trying to think ahead for that store owner who is going to insist that there be at least 2 products side by side :)

 

It doesnt need to be set that way for default, but at least the inner workings can be there.

Follow the community build:

BS3 to osCommerce Responsive from the Get Go!

Check out the new construction:

Admin Gone to Total BS!

Link to comment
Share on other sites

@WebSource 5

 

I think you were right Gary....I did a page refresh and it looks much better...the only thing I noticed this time it the way the word wrap works for the manufacturers...it's splitting the manufacturers names instead of wrapping on full words. Here is what I'm seeing now...

Link to comment
Share on other sites

Test shop is now updated to match the present Master Github. http://www.template.me.uk/2334bs3/

 

People, please test this and report back - I was expecting more people to take 2 minutes to have a browse around on their phones / tablets (maybe I expect too much ?) and report their findings ;)

 

Many thanks and chapeau to those who have looked at the site and posted their comments and screenshots, very much appreciated.

Link to comment
Share on other sites

in normal resolution (not xs size) list view the price is under the image and the buy now button is under the description.

is this intentional?

 

inside the cart contents (shopping_cart.php), if there are more then one item/product the price gets cut off. but if there is only one product inside no problem.

 

viewing in xs vertical or horizontal, "list view", the buy now button could use a bit of margin/padding. to close to the bottom.

 

anything else seems OK in xs (320x480) resolution. order process works very good. very, very nice checkout confirmation.

 

i attached images that show the mentioned issues.

Link to comment
Share on other sites

  • burt locked this topic
  • burt unlocked and locked this topic

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...