Home | Store | osCommerce Tutorials

osCommerce Navigate Through Categories - Categories Content Code Study

Part 4 - Display osCommerce Categories in columns


In previous osCommerce File Structure tutorials, we already display the Categories in a single column. In this osCommerce tutorial, we will try to display the Categories in two or three column.

Let's review the last codes that used to display the Categories in a single column:

<?php

require('includes/application_top.php');

// The values of this two variables should come from application_top.php
$current_category_id = 1; // Hardware
$languages_id = 1; // English Language

$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.categories_image, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$current_category_id . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by sort_order, cd.categories_name");

// Use below
//$categories = tep_db_fetch_array($categories_query);

// get the data
echo "<table border=1 cellpadding=8>";
echo "<tr><td>Categories</td></tr>";

while ( $categories = tep_db_fetch_array($categories_query) ) {
echo "<tr><td>" . tep_image(DIR_WS_IMAGES . $categories['categories_image'],
$categories['categories_name']) . "<br />" . $categories["categories_name"] . "</td></tr>";
}

echo "</table>";

?>

The above codes will display the Categories in a single column as below:

oscommerce navigate through categories

To arrange the Categories in two or three column simply involves simple mathematics. The basic concept is that you ned to test if the displaying Categories is the last item of the row or not. There are many methods to do that.

Firstly let learn something new here:

osCommerce tep_db_num_rows() function

This will count the number of rows or records in the output query.

For example:

tep_db_num_rows($categories_query) will return 8 since there are eight records in the output query.

PHP is_int() function

PHP built-in is_int() function will find whether the variable is integer or not. It will return TRUE if the variable is integer, otherwise return FALSE.

Therefore:

is_int(1) will return TRUE

is_int(1.5) will return FALSE

Now, we have enough knowledge to go on.

Example 2-7

Let's try to arrange the osCommerce Categories in two columns.

<?php

require('includes/application_top.php');

// The values of this two variables should come from application_top.php
$current_category_id = 1; // Hardware
$languages_id = 1; // English Language

$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.categories_image, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$current_category_id . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by sort_order, cd.categories_name");

// Use below
//$categories = tep_db_fetch_array($categories_query);

// get the data
echo "<table border=1 cellpadding=8>";
echo "<tr>";

// We ned to know the total number of records of the output query
$number_of_categories = tep_db_num_rows($categories_query);

// We need a checking indicator
$rows = 0;

while ( $categories = tep_db_fetch_array($categories_query) ) {
// increase the indicator by one for each loop so that we can check the Categories position
$rows++;

echo "<td>" . tep_image(DIR_WS_IMAGES . $categories['categories_image'],
$categories['categories_name']) . "<br />" . $categories["categories_name"] . "</td>";

// Check current displaying Categories:
// if last item of the row or not
// the value of $rows of last item of each row is 2, 4, 6, 8, etc....
// therefore if $rows/2 is integer -> last item of each row
// Of course we also need to check if this is the last records

if ( (is_int($rows/2)) && ($rows != $number_of_categories) ) {
echo "</tr>";
echo "<tr>";
}
}

echo "</tr>";
echo "</table>";

?>

osCommerce file structure example codesosc-navigate-through-categories-code-study-example-2-7.zip

Save the file as osc-navigate-through-categories-code-study-example-2-7.php.

Upload the file to the osCommerce homepage.

Access the file with browser.

The output of the file should look like:

oscommerce navigate through categories

Need more explanation how the codes work? Please see the following diagram and everything should be clear:

osCommerce Categories display in 2 column

How about display the osCommerce Categories in 3 columns. Let's do one more example.

Example 2-8

The concept is exactly the same. This time we need to check the 3rd item of each row. In other words, change $rows/2 to $rows/3. Please see the codes below:

<?php

require('includes/application_top.php');

// The values of this two variables should come from application_top.php
$current_category_id = 1; // Hardware
$languages_id = 1; // English Language

$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.categories_image, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$current_category_id . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by sort_order, cd.categories_name");

// Use below
//$categories = tep_db_fetch_array($categories_query);

// get the data
echo "<table border=1 cellpadding=8>";
echo "<tr>";

// We ned to know the total number of records of the output query
$number_of_categories = tep_db_num_rows($categories_query);

// We need a checking indicator
$rows = 0;

while ( $categories = tep_db_fetch_array($categories_query) ) {
// increase the indicator by one for each loop so that we can check the Categories position
$rows++;

echo "<td>" . tep_image(DIR_WS_IMAGES . $categories['categories_image'],
$categories['categories_name']) . "<br />" . $categories["categories_name"] . "</td>";

// Check current displaying Categories:
// if last item of the row or not
// the value of $rows of last item of each row is 3, 6, 9, 12, etc....
// therefore if $rows/3 is integer -> last item of each row
// Of course we also need to check if this is the last records

if ( (is_int($rows/3)) && ($rows != $number_of_categories) ) {
echo "</tr>";
echo "<tr>";
}
}

echo "</tr>";
echo "</table>";

?>

osCommerce file structure example codesosc-navigate-through-categories-code-study-example-2-8.zip

Save the file as osc-navigate-through-categories-code-study-example-2-8.php.

Upload the file to the osCommerce homepage.

Access the file with browser.

The output of the file should look like:

oscommerce navigate through categories

Final osCommerce Codes:

Actually the $rows/2 and $rows/3 can be replaced with $rows / MAX_DISPLAY_CATEGORIES_PER_ROW. The value of MAX_DISPLAY_CATEGORIES_PER_ROW is stored in osCommerce MySQL database. In addition, this value can be modified in osCommerce admin panel. as shown in picture below:

osCommerce Categories list per row

Therefore the above codes can be worked with any number of columns. Then the codes will becomes:

<?php

require('includes/application_top.php');

// The values of this two variables should come from application_top.php
$current_category_id = 1; // Hardware
$languages_id = 1; // English Language

$categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.categories_image, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$current_category_id . "' and c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id . "' order by sort_order, cd.categories_name");

// Use below
//$categories = tep_db_fetch_array($categories_query);

// get the data
echo "<table border=1 cellpadding=8>";
echo "<tr>";

// We ned to know the total number of records of the output query
$number_of_categories = tep_db_num_rows($categories_query);

// We need a checking indicator
$rows = 0;

while ( $categories = tep_db_fetch_array($categories_query) ) {
// increase the indicator by one for each loop so that we can check the Categories position
$rows++;

echo "<td>" . tep_image(DIR_WS_IMAGES . $categories['categories_image'],
$categories['categories_name']) . "<br />" . $categories["categories_name"] . "</td>";

// Check current displaying Categories:
// if last item of the row or not
// Of course we also need to check if this is the last records

if ( (is_int($rows/MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != $number_of_categories) ) {
echo "</tr>";
echo "<tr>";
}
}

echo "</tr>";
echo "</table>";

?>

This method is easier for osCommerce shop owner, including me, without much knowledge of PHP. In next tutorial, we will add the URL link to the categories images and categories name.