osCommerce Home | osCommerce eBook Store | osCommerce Tutorials

osCommerce 2.3.3 Home Page - A quick overview file structure in more details

The homepage (index.php) is a good starting point to study the file structure of osCommerce store. Open catalog/index.php with a text editor and you will see a lot of codes written in PHP. At first glance, the codes of osCommerce homepage seems long and complicated which will scare many beginners. However if you break them down into small parts, you will be amazing to see how simple the codes are.

Okay! Let's study the PHP codes of osCommerce homepage from the first line to the last line. Like other projects, this is better to break them down into small parts and study.

Part A: Starting the Process with application_top.php

Many people may expect to find the <html> code at the beginning of the file. However the first line of code (line 13) that appear in index.php is:

require('includes/application_top.php');

The PHP require statement is used to insert useful codes written in other files, in the flow of execution. This can make the main file clean, shorter and easy to maintain.
In other words, the includes/application_top.php file will insert here before the execution of other codes below.

If you goes on studying the codes below this line, you will find many variables, strange functions and strange names, for example:

$category_depth,
$cPath,
tep_db_query,
DIR_WS_LANGUAGES,
$language,
FILENAME_DEFAULT,
DIR_WS_INCLUDES,
etc.....

Therefore this is clear that the above variables, strange functions and strange names should come from the application_top.php file.

We just need to get some basic idea of the application_top.php file at this moment. We will discuss it in more details in other tutorials.

Part B: $category_depth Variable

The next block of PHP codes (line 15 - 32) immediate below the application_top.php determine what the contents of the Main Content (Body text) will be displayed. This is control by the $category_depth variable.

// the following cPath references come from application_top.php
$category_depth = 'top';

if (isset($cPath) && tep_not_null($cPath)) {
$categories_products_query = tep_db_query("select count(*) as total from " .
TABLE_PRODUCTS_TO_CATEGORIES . " where categories_id = '" . (int)$current_category_id . "'");
$cateqories_products = tep_db_fetch_array($categories_products_query);

if ($cateqories_products['total'] > 0) {
$category_depth = 'products'; // display products
} else {
$category_parent_query = tep_db_query("select count(*) as total from " .
TABLE_CATEGORIES . " where parent_id = '" . (int)$current_category_id . "'");
$category_parent = tep_db_fetch_array($category_parent_query);

if ($category_parent['total'] > 0) {
$category_depth = 'nested'; // navigate through the categories
} else {
$category_depth = 'products'; // category has no products, but display the 'no products' msg
}
}
}

As you can see, the value of $category_depth passing down to the main program below may be top, nested or products:

$category_depth = 'top'
$category_depth = 'nested'
$category_depth = 'products'

We will discuss later in more details in other tutoriasl how the the value of $category_depth control the contents of the Main Content (Body text) that will be displayed.

Part C: Select Language File

The next line of PHP codes (line 33) follow is:

require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_DEFAULT);

This line of code simply determine to get which language file to browse the osCommerce website. The language is selected by the visitor.

Up to this line of PHP code, most of the ingredients (variable, functions, etc.) that required to build the visual elements of osCommerce store are loaded and ready for use. From the next line of PHP codes, it will start building the HTML contents of osCommerce website.

Part D: Start Building Visual Contents of osCommerce Store - Header

The next line of PHP code (line 35) that follow is:

require(DIR_WS_INCLUDES . 'template_top.php');

Some codes that wrote directly on osCommerce homepage of previous version have been moved to template_top.php. This makes the codes of homepage a bit clean, shoter and much easier to read.

This line of code will start assemble the HTML <head> section as well as the <body> open tag, i.e.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>........................</title>
<link rel="stylesheet" ............. />
<script type="text/javascript" ............ />
...........................................
...........................................
</head>
<body>

It also assembles the Header section of osCommerce store.

oscommerce header

It also place the Div container of the Main Content or Body Content.

oscommerce header

Part E: Building the osCommerce Main Contents

The huge block of codes that follow (line 37- 272) are occupying 90% of the homepage file.

if ($category_depth == 'nested') {
$category_query = tep_db_query("select cd.categories_name,.....................
..................................................
..................................................
} elseif ($category_depth == 'products' || ............. ) {
// create column list
$define_list = array('PRODUCT_LIST_MODEL' => PRODUCT_LIST_MODEL,..............
..................................................
..................................................
} else { // default page

?>

<h1><?php echo HEADING_TITLE; ?></h1>

.........................................
.........................................
}

This block of codes are used to build the osCommerce Main Contents, as shown in the diagram below.

oscommerce header

As you can easily see that the osCommerce Body text Contents will be displayed according to the value of $category_depth. Don't worry the codes are not difficult to understand if you break them down and study. In brief:

If $category_depth = 'top', the Homepage will be displayed.
If $category_depth = 'nested', the Categories will be displayed.
$category_depth = 'products', the Product page will be displayed.

We will discuss later in more details in other tutorials how the the value of $category_depth control the contents of the Main Content (Body text) that will be displayed.

Part F: Building the osCommerce Left Column, Right Column and Footer Section

The single line of code that follow (line 274) is:

require(DIR_WS_INCLUDES . 'template_bottom.php');

The template_bottom.php file assemble the lower part of osCommerce store - the Left Column, Right Column and also Footer Section..

oscommerce header

The HTML contents also close here.

</body>
</html>

Up to this line of PHP code, all the visual elements of osCommerce store that display on the screen are finished.

Part G: Closing the Process with application_bottom.php

This is the last line of PHP code (line 275) of osCommerce homepage.

require(DIR_WS_INCLUDES . 'application_bottom.php');

The application_top.php file at the first line of code is used to starting the process. And the application_bottom.php file is used to closing the process. It will closes the session and optimizing osCommerce with GZIP compression.

osCommerce Store Homepage File Structure Summary

The following diagram is a summary of what we have learned about the file structure of osCommerce homepage.

oscommerce header

The osCommerce v2.3.3 file structure of homepage seems a bit better than previous version. The web layout is mainly controlled by the template_top.php file and template_bottom.php file.