Create new Box in osCommerce 2.31

osCommerce has changed the way to create your own infobox in v2.3x. Majority of the links on internet are for older versions and which does not work on v2.31. If you want to create your new info box in 2.3x which modules now then follow the below instructions.

  • Copy catalog/includes/modules/boxes/bm_information.php and give it a new name.
  • Edit that file and change bm_information to your new box name throughout that file.
  • Change all of the constants that include _INFORMATION_ to include your new name instead. Keep them in all caps.
  • Change the content to what you want in your new box. If you are using links to new files, keep the same format as the links in that box. The part that generates the box is in the execute() method.
  • Copy catalog/includes/languages/english/modules/boxes/bm_information.php and give it a the same name as you did the file in step 1.
  • Make the same changes to the constants in this file that you made in step 3.
  • Upload your two new files.
  • Go to your store Admin > Modules > Boxes and install your new module. Give it a sort order that will place it where you want it.

Feel free contact me for detailed instructions or if you want a video tutorial.

Displaying all categories and sub-categories in category box in osCommerce

osCommerce by default displayes only top level categories in category box. To display all categories and sub-categories hierarchy in category box follow these instructions.

Steps:

  1. index.php – change on around line 37:
    if ($category_depth == 'nested') {
    

    To:

    if ($category_depth == 'nested' && isset($HTTP_GET_VARS['cPath'])) {
    
  2. includes/application_top.php – change around line 437:
    $cPath = '';
    

    To:

     $cPath = '0';
    
  3. includes/modules/boxes/bm_categories.php – find around line 99:
     $parent_id = $categories['categories_id'];
    

    Add:

     $dbs[] = $categories['categories_id'];
    
  4. includes/modules/boxes/bm_categories.php – change at around line 109:
     while (list($key, $value) = each($cPath_array)) {
    

    To:

     while (list($key, $value) = each($dbs)) {
    

Give a new look to your osCommerce store

That’s how the osCommerce theme looks by default in version 2.3.1

the default redmond theme

What we want to do is, to change the light blue of the buttons, infobox headings and breadcrumb line (thats the line just under the header). In other words, we’re going to change the color theme of the store. The whole process won’t take more than some minutes, let’s start

1. Choose a theme from “themeroller”

Just go to the jquery-ui page and pick a new theme from themeroller. You can take one of the ready themes, you can make adjustements to an existing one or even create your own theme.

The jquery ui themeroller

There are really many themes to choose from. After you are done click “download”. You’ll be transfered to another screen.

Download your new theme

Leave all components checked and click “download” again. You’ll get a complete copy of jquery ui to your computer. Unzip the file and open the folder.  The folder will look like this

The themeroller folder

We don’t need all of it’s contents, because jquery ui is already installed in osCommerce. The part we need is marked with orange in the above image. It’s named by the name of the theme we choose. Here we need to do one change, to rename the file jquery-ui-1.8.6.custom.css to jquery-ui-1.8.6.css

2. upload the theme to your server

Use your favorite FTP program to upload the folder “ui-darkness” (the folder name depends on the theme you downloaded from themeroller) to following location

[catalog]/ext/jquery/ui/

3. activate the new theme

Last step is to “tell” to our store to use the new theme. To do this we need to go to file [catalog]/includes/template_top.php and change the path to the theme. This path is set in following line

29
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/redmond/jquery-ui-1.8.6.css" />

This we change to

29
<link rel="stylesheet" type="text/css" href="ext/jquery/ui/ui-darkness/jquery-ui-1.8.6.css" />

Only thing we do is, to change the path to go to folder “ui-darkness” instead of “redmond” which is the default theme. You need ofcourse to set the right name, according to the theme you’re going to use

Lets see how our store looks now