Header Menu to breadcrums bar

[Dj-Viper]

Hi,

 

I was wondering if it is possible and how of course to move the menu links that are in the header, shopping cart, login, contact etc. to the navigation bar where the breadcrumbs are. 

 

If possible with the menu buttons intact.

 

Greetings, Anne

[BrockleyJohn]

Hi Anne, what version of oscommerce are you using?

[Dj-Viper]

2.3.3 version i use.

 

The one before the last version.

 

Greetings, Anne

[BrockleyJohn]

If you've got more than 3 buttons at the top including a 'contact' one, then you've customised this part of the store already and will need to follow this with your own file.

 

First step is to edit includes/header.php so that the buttons are inside the breadcrumbs div. On a standard shop it means changing this:

<div id="header" class="grid_24">
  <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>

  <div id="headerShortcuts">
<?php
  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }
?>
  </div>

<script type="text/javascript">
  $("#headerShortcuts").buttonset();
</script>
</div>

<div class="grid_24 ui-widget infoBoxContainer">
  <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

to this:

<div id="header" class="grid_24">
  <div id="storeLogo"><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'store_logo.png', STORE_NAME) . '</a>'; ?></div>
</div>

<div class="grid_24 ui-widget infoBoxContainer">
  <div id="headerShortcuts">
<?php
  echo tep_draw_button(HEADER_TITLE_CART_CONTENTS . ($cart->count_contents() > 0 ? ' (' . $cart->count_contents() . ')' : ''), 'cart', tep_href_link(FILENAME_SHOPPING_CART)) .
       tep_draw_button(HEADER_TITLE_CHECKOUT, 'triangle-1-e', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL')) .
       tep_draw_button(HEADER_TITLE_MY_ACCOUNT, 'person', tep_href_link(FILENAME_ACCOUNT, '', 'SSL'));

  if (tep_session_is_registered('customer_id')) {
    echo tep_draw_button(HEADER_TITLE_LOGOFF, null, tep_href_link(FILENAME_LOGOFF, '', 'SSL'));
  }
?>
  </div>

<script type="text/javascript">
  $("#headerShortcuts").buttonset();
</script>
  <div class="ui-widget-header infoBoxHeading"><?php echo '  ' . $breadcrumb->trail(' » '); ?></div>
</div>

This will put the buttons over the breadcrumb bar, but you'll also need to make some changes to stylesheet.css to make it look right, eg change

#headerShortcuts {
  float: right;
  margin-top: 15px;
}

to

#headerShortcuts {
  float: right;
  margin-top: -5px;
}

to centre them vertically.

[Dj-Viper]

Will give it a try when i have a little time on my hands..

 

Greetings, Anne

[burt]

It's a real pity you decided to stay on 2.3.3 ...

 

In the latest responsive version, this (having the breadcrumb and buttons on the same row) can be easily achieved from within the admin area - no code changes at all.

[Dj-Viper]

Which version has de responsive stuff in it...  i have at the moment.. 2.3.3.4

 

Greetings, Anne

[BrockleyJohn]

Which version has de responsive stuff in it...  i have at the moment.. 2.3.3.4

 

Greetings, Anne

 

The version is 2.3.4[r] - the community responsive version of 2.3.4

 

You can download the gold (stable) version of the code here: https://github.com/gburton/osCommerce-234-bootstrap/archive/v2.3.4-GOLD.zip

 

Upload the new code to its own  folder on your server (e.g. mydomain.com/test) so you can try it out without breaking your store.

 

If you want to start with the demo database just to try it out, first create a new empty database and then run the install by accessing the shop folder. When the config files are not set up it runs the install automatically.

 

If you want to try it out with your own data, you'll need to manually edit the config files. First create a copy of your existing database to use for your test shop. Then you're ready to edit the config files; they're going to be similar to the ones in your existing store except for the different database login information near the bottom, and the values of cookie path and catalog which should be set to your subfolder.

 

Finally, you need to apply some changes to your database and then you'll be ready to go:

1. Upgrade it from 2.3.3.4 to 2.3.4 - only a couple of sql commands to run against your database copy:

alter table sessions modify sesskey varchar(128) not null;

insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_func
tion, date_added) values ('Allow Orders Not Matching Defined Shipping Zones ', 'SHIPPING_ALLOW_UNDEFINED_ZONES', 'False', 'Should orders be allowed to shipping
addresses not matching defined shipping module shipping zones?', '7', '5', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now());

2. Apply changes to go from 2.3.4 to bootstrap see http://www.oscommerce.com/forums/topic/399678-234normal-to-234responsive-database-conversion-script/

 

After you've applied these database changes, you'll have a set of responsive shop software that runs, but it won't have much of the shop parts that you expect to see until you've gone into the admin and turned on all the modules to make them come out..

 

This is all under modules in admin. There are two kinds of module that make stuff come out: boxes (which you may know about already), and content (which isn't used much yet in ordinary osc). The best way of finding out about them is to go through and turn them on one at at time to see what happens! Try playing with the sort orders and other settings and you'll see you can change where they come out.

 

There's another kind of module - header tags. They change how stuff on the page behaves, so for example if you find that your product lists in the catalog index, or new products, don't line up properly - go into header tags and turn on the 'equal heights' module for the pages you want to line up.

 

Try squeezing the width of your browser all the way down to mobile proportions and see how all the stuff rearranges.

 

Oh, and there's another setting - up in the store configuration - that switches the bootstrap container between fluid and not. Basically, that's a choice about whether your shop fills the entire width of larger screens or has a maximum size with margins.

 

Have fun!

[Dj-Viper]

Hi,

 

Is there also a upgrade guide for the 2.3.4 to bootstrap, which files to edit etc... 

 

I have a heavily edited shop.

 

Mvg. Anne

[BrockleyJohn]

If there is an upgrade guide, I've not found it. As you would imagine, the main differences are in the catalog pages and modules as the presentation is different (with some necessary extra bits in the database to go with them). I have just run a compare between the bootstrap gold version and the 2.3.4 release, which confirms that there are 38 catalog page files that need changing but for most of them it's very simple - adding a couple of divs and classes. A lot of the difference comes in the common parts of the pages - template, header, footer, styles, scripts and so on.

 

If the modifications you have done are your own design, you can look at which is less work - applying them again to the bootstrap files or applying the bootstrap changes to your files, However, if you have applied standard addons, you may be lucky:

 

As well as the "vanilla" bootstrap gold/edge from a small group of community developers there is a "flavoured" one with a bunch of addons already installed which could be a good start point if it's a match to what you need. There are also addons available that are designed/modified to go onto bootstrap.

 

Here are some resources for you to help set up a development store:

database conversion: http://www.oscommerce.com/forums/topic/399678-234normal-to-234responsive-database-conversion-script/

bootstrap code: http://www.oscommerce.com/forums/topic/404711-234-gold-edge-24/

bootstrap addons: http://www.oscommerce.com/forums/topic/399743-oscommerce-bootstrap-addons-and-code/

bootstrap with pre-installed addons: https://github.com/newburns/osCommerce-234-bootstrap-wADDONS

 

If this all seems too much, the roadmap for osc 2.4 shows a bootstrap-based version as the next release but I don't know when that's likely to happen or if it will have a detailed upgrade guide like the one you seek.

[Dj-Viper]

Hi,

 

Printing this info. for later use... file editing is no problem for me...  Which comparison tool did you use..

 

Greetings, Anne

[BrockleyJohn]

@@Dj-Viper I used winmerge

[Dj-Viper]

@@BrockleyJohn have installed 2.3.4bs at the moment, but i'm a little in loss of how to keep it updated to the new specs. Can i give me advice in how that is possible/be done.

Greetings, Anne

[BrockleyJohn]

@@Dj-Viper Hi Anne,

 

I'm happy to advise; can you give an example of an update that you want to do?

[Dj-Viper]

Hi,

 

The question is not a particulair update, but in the sense of how to keep everything up to date, where can i find the updates that are being don constantly on the codes. Like 2.3 to 2.3.1 for example

 

Greetings, Anne

[BrockleyJohn]

Ah, ok. When a new version comes out, it's announced in the News and Announcements forum on here.

 

Within the new version, the release notes tell you what's been changed from the previous released version.

 

With the bootstrap community version, you can keep tabs on all the changes being done to the code through github, and see the latest versions of everything. There's a release that corresponds to bs gold, assuming that's what you installed, and you'll be able to pull off all the code changes since then.

Github is free to join and use as long as you don't want to keep your stuff private.

The latest bootstrap is here in the master branch:

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

You should think of this version as beta-test code; it works but there's going to be the odd wrinkle that needs ironing out. In other words, don't put it straight into a live store and hope for the best, run a development store too to try out your changes properly first and make sure everything's ok.

If this is a path you may want to go down, this thread might be helpful:

http://www.oscommerce.com/forums/topic/407425-sourcetree-and-github-leader-needed/

 

If that all seems too much, you'll have to wait for the next release!