Main Menu
| Home |
| Blog |
| News Feeds |
| FAQs |
Sponsored Links
| osCommerce - Basic Customization |
|
|
|
|
This is the first in what I plan to be an ongoing series of articles concerning osCommerce and its architecture. We will start out with some basics and eventually get into some more complex issues as the series progresses. To get the most value out of these articles, its going to help a great deal if you have at least a basic understanding of HTML, PHP, and Cascade Style Sheets (CSS). When you look at osCommerce as a whole, it can be rather daunting. The system is extremely robust, but with that comes some complexity. However with many things large and complex if you begin by breaking them into little bits, trying not to chew too much at one time, it all becomes a lot easier to digest. The great majority of osCommerce installations start with the basic default package. Whether you uploaded it yourself and followed the included installation routine or it came from your web hosting though Fantastico or some other means, you start out looking at a 'default' osCommerce installation. At that point right out of the box you have a working shopping cart. Now its time to start putting your customizations to your new shopping cart, to start making it your own. In order to perform those customizations you need to start gaining an understanding of how things are put together, so lets start there. If you were to examine the code within the pages that make up the system, you would find that every visual page contains several common parts. Speaking specifically about the visual parts, there are four external files with are 'included' into each visual page, these are header.php , column_left.php, column_right.php, and footer.php. In each visual page within osCommerce there is one master table that holds everything which in a nutshell looks like this image:  The file names themselves are fairly self documenting. The header.php contains the main logo or graphic that appears on the top of each page. The column_left.php and column_right.php each contain the various utility boxes such as shopping cart, reviews, best sellers, new products, etc. And the footer.php contains the copyright notice. Finally the center of the table, the 'body content' is defined within the individual page. Now there is a little more to it because each of these files can in turn also include other files to help define them, though essentially if you want to change the appearance of an area of the your cart the corresponding file which defines that area of the page is where you will begin to work. Remember because all four of these files are included in each page of the cart, when you make a change to any one of them, you change the appearance of every page in your cart. So lets wrap this up with a practical example. One of the first things anyone wants to do with a default installation of osCommerce is change the banner at the top of the page. Now we know that because the banner appears at the top of the page we want to take a look at header.php. As with all four of these files we will find header.php in the includes folder. Opening up the file we find the following code at around line 57:
The part of this we want to pay particular attention to is:
tep_image is an osCommerce function which renders an HTML image tag. The function takes two parameters, the image file name and the image 'alt' text. The 'DIR_WS_IMAGES' is a defined constant which refers to the images folder. So translating that the first parameter in this case is actually images/oscommerce.gif . The second parameter, the 'alt' is 'osCommerce', this is the text that will show up in the balloon when a user holds their mouse cursor over the image. Lets assume that you have a logo image for your store which is named mystore.gif. Swapping out the logo images is a fairly simple process. First you would upload mystore.gif to the images folder. Secondly you would edit the code by changing oscommerce.gif to mystore.gif. And finally change 'osCommerce' to your store name or something else appropriate. Save and upload the file and you are done. A couple of notes to keep in mind: The dimensions of oscommerce.gif 204 pixels wide by 50 pixels tall. If the dimensions of your logo differ it will effect the appearance. Sometimes it won't matter other times it will and you might have to experiment. In the future we will talk about changing the entire header.php file for a different look. The most common mistake anyone makes are misplaced or missing apostrophes ( ' ). If you are getting errors that's always the first thing to check for. And the most important thing, before making a change to any file in the system ALWAYS make a back up of the file first, so that you always have something to fall back on if things go very wrong. Happy Coding! |
| Next > |
|---|