osCommerce Tutorial - File Structure

The following osCommerce tutorials series starts from the very beginning, try to understand the file structure of osc shop. As we all know that this is necessary to have some basic knowledge of the file structure of osCommerce shop in order to customize the default template with ease.

The following tutorials are based on osCommerce version 2.2 RC 2a.

• Study osCommerce website and navigate folders and files
  After browsing osCommerce website, folders and files, we learned that the visual pages of osCommerce website is divided into 5 sections - Header, Left Column, Main Content, Right Column and Footer. And the visual pages are assembled by calling the files in the includes folder, for example, the header.php, column_left.php.....

• Introduction to web layout and styling of osCommerce with Dreamweaver
  This tutorial shows how to set up Dreamweaver with osCommerce shop. It also provide an introduction to styling osC shop with Dreamweaver.
• Study osCommerce Header web layout with Dreamweaver
  Once Dreamweaver has been set up, we can start studying the web layout of osCommerce site easily. This tutorial shows how to study the Header web layout of osC shop with dreamweaver.
• Use new osCommerce Logo with different size
  All osCommerce shop owners will use their own logo. This tutorial shows how to use a new logo with different size. Do the source file need to edit if use logo with different size?
• Study osCommerce Footer web layout with Dreamweaver
  This tutorial shows how to use Dreamweaver to study the web layout of Footer section of osC shop.
• Study osCommerce Body section web layout with Dreamweaver
  The Body section of osCommerce shop contains the Left Column, Main Content in the middle and the Right Column. This tutorial skim over the web layout structure of the Body section.
• Study osCommerce Left Column web layout with Dreamweaver
  The Left Column includes the Categories, Manufacturers, What's new?, Quick Find and Information. This tutorial studys the web structure and html codes of osCommerce Left Column.
• Study osCommerce Right Column web layout with Dreamweaver
  Actually the web layout and structurs of osCommerce Right Column is same as the Left Column.
• Study osCommerce Main Content web layout with Dreamweaver
  The Main Content is the middle section of osCommerce shop. The programmer called this section Body Text. The Main Content should be the heavily customized section. Therefore it worths to pay more time to study the web layout of the osCommerce Main Content (Body text).
• osCommerce Parent Categories Main Content section web layout
  When visitors browsing the osCommerce Parent Categories, i.e. Hardware, Software andVD Movies, the categories contents will be displayed. This is also called "navigate through categories". This osCommerce tutorial discuss the web layout of the categories contents.
• Edit osCommerce stylesheet with Dreamweaver
  Many osCommerce shop owners get used to use webpage editors to edit the stylesheet. This tutorial shows how to styling osCommerce shop with Dreamweaver. Actually this is same for other webpage editors.
• osCommerce web layout summary
  We learned the web design layout of osCommerce in previous tutorials. This tutorial provide an overall and summary of the web structure of osCommerce shop.

• What is PHP
• PHP echo command
• PHP variables
• PHP Concatenation operator
• PHP define() function
• PHP require() function
• PHP array
• PHP strftime() function
• PHP sprintf() function
• PHP isset() function
• PHP custom functions

• osCommerce custom function introduction
• osCommerce tep_image() function
• osCommerce tep_get_path() function
• osCommerce tep_href_link() function

• What is MySQL
• PHP Interact with MySQL database basic procedures
• Use PHP to connect to osCommerce MySQL server
• Use PHP to select osCommerce MySQL database
• Use PHP to perform query on MySQL database table
• Use PHP to get data from different osCommerce MySQL tables

• Overview file structure of osCommerce homepage
• Study codes of Main Content (Body text) of osCommerce homepage
• How Main Content display on osCommerce homepage summary
• How HEADING_TITLE display on Main Content of osCommerce homepage
• A quick look at the osCommerce application_top.php file
• osCommerce homepage file structure summary

• Categories display system overview
• Main Content display Vs $category_depth and $cPath (1)
• Main Content display Vs $category_depth and $cPath (2)
• osCommerce categories display system summary

• Navigate through categories code study introduction
• Navigate through categories web layout code study
• Navigate through categories - categories header code study
• Navigate through categories - categories content code study

Part 1.0 - Simplification by removing all un-used osCommerce codes

Part 2.0 - Review osCommerce code structure

Part 3.1 - Get first record of osCommerce Categories data

Part 3.2 - Get all records of osCommerce Categories data with while loop

Part 4.0 - Display osCommerce Categories in columns

Part 5.0 - Add URL link to Categories Images and Categories Name

Part 6.0 - Study original codes of osCommerce Categories

• New Products Display module introduction
• New Products Display web layout
• New Products Display Header

Study code structure of osCommerce New products Header

Write our own codes for the osCommerce New products Header and compare original codes

• New Products Display Content

Study code structure of osCommerce New Products Display

Code structure of osCommerce New Products Display in Homepage

Write our own code of osCommerce New Products Display in Homepage

• osCommerce New Products Display customization tips 1
• osCommerce New Products Display customization tips 2
• osCommerce New Products Display customization tips 3

• Main Categories Introduction
• Main Categories Overview
• Main Categories File Path
• Main Categories Web Layout
• Main Categories File Structure

osCommerce Main Categories Header

Study code structure of osCommerce Main Categories Header

Write our own code of osCommerce Main Categories Header

osCommerce Main Categories Content

Part 1 - First glance at osCopmmerce Main Categories Content code structure

Part 2 - Study the value of $tree array

Part 3 - Study the value of $categories_string return from tep_show_category

Part 4 - How the string of $categories_string is formed

Part 5 - How tep_show_category() function list out all items of Main Categories in order

Part 6 - How the codes of tep_show_category() function works

• osCommerce Main Categories Customization Examples

osCommerce Main Categories Header Customization

Example 1: osCommerce Main Categories Header general customization

osCommerce Main Categories Content Customization

General Customization Series

Example 1: Remove arrow mark and products count

Example 2: Add image pointer bullets to sub-categories

Example 3: Add horizontal line under Parent Categories

Table Customization Series

Example 4-1: Use an Inner table contain the osC Main Categories Content

Example 4-2: Add background color to Parent Categories of Main Categories Content

Example 4-3: Set the border of Inner Table to zero

Example 4-4: Add a Outer Table

Example 4-5: Add pointer image bullet to osCommerce Sub-categories

• Quick Find File Path
• Quick Find Box HTML Web Layout
• Search Result Content HTML Web Layout
• Quick Find Box Header
• Quick Find Box Content and Search Result
• Quick Find Box Customization Example (Part 1)
  This osCommerce tutorial shows how to re-arrange the layout of search field and search button.
• Quick Find Box Customization Example (Part 2)
  This osCommerce tutorial shows how to move the search field and search button to Header section.