Home | Store | osCommerce Tutorials

osCommerce New Products Module - New Products Header (2)

Part 2 - Write osCommerce New products Header codes and compare original codes


Now the $info_box_contents array contains the value of New Products Header (i.e. New products For Month). We have enough information to display the New products 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 New Products 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/corner_right_left.gif image.

osCommerce New Products Header

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

$info_box_contents = array();
$info_box_contents[] = array('text' => sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')));

//codes display the New Products 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/corner_right_left.gif') . "</td>" . "\n";
echo "</tr>" . "\n";
echo "</table>" . "\n";

// The following line is not required since we write our own codes to display the New Products
//new contentBoxHeading($info_box_contents);

Upload the new_products.php to overwrite the old file.

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

How original osCommerce Codes Works

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

$info_box_contents = array();
$info_box_contents[] = array('text' => sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')));

new contentBoxHeading($info_box_contents);

Obviously, the third code is used to display the osCommerce New Products header.

new contentBoxHeading($info_box_contents);

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

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

class contentBoxHeading extends tableBox {
function contentBoxHeading($contents) {
$this->table_width = '100%';
$this->table_cellpadding = '0';

$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'height="14" class="infoBoxHeading"',
'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif')),
array('params' => 'height="14" class="infoBoxHeading" width="100%"',
'text' => $contents[0]['text']),
array('params' => 'height="14" class="infoBoxHeading"',
'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

$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 contentBoxHeading 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 contentBoxHeading class.

$this->table_width = '100%';
$this->table_cellpadding = '0';

This two lines of codes simply mean:

- Use $this to point to the table_width variable in the object and assign value of '100%' to it.

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

Let's take Hardware Parent Categories as an example. 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] => height="14" class="infoBoxHeading" width="100%"
[text] => New Products For October
)

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

)

)

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

Take Hardware Parent Categories as an example. If you follow the codes of the tableBox class one by one. The content of the table ($tableBox_string) 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 height="14" class="infoBoxHeading" width="100%">New Products For October</td>
<td height="14" class="infoBoxHeading"><img src="images/infobox/corner_right_left.gif" border="0" alt="" width="11" height="14"></td>
</tr>
</table>

Conclusion:

  1. We like to use our own osCommerce codes. This is very simple and easy to understand by others. I always use simple codes whenever possible despite this is easy to be stolen or modified by others.
  2. We also only use sprintf(TABLE_HEADING_NEW_PRODUCTS, strftime('%B')); to get the osCommerce New product Heading. There is no need to use a 2-dimensional array to store a single value.

This is the end of the osCommerce file structure of New Products Header.