Home | Store | osCommerce Tutorials

osCommerce New Products Module - New Products Display (3)

Part 3 - Write our own code of osCommerce New Products Display in Homepage


In previous osCommerce tutorial, we already get all required data and saved in the $info_box_contents array. In fact we have enough information to show the New products Display. Like previous tutorials, this is a good idea to try to write the codes on our own to get the same result.

Look again at the default osCommerce New products Display area. There is a Bottom Table (1 row x 1 column) containing the Inner Table (3 rows x 3 columns). Actually the new products are contains in the Inner Table.

osCommerce file structure and New Products web layout

Since the new products are contained in the Inner Table (3 rows x 3 columns), we will ignore the Bottom Table in order to simplify the codes.

We wrote similar codes many times in previous tutorials, therefore this task seems not too difficult for us. It simply write the codes for the table and using values of the $info_box_contents array. The codes are shown in below in blue color.

if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
$new_products_query = tep_db_query("select p.products_id, p.products_image,
p.products_tax_class_id, pd.products_name, if(s.status, s.specials_new_products_price,
p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s
on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd
where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" .
(int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
} else {

// Codes here will be executed
//when browsing osCommerce Parent Categories (e.g. Hardware, Softwares and DVD Movies)

}

echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"4\"
class=\"infoBoxContents\">" . "\n";
echo "<tr>" . "\n";

$row = 0;
$col = 0;
$info_box_contents = array();
while ($new_products = tep_db_fetch_array($new_products_query)) {

$info_box_contents[$row][$col] = array(

'align' => 'center',

'params' => 'class="smallText" width="33%" valign="top"',

'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' .
$new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES .
$new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO,
'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' .
$currencies->display_price($new_products['products_price'],
tep_get_tax_rate($new_products['products_tax_class_id'])));

 

echo "<td align=" . $info_box_contents[$row][$col]["align"] . " " .
$info_box_contents[$row][$col]["params"] . ">" .
$info_box_contents[$row][$col]["text"] . "</td>" . "\n";

 

$col ++;
if ($col > 2) {
$col = 0;
$row ++;
}
}

 

echo "</tr>" . "\n";
echo "</table>" . "\n";

// The following line is not required since we write our own codes to show the new products
//new contentBox($info_box_contents);

You should be able to follow if you read all our tutorials before. Please note again that the $info_box_contents is a 3-dimensional array so it requires three indexes to point to elements in the array.

Upload the file to overwrite the old file.

The output should look like:

osCommerce New Products Module

Oh... All new products display in a single row.

Not bad! At least we display all new products on the osCommerce homepage successfully.

Now we need to think how to display the new products in 3 columns same as the osCommerce shop. This technique is not new to use, the Categories display also use the same idea.

The technique is simple. When the $col is equal to zero, we start a new row. Here's the final codes:

if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
$new_products_query = tep_db_query("select p.products_id, p.products_image,
p.products_tax_class_id, pd.products_name, if(s.status, s.specials_new_products_price,
p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s
on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd
where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" .
(int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
} else {

// Codes here will be executed
//when browsing osCommerce Parent Categories (e.g. Hardware, Softwares and DVD Movies)

}

echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"4\"
class=\"infoBoxContents\">" . "\n";
echo "<tr>" . "\n";

$row = 0;
$col = 0;
$info_box_contents = array();
while ($new_products = tep_db_fetch_array($new_products_query)) {

$info_box_contents[$row][$col] = array(

'align' => 'center',

'params' => 'class="smallText" width="33%" valign="top"',

'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' .
$new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES .
$new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO,
'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' .
$currencies->display_price($new_products['products_price'],
tep_get_tax_rate($new_products['products_tax_class_id'])));

 

if ($col == 0) {
echo "</tr>" . "\n";
echo "<tr>" . "\n";
}

echo "<td align=" . $info_box_contents[$row][$col]["align"] . " " .
$info_box_contents[$row][$col]["params"] . ">" .
$info_box_contents[$row][$col]["text"] . "</td>" . "\n";

 

$col ++;
if ($col > 2) {
$col = 0;
$row ++;
}
}

 

echo "</tr>" . "\n";
echo "</table>" . "\n";

// The following line is not required since we write our own codes to show the new products
//new contentBox($info_box_contents);

Upload the file to overwrite the old file.

The output should look like:

osCommerce New Products Module

Yes, it looks almost the same as the default osCommerce shop.

PHP example filenew_products_example-1.php

As we mention before that we only write the codes for the Inner Table in order to simplify the codes at the beginning. If you need the new products display exactly same as the default osCommerce shop, you can add the codes for the Bottom Table as shown below:

if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
$new_products_query = tep_db_query("select p.products_id, p.products_image,
p.products_tax_class_id, pd.products_name, if(s.status, s.specials_new_products_price,
p.products_price) as products_price from " . TABLE_PRODUCTS . " p left join " . TABLE_SPECIALS . " s
on p.products_id = s.products_id, " . TABLE_PRODUCTS_DESCRIPTION . " pd
where p.products_status = '1' and p.products_id = pd.products_id and pd.language_id = '" .
(int)$languages_id . "' order by p.products_date_added desc limit " . MAX_DISPLAY_NEW_PRODUCTS);
} else {

// Codes here will be executed
//when browsing osCommerce Parent Categories (e.g. Hardware, Softwares and DVD Movies)

}

// Bottom Table
echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"1\" class=\"infoBox\">" . "\n";

echo "<tr><td>" . "\n";

// Inner Table
echo "<table border=\"0\" width=\"100%\" cellspacing=\"0\" cellpadding=\"4\"

class=\"infoBoxContents\">" . "\n";
echo "<tr>" . "\n";

$row = 0;
$col = 0;
$info_box_contents = array();
while ($new_products = tep_db_fetch_array($new_products_query)) {

$info_box_contents[$row][$col] = array(

'align' => 'center',

'params' => 'class="smallText" width="33%" valign="top"',

'text' => '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' .
$new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES .
$new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH,
SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO,
'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' .
$currencies->display_price($new_products['products_price'],
tep_get_tax_rate($new_products['products_tax_class_id'])));

 

if ($col == 0) {
echo "</tr>" . "\n";
echo "<tr>" . "\n";
}

echo "<td align=" . $info_box_contents[$row][$col]["align"] . " " .
$info_box_contents[$row][$col]["params"] . ">" .
$info_box_contents[$row][$col]["text"] . "</td>" . "\n";

 

$col ++;
if ($col > 2) {
$col = 0;
$row ++;
}
}

 

// Inner table closing tags
echo "</tr>" . "\n";

echo "</table>" . "\n";

// Bottom Table closing tags
echo "</td></tr>" . "\n";

echo "</table>" . "\n";

// The following line is not required since we write our own codes to show the new products
//new contentBox($info_box_contents);

The output of New Products should look exactly the same as default osCommerce shop.

osCommerce New Products Module

PHP example filenew_products_example-2.php

Now we can write the codes on our own to show the new products display section. It's time to see how the codes of original osCommerce shop works.

How original osCommerce Codes Works

The original osCommerce codes do not print out the data immediately after getting all the data in the $info_box_contents 3-dimensional array. The following code is used instead.

new contentBox($info_box_contents);

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

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

class contentBox extends tableBox {
function contentBox($contents) {
$info_box_contents = array();
$info_box_contents[] = array('text' => $this->contentBoxContents($contents));
$this->table_cellpadding = '1';
$this->table_parameters = 'class="infoBox"';
$this->tableBox($info_box_contents, true);
}

function contentBoxContents($contents) {
$this->table_cellpadding = '4';
$this->table_parameters = 'class="infoBoxContents"';
return $this->tableBox($contents);
}
}

Note:

PHP classes with similar variables and functions can be extended to another existing class by using the keyword 'extends'. In other words, the contentBox 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 contentBox class.

$info_box_contents = array();
$info_box_contents[] = array('text' => $this->contentBoxContents($contents));

This two lines of codes simply mean:

- Create a new array of $info_box_contents variable.

- Assign value to $info_box_contents array. Remember that the value was sent into this function when being called (new contentBox($info_box_contents);)

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

The codes are quite complicated. In short, the values were sent to the tableBox and print out the new products data.

The following picture shows the parameters of the New products table:

osCommerce New Products

Conclusion:

  1. The original osCommerce codes of this part are quite complicated. It should not be easy to be followed and undestood. The data is moving around from array to array.
  2. We like to use our own osCommerce codes on this part. This is very simple and easy to understand by others. We always use simple codes whenever possible despite this is easy to be stolen and modified by others.

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