Home | Store | osCommerce Tutorials

osCommerce Main Categories Header

Part 2 - Write osCommerce Main Categories Header codes and compare original codes


Now the $info_box_contents array contains the value of Main Categories Header (i.e. Categories). We have enough information to display the Main Categories Header. Like previous tutorials, this is a good idea to see if we can write the codes on our own to get the same result.

Look again at the Main Categories Header again, this is simply a table with 1 row and 3 columns. The 1st column is the infobox/corner_left.gif image , the 2nd column is the $info_box_contents[0]["text"] and the 3rd column is the infobox/pixel_trans.gif image.

osCommerce Main Categories Header

With these information, this is quite easy to write the codes to display the osCommerce Main Categories Header. Here's the possible codes:

$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

//codes display the Main Categories Header
echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"0\">" . "\n";
echo "<tr>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\">" .
tep_image (DIR_WS_IMAGES . 'infobox/corner_left.gif') . "</td>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\" width=\"100%\">" .
$info_box_contents[0]["text"] . "</td>" . "\n";
echo "<td height=\"14\" class=\"infoBoxHeading\">" .
tep_image(DIR_WS_IMAGES . 'infobox/pixel_trans.gif') . "</td>" . "\n";
echo "</tr>" . "\n";
echo "</table>" . "\n";

// The following line is not required since we write our own codes to display the Categories Header
// new infoBoxHeading($info_box_contents, true, false);

Upload the categories.php to overwrite the old file.

Our own codes work correctly! The Main Categories Header display same as the original osCommerce shop.

osCommerce Main Categories Header

How original osCommerce Codes Works

It's time to see how osCommerce display the Main Categories Header on the webpage. Look at the codes again:

$info_box_contents = array();
$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

new infoBoxHeading($info_box_contents, true, false);

Obviously, the third code is used to display the osCommerce Main Categories Header.

new infoBoxHeading($info_box_contents, true, false);

This line simply create a new copy of infoBoxHeading object to work into. And then call the infoBoxHeading() function with the value of $info_box_contents send to.

Please note that infoBoxHeading is a class object which can be found in the includes/classes/boxes.php. The codes of the infoBoxHeading class is:

class infoBoxHeading extends tableBox {
function infoBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
$this->table_cellpadding = '0';

if ($left_corner == true) {
$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
} else {
$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
}
if ($right_arrow == true) {
$right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES .
'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
} else {
$right_arrow = '';
}
if ($right_corner == true) {
$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
} else {
$right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
}

$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
'text' => $left_corner),
array('params' => 'width="100%" height="14" class="infoBoxHeading"',
'text' => $contents[0]['text']),
array('params' => 'height="14" class="infoBoxHeading" nowrap',
'text' => $right_corner));

$this->tableBox($info_box_contents, true);
}
}

osCommerce Customization Tips:
You can edit the height of New Products Header by changing all the values of height="14"

Note:

PHP classes with similar variables and functions can be extended to another existing class by using the keyword 'extends'. In other words, the infoBoxHeading class is extended to the tableBox class.

Take a look at the tableBox class which is also in includes/classes/boxes.php. Here's part of the codes of tableBox class:

class tableBox {
var $table_border = '0';
var $table_width = '100%';
var $table_cellspacing = '0';
var $table_cellpadding = '2';
var $table_parameters = '';
var $table_row_parameters = '';
var $table_data_parameters = '';

// class constructor
function tableBox($contents, $direct_output = false) {
$tableBox_string = '<table border="' . ..........

..... // Codes here .....

$tableBox_string .= '</table>' . "\n";

if ($direct_output == true) echo $tableBox_string;

return $tableBox_string;
}
}

Let's study some of the codes of the infoBoxHeading class.

$this->table_cellpadding = '0';

This line of codes simply mean:

- Use $this to point to the table_cellpadding variable in the object and assign value of '0' to it.

$this->tableBox($info_box_contents, true);

Call the tableBox function with the "->" operator.

What are the values of $info_box_contents that send to the tableBox function to display the Categories Header?

The values of $info_box_contents are as below:

Array
(
[0] => Array
(
[0] => Array
(
[params] => height="14" class="infoBoxHeading"
[text] => <img src="images/infobox/corner_left.gif" border="0" alt="" width="11"
height="14">

)

[1] => Array
(
[params] => width="100%" height="14" class="infoBoxHeading"
[text] => Categories
)

[2] => Array
(
[params] => height="14" class="infoBoxHeading" nowrap
[text] => <img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14">
)

)

)

Obviously the HTML codes of the Main Categories Header table is created by the tableBox class. Actually the value or content of the table is stored in the $tableBox_string.

If you follow the codes of the tableBox class one by one. The content of the table ($tableBox_string) to display the Main Categories Header is:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td height="14" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt=""
width="11" height="14"></td>
<td width="100%" height="14" class="infoBoxHeading">Categories</td>
<td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
</tr>
</table>

This is the end of the osCommerce file structure of Main Categories Header.