Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

  • Replies 2.2k
  • Created
  • Last Reply

I do not know if this is the right place here.

In Firefox 42.0 for Ubuntu sometimes I have a problem with Bootstrap (osCommerce 234BS EDGE).
When I opened the product page and then click in the navigation bar, I jump back to the homepage. This happens often, but not always and only in Firefox. In Chrome or Chromium, there is no such problem.

Does anyone have this problem too?

Link to comment
Share on other sites

I do not know if this is the right place here.

 

In Firefox 42.0 for Ubuntu sometimes I have a problem with Bootstrap (osCommerce 234BS EDGE).

When I opened the product page and then click in the navigation bar, I jump back to the homepage. This happens often, but not always and only in Firefox. In Chrome or Chromium, there is no such problem.

 

Does anyone have this problem too?

 

It's likely that jquery isn't loaded before bootstrap, which is discussed at length here:

http://www.oscommerce.com/forums/topic/408272-bugs-in-edge-version-of-234-responsive/

 

If you're trying to find problems in Firefox, use Firebug - it's the bees' knees. It would show you an error loading bootstrap if I'm right.

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

It's likely that jquery isn't loaded before bootstrap, which is discussed at length here:

http://www.oscommerce.com/forums/topic/408272-bugs-in-edge-version-of-234-responsive/

 

If you're trying to find problems in Firefox, use Firebug - it's the bees' knees. It would show you an error loading bootstrap if I'm right.

 

thank you

Link to comment
Share on other sites

  • 2 weeks later...

Been working with osCommerce for years, but am new to bootstrap. Wanted to change heading (h1) size on the product page, but the CSS for that is under the ext/bootstrap/css directory. What is the best way to modify these elements please?

 Figured it out! For anyone else trying to work it out, please make all the necessary customisations in the user.css file in the catalog folder.

Link to comment
Share on other sites

  • 2 weeks later...

Hi guys and Merry Christmas. I'm also newly using bootstrap and notice on every page (product, category, front page etc) there's a gap above the H1 heading, does anyone know how to remove it (for dummies)? I've attached a picture of what I mean, it's between the blue line and the H1.

 

 

post-332255-0-83205300-1451258235_thumb.jpg

Link to comment
Share on other sites

Hi guys and Merry Christmas. I'm also newly using bootstrap and notice on every page (product, category, front page etc) there's a gap above the H1 heading, does anyone know how to remove it (for dummies)? I've attached a picture of what I mean, it's between the blue line and the H1.

 

Use Firefox browser and download the plugin Firebug - it helps you find how all the page elements are laid out and where the edges of all the different blocks are...

- in this case you'll be able to tell whether that gap belongs to the top of the header, the edge of the box it's sitting inside, or the bottom of the thing above it (or, most likely, a combination of them)

- you can also edit the style definitions for the elements within firebug so you can experiment with the css until you get the effect you're looking for - and at the same time check that it doesn't mess anything else up on that page

- then add your changes to the user.css style file and check you haven't messed up any other pages

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

Yeah, what @@BrockleyJohn siad, rr better just use the built-in Firefox developer tools which are already much better nowadays than Firebug.

Alternatively use the excellent Chrome developer tools.

Just click F12 in either of them and start your debugging journey.

Link to comment
Share on other sites

@@Sam-AUST

 

Your question probably needs it's own thread but in any case if you can post the url it would be easier to point you in the right direction.

 

Dan

Link to comment
Share on other sites

this might be a really obvious question but why can I not get the credit card logos in bm_card_acceptance.php box to not overflow onto more than 1 line

        foreach ( explode(';', MODULE_BOXES_CARD_ACCEPTANCE_LOGOS) as $logo ) {
          $output .= '<div class="float-cc-logo">' . tep_image(DIR_WS_IMAGES . 'card_acceptance/' . basename($logo)) . '</div>';
        }

.float-cc-logo {
 float: left;
 padding: 0px;
}

Link to comment
Share on other sites

Sorry for just jumping in on this but need some help. Using the latest version of Bootstrap 2.3.4 and have installed it all as needed and is up and running. I plan to use it only as a catalogue that is usable on any devise. So no need for shopping cart and that stuff so have turned it off.

I still however need to make some more changes to get rid of all the buy buttons and carts shown in the navigation bar!

Can anyone help with a list of files that need to be changed to do this? The only  one I have found so far is in the product_info.php in which just commented out the relevant code. However buttons are still showing on home page and new product page?

 

Link to comment
Share on other sites

@@PupStar

If I understand what you're trying to do correctly.  Have you tried putting a <br> tag before the </div> tag to put each on it's own line?  Although, I'm not sure why you want to do that as it will only elongate the box and therefore your page.

I'm not really a dog.

Link to comment
Share on other sites

Hi Zahid. If you're going to need lots of help with this it will be better to start your own topic. However, there are a couple of pointers below...

 

Sorry for just jumping in on this but need some help. Using the latest version of Bootstrap 2.3.4 and have installed it all as needed and is up and running. I plan to use it only as a catalogue that is usable on any devise. So no need for shopping cart and that stuff so have turned it off.

I still however need to make some more changes to get rid of all the buy buttons and carts shown in the navigation bar!

Can anyone help with a list of files that need to be changed to do this? The only  one I have found so far is in the product_info.php in which just commented out the relevant code. However buttons are still showing on home page and new product page?

 

If you don't need people to be able to create accounts either, you may not need any buttons on the site at all, and could simply change the css to hide them globally.

If not, the contents of the navbar is laid out in

catalog/includes/modules/content/navigation/templates/navbar.php

or you may have meant the button bar:

catalog/includes/modules/content/header/templates/buttons.php

and you should go through the files in catalog/includes/modules that have 'product' in the name - these produce the lists of products on the various pages

 

or just search for the string 'button' :P

Contact me for work on updating existing stores - whether to Phoenix or the new osC when it's released.

Looking for a payment or shipping module? Maybe I've already done it.

Working on generalising bespoke solutions for Quickbooks integration, Easify integration and pay4later (DEKO) integration at 2.3.x

Link to comment
Share on other sites

@@PupStar

If I understand what you're trying to do correctly.  Have you tried putting a <br> tag before the </div> tag to put each on it's own line?  Although, I'm not sure why you want to do that as it will only elongate the box and therefore your page.

 

@@John W

 

Thanks John, I have managed to sort this now by fiddling lol

Link to comment
Share on other sites

Hi Zahid. If you're going to need lots of help with this it will be better to start your own topic. However, there are a couple of pointers below...

 

 

If you don't need people to be able to create accounts either, you may not need any buttons on the site at all, and could simply change the css to hide them globally.

If not, the contents of the navbar is laid out in

catalog/includes/modules/content/navigation/templates/navbar.php

or you may have meant the button bar:

catalog/includes/modules/content/header/templates/buttons.php

and you should go through the files in catalog/includes/modules that have 'product' in the name - these produce the lists of products on the various pages

 

or just search for the string 'button' :P

Thanks John have started new topic.

 

Link to comment
Share on other sites

Could anyone let me know the code to add some padding around the product photos as the text in the description is literally right up against it and it could use a little space between I think?

 

Attached is a screen capture of how it appears by default.

 

(Sorry for the noobie question)

Link to comment
Share on other sites

  • 4 weeks later...

Now that I've caught up with 82 pages of this thread...

 

1. Kudos and thanks to Gary for putting all this together, and to the dozens of Busy Worker Bees who contributed code, testing, requests, and observations.

 

2. I am about to install Responsive-osCommerce-master.zip -- I understand that this is the "Edge" version which is pretty much up to date. Correct? In the meantime, I've been playing with http://template.me.uk/234bs3/index.php and my comments are based on that -- I'm assuming that it's more or less Edge (is that incorrect?). My browser is FF 43.0.4, using c-s-M to emulate mobile devices (I don't own any).

 

3. One major problem/bug: the grid display has "holes" if more than one row. Apparently the unequal heights of the boxes (e.g., 1 or 2 lines of product name) cause some cells to shift to the next row down. I see there was discussion of this back around November 2014 and supposedly it was fixed -- was there a regression somewhere, or am I actually using a very old version? Would doing a clear: both help, or an "equal height" class (I saw mentioned)? Is there any way to force equal height by looking at [all] the content and maybe tossing in an extra <br> (sounds kind of kludgey). There was talk at one point of going back to tables for the product grid layout -- did anyone figure how to do that cleanly in Bootstrap? Is it possible to put <tr> around each cell and use classes to enable/disable it per XS, SM, etc.? I would think that the Bootstrap designers would have addressed this long ago.

 

This is a show-stopper. I cannot put out a shop with such mangled grid display!

 

4. Some requests:

  • In grid view (no product text), there is a tremendous amount of wasted space on the left and right sides of each cell. It appears that the Bootstrap break points (based on width) do not match up well with what osC puts out for each cell. Is it possible to twiddle the break points, or otherwise force more (and narrower) cells in grid view? In 980x1280, there were only 2 columns!
  • Are the toolbar icons at the top supposed to have tooltips? I have no idea what any of them mean. Do they have them on a real phone or tablet? On a phone, they're under the "hamburger" icon, but at least they're fully labeled there.
  • A minor bug: on the Specials page at 1024W x 768H, the Buy Now buttons partly cover the sale price.
  • Did I miss a search facility somewhere? Is that an optional thing? There were comments about someone using Advanced Search.
  • For consistency, please add View: List/Grid for the first page (New Products for <month>).
  • Side info-boxes (e.g., What's New) should be in the same format as the main display, if in XS (single column) display. Right now, they seem to be fixed at "grid" style (no description), which looks odd if the main content column is "list". By the way, for What's New, is there any check made that this item isn't already showing in the main content? (not a 2.3.4BS-specific thing, just a wasted opportunity to promote something different)
  • This has been requested once or twice before, but I'll add my vote: (up to) 20 cells per page is far too many on a phone. If a customer has to swipe and swipe and swipe to get to the bottom, they'll give up in disgust. A phone should probably show 3 cells. Can this be done? Maybe all 20 cells can be sent, with 4-20 collapsed in some manner. Let the visitor decide if they want to expand all or part of the hidden cells. Or, just suppress 4-20 (hide) and change the "next page" starting point from 20N+1 to 3N+1 on the fly (pagination). You might even send back the new per-page value (3 instead of 20) to be used for the rest of the session. If the maximum number of cell columns is 3 anyway, perhaps the increment should be 15 or 18 per page rather than 20. And suppress the pagination buttons if there is only one page (wasted real estate, especially on a phone).
  • Minor glitch: on a 1024x768 display, the Payment Methods box is too narrow for PayPal's logo. Consider shrinking it down or getting an alternate logo (if there is one).

5. Maybe I overlooked it, but some additional documentation is needed. There is a README for the installation differences, but something should list all the other setup things you should do to get the most of of this version, such as suggestions on turning various boxes on and off for different screen sizes (can this be done?). I saw that there was a long discussion over eliminating various boxes, and apparently they ended up just being shoved to the page bottom. Maybe if they could be collapsed by default?

 

Then there will be lots of questions about how to customize this version. A "cookbook" file might be a good start on such documentation, e.g., "Q: How do I change box backgrounds from powder blue to blood red? A: in user.css, add the following CSS...". There was an early suggestion to use panel-default vs. panel-info in a certain place, and that could be written up as "here are the differences in appearance and behavior if you make such-and-such a change". After all the dust settles, I would hope that there would be some good documentation on how and where to make such changes, and even how to do a proper job of "templating" so that core code isn't messed up.

 

That's all for now. I'm sure I'll have more questions (is there a better thread for them?) as I actually get around to bringing up a 2.3.4BS store. And again, thanks to all for a great improvement over the old osC!

Link to comment
Share on other sites

@@MrPhil

 

 

3. One major problem/bug: the grid display has "holes" if more than one row. Apparently the unequal heights of the boxes (e.g., 1 or 2 lines of product name) cause some cells to shift to the next row down. I see there was discussion of this back around November 2014 and supposedly it was fixed -- was there a regression somewhere, or am I actually using a very old version? Would doing a clear: both help, or an "equal height" class (I saw mentioned)? Is there any way to force equal height by looking at [all] the content and maybe tossing in an extra <br> (sounds kind of kludgey). There was talk at one point of going back to tables for the product grid layout -- did anyone figure how to do that cleanly in Bootstrap? Is it possible to put <tr> around each cell and use classes to enable/disable it per XS, SM, etc.? I would think that the Bootstrap designers would have addressed this long ago.

 

Phil...I'm not sure if this will help in your situation or not but using images that are squared up and all the same size seems to sort this out for the most part....I have all of my images at 500 X 500 and use KISS image thumbs to reduce the size where appropriate.   Have a look at the image sizes in the boxes that don't line up to see if that is the issue.

 

Dan

Link to comment
Share on other sites

@@MrPhil that's an awful lot of data/questions in one post, so I will try to answer what I can. If I miss anything, point it out.

 

1. Kudos and thanks to Gary for putting all this together, and to the dozens of Busy Worker Bees who contributed code, testing, requests, and observations.

Thank You.

 

2. I am about to install Responsive-osCommerce-master.zip -- I understand that this is the "Edge" version which is pretty much up to date. Correct? In the meantime, I've been playing with http://template.me.uk/234bs3/index.php and my comments are based on that -- I'm assuming that it's more or less Edge (is that incorrect?). My browser is FF 43.0.4, using c-s-M to emulate mobile devices (I don't own any).

It is more or less Edge. With some extra bits that I am testing etc

 

3. One major problem/bug: the grid display has "holes" if more than one row. Apparently the unequal heights of the boxes (e.g., 1 or 2 lines of product name) cause some cells to shift to the next row down. I see there was discussion of this back around November 2014 and supposedly it was fixed -- was there a regression somewhere, or am I actually using a very old version? Would doing a clear: both help, or an "equal height" class (I saw mentioned)? Is there any way to force equal height by looking at [all] the content and maybe tossing in an extra <br> (sounds kind of kludgey). There was talk at one point of going back to tables for the product grid layout -- did anyone figure how to do that cleanly in Bootstrap? Is it possible to put <tr> around each cell and use classes to enable/disable it per XS, SM, etc.? I would think that the Bootstrap designers would have addressed this long ago.

Use images of the same height, this is best practice for Responsive.

Install the equal-height HT module.

 

In grid view .... there were only 2 columns!

What you see is not what the next person sees. Screenshots are required.

 

Are the toolbar icons at the top supposed to have tooltips?

No. Think about it more deeply and you should be able to come up with a good reason why they do not have them.

 

A minor bug: on the Specials page at 1024W x 768H, the Buy Now buttons partly cover the sale price.

Screenshot required.

 

Did I miss a search facility somewhere?

There are two inbuilt Search Boxes;

the usual sidebox

a header content module

 

Install one or both.

 

For consistency, please add View: List/Grid for the first page (New Products for <month>).

index is due to go modular soon, but having this as a list/grid is overkill.

 

Side info-boxes (e.g., What's New) should be in the same format as the main display, if in XS (single column) display. Right now, they seem to be fixed at "grid" style (no description), which looks odd if the main content column is "list". By the way, for What's New, is there any check made that this item isn't already showing in the main content? (not a 2.3.4BS-specific thing, just a wasted opportunity to promote something different)

You can force this easily enough.

Link to comment
Share on other sites

This has been requested once or twice before, but I'll add my vote:

(up to) 20 cells per page is far too many on a phone. If a customer has to swipe and swipe and

swipe to get to the bottom, they'll give up in disgust.

A phone should probably show 3 cells.

Nice idea. Anybody?

 

Minor glitch: on a 1024x768 display, the Payment Methods box is too narrow for PayPal's logo

Screenshot..

 

5. Maybe I overlooked it, but some additional documentation is needed.

and

Then there will be lots of questions about how to customize this version. A "cookbook" file might be a good start on such documentation, e.g., "Q: How do I change box backgrounds from powder blue to blood red? A: in user.css, add the following CSS...". There was an early suggestion to use panel-default vs. panel-info in a certain place, and that could be written up as "here are the differences in appearance and behavior if you make such-and-such a change". After all the dust settles, I would hope that there would be some good documentation on how and where to make such changes

Sure, waiting on someone to write it.

 

and even how to do a proper job of "templating" so that core code isn't messed up

A (so called) "template" should not change hardly any core code. 1 or 2 lines of code maximum.

 

 

 

Best is to make your own new thread for questions.

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