osCommerce Home | osCommerce eBook Store | osCommerce Tutorials

osCommerce 2.3.3 Home Page - Further PHP codes study

We already skimmed over the PHP codes of the osCommerce homepage (index.php) in previous tutorials. Let's play around with the codes of homepage.

In order to study the codes of osCommerce homepage easily, this is better to remove all unnecessary codes. Here's the minimum codes that requires to run the osCommerce store - only 6 lines of codes!

file structure of osCommerce home page

Open the web browser. Here's what the osCommerce store look like:

file structure of osCommerce home page

As you can see the osCommerce store looks almost the same despite most the codes were removed. It still has the header, Left Column, Main Contents Section, Right Column and the Footer section. This is very clear that most of the codes in the homepage (index.php) are used to generate the contents of Main Contents in the middle.

This is very clear that the header, Left Column, Main Contents Section, Right Column and the Footer section are generated with this 6 lines of codes.

This is also very clear that the application_top.php file loads up all necessary variables and functions before start assembling the visual contents of osCommerce store.

Everything becomes easy now if we can only focus on this few lines of codes. Let's play around with the codes further.

In order to study the codes easily, let's set the styles of the Div layer of the Main Contents.

Open template_top.php file with a text editor and navigate to line 62. The codes are:

<div id="bodyContent" class="grid_<?php echo $oscTemplate->getGridContentWidth(); ?> <?php echo ($oscTemplate->hasBlocks('boxes_column_left') ? 'push_' . $oscTemplate->getGridColumnWidth() : ''); ?>">

Set this Div layer to static CSS styles. For demonstration, a background color is also set to this Div layer.

<div id="bodyContent" class="grid_16 push_4" style="background-color:#BEF781; height:350px;">

The osCommerce store is basically looks the same as before:

file structure of osCommerce home page

Remove the Bottom Template

As we learned in previous tutorial that the template_bottom.php file assemble the Left Column, Right Column and Footer Section. Let's do it by commenting the codes:

//require(DIR_WS_INCLUDES . 'template_bottom.php');

Look! The Left Column, Right Column and Footer Section were removed. This demonstrate that the template_bottom.php file is used to assemble the lower part of osCommerce store.

file structure of osCommerce home page

Therefore you can study the file structure of osCommerce store much easier by breaking down the codes into several small parts.

Summary of How PHP Codes Assemble osCommerce Store

The building up of osCommerce store can be broken down into 4 steps.

Step1: Prepare All Necessary Ingredients

The application_top.php file prepares and loads up all necessary ingredients (variables, functions, etc...) to build the visual web contents of osCommerce store.

file structure of osCommerce home page

Step 2: Start Assembling the Header Section

The template_top.php starts assemble the HTML web contents

file structure of osCommerce home page

Here's part of the codes of template_top.php:

<html xmlns="http://www.w3.org/1999/xhtml" <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>" />
<title><?php echo tep_output_string_protected($oscTemplate->getTitle()); ?></title>
...............................................
...............................................
...............................................
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<?php echo $oscTemplate->getBlocks('header_tags'); ?>
</head>
<body>

<div id="bodyWrapper" class=".........">

<?php require(DIR_WS_INCLUDES . 'header.php'); ?>

<div id="bodyContent" class=".........">

As you can see, the HTML <head></head> section starts to assemble here.

The HTML <body> tag also assemble here.

The <div id="bodyWrapper" class="........."> is the outer wrapper Div Layer of osCommerce store.

The <?php require(DIR_WS_INCLUDES . 'header.php'); ?> assemble the web contents of the Header section.

The <div id="bodyContent" class="........."> is the container Div Layer of the Main Contents in the middle.

Step 3: Building the Main Contents

It starts building up the Main Contents inside the <div id="bodyContent" class="........."> Div Layer.

file structure of osCommerce home page

Step 4: Building the Left Column, Right Column and Footer Section

This task is accomplished by the template_bottom.php file.

file structure of osCommerce home page

The template_bottom.php file will firstly close the Main Contents <div id="bodyContent" class="........."> Div Layer.

</div> <!-- bodyContent //-->

Then it begins building up the Left Column (If it has).

<?php echo $oscTemplate->getBlocks('boxes_column_left'); ?>

And the Right Column (If it has):

<?php echo $oscTemplate->getBlocks('boxes_column_right'); ?>

And finally build up the Footer Section with the footer.php file:

<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>

This is the end of futher studying the file structure of osCommerce store homepage.