Jump to content

Archived

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

burt

Responsive osCommerce - Bootstrap

Recommended Posts

@@burt just updating my site from your git to add the font awesome changes and noticed you didn't change Menu icon-bar the navbar template.

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-core-nav">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

Could be (should be?)

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-core-nav">
        <span class="sr-only"><?php echo HEADER_TOGGLE_NAV; ?></span>
        <i class="fa fa-bars"></i> 
      </button>

Share this post


Link to post
Share on other sites

Sorry @@burt one more....

 

In product_listing module

        <a href="#" id="list" class="btn btn-default btn-sm"><span class="fa fa-th-list"></span><?php echo TEXT_VIEW_LIST; ?></a>
        <a href="#" id="grid" class="btn btn-default btn-sm"><span class="fa fa-th"></span><?php echo TEXT_VIEW_GRID; ?></a>

The quality of the font awesome th-list and th don't work in a btn-sm - in particular on larger screens.

 

However changing it from btn-sm to just btn it is a little to large on xs screens.

 

Any thoughts?

Share this post


Link to post
Share on other sites

I don't know if its off topic but I installed the "Total B2B" in OSC (BS) and in login.php I get this error?

Fatal error: Call to undefined function tep_draw_password_field() in /users/xxx/www/oscbs/login.php on line 126

Share this post


Link to post
Share on other sites

@@Pelvis

totally off topic, please use whatever support thread you can find for whatever "total b2b" is.

 

@@greasemonkey

icon-bar is not a glyphicon, so it can be left as is.  Or it can be changed.

th and th-list in a small button ... try some of the other fa icons?


Help shape the future of Phoenix; join the Phoenix Club

Share this post


Link to post
Share on other sites

@@burt

 

icon-bar is not a glyphicon, so it can be left as is.  Or it can be changed.

yes, got it... it was more of a suggestion I guess. Although it only saves a couple lines of code.... I'm not sure it was worth the time to write it down.... lol   :blush: 

 

 

th and th-list in a small button ... try some of the other fa icons?

I think the th and th-list make the most sense (although I'll try some others). They just don't render on a large screen in a btn-sm.

 

Best I can come up with is add fa-lg... or remove the btn-sm (my preference). Again just a suggestion..... not a biggie either way.

Share this post


Link to post
Share on other sites

Thanks for that.  I'd forgotten that this was a choice I'd made when I set up my server.  It's the little things that will get you.  I'll update the files next week.

I'll try and dig out the relevant locations for Ubuntu, Centos and Windows. 

 

Are there any more popular OS's that would have a different path?

 

Chris.

 

Good job, Chris. I think it could be a good idea also to cater for shared hosting which can be a variety of formats... if folks are using filemanager in a control panel or an external ftp they may never even need to know the full path now it gets put into the config files for them. Do you need to refer to the full physical path throughout anyway, maybe [catalog]/install etc? People operating from the command line who need to know, probably don't need telling.

 

Maybe also tell shared hosting people not to start with the version of osc that comes as an install option in their control panel as it's easier to start fresh.

 

...and in the vain hope that someone will read all the way to the end, something about equal heights might reduce the number of non-bug reports.

 

Here are some layout notes I began earlier - use/ignore as you will. (ms-word doc)

 

If only the responsive github had been set up with a catalog folder and a docs folder, there'd be somewhere to put it :P

I did wonder about the repo wiki but I've a feeling no one would ever look at documentation if it's not in the download package, though maybe if linked from the default catalog index and somewhere in admin?


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (Phoenix).

here: on the official osc download page

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

Share this post


Link to post
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?

Share this post


Link to post
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://forums.oscommerce.com/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.


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (Phoenix).

here: on the official osc download page

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

Share this post


Link to post
Share on other sites

I've noticed a slight issue in the Contact Us page - the red star which should appear next to the "Required information" text actually appears in line with the Contact Us heading text, as per the attached screenshot. Any ideas?

post-323447-0-05306000-1450039320_thumb.jpg

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

 

 

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

Share this post


Link to post
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


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (Phoenix).

here: on the official osc download page

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I tried with firefox but could not work out where the space belonged unfortunately.

 

add this to your user.css and it should sort your problem out

.page-header {
  margin: 0px 0 0px;
}

Share this post


Link to post
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;
}

Share this post


Link to post
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?


 

Share this post


Link to post
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.

Share this post


Link to post
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


For a new install or if your store isn't mobile-friendly, get the community-supported responsive osCommerce (Phoenix).

here: on the official osc download page

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

Share this post


Link to post
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

Share this post


Link to post
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.


 

Share this post


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

×