This is a short tutorial is specifically about the OSC contribution STS v4.5.8 (although I will interchangeably refer to it here as STS 4 or just STS). Most of this information is gleaned from the documentation done by Bill Kellum (comes with the download). I have put this into a more graphical form and am only covering the very basics. I have had an earlier but similar version of the STS module for quite a while and only used it in "best hope" kind of state - hoping without really knowing that what I did was right. It looked right (i.e. did not break my site), and it worked. But I had no clear idea what I actually did to make it work and was hoping I would never have to revisit and re-tweak or redo any work on it.
However recently I had to upgrade my version of OSC and with it, it needed the latest version of this module. So I thought I best get my mind around this great module and actually have a clearer idea of what to do, what it does, and how to change things.
This module does a whole lot of things and for the deeply technical kind of people, I refer you to Bill Kellum's documentation and to the forum support thread found at STS 4.5.8 OSC Forum. For those of you wanting to get a clearer basic grasp on how to work this, then this should be perfect for you!
I am not covering the installation steps either as they are all included in the module's download.
Even though you can go into the possibilities of STS much deeper than what I will explain here, this tutorial will give you a clear basic starting understanding of which files you will most use,what they do, and where they are. All the files we are talking about are in 2 main folders. The:
(catalog)/includes/modules/ folder and the
(catalog)/includes/sts_templates/ folder.
Where (catalog) is the folder where you have installed your oscommerce.
For simplicity, I will refer to these directory paths as
/includes/modules/ and
/includes/sts_templates/
And within each of these folders, there are sub-folders of interest which I will now explain briefly.
Within the /includes/modules/ folder, there are 2 sub-folders of interest: /sts/ and /sts_inc/ folder.
All you have to know right now is that:
$productdesc is a placeholder.$productdesc in one of the STS template files, on viewing the relevant (product) page, you will see the description-text that you have for that particular product-item.
Within the /includes/sts_templates/ folder, there are 2 sub-folders of interest: /full/ and /test/ folder.
I will refer to these folders as your choice of "Template Folders" - which is also what they are called in the STS module as you will see in the osc Admin > Modules section.
Each of these Template Folders contain files that are in HTML format and are your design-layout files to create the look and feel you want. These files are your template files.
When you installed STS, these two Template Folders already contain files you can use straight off or you can copy, duplicate, save as another name and thereby create more customized template files for yourself.
The /full/ folder has many more files than the /test/ folder. However it is the /test/ folder we will be using. You can rename this later if you want but for now, I will concentrate on the how-to-use factor.
The /full/ folder, though usable, is mainly used for copying template files over to our working /test/ folder if and when we want more specific or different kinds of (HTML) templates.

STS 4.5.8 (from hereon in, referred to as STS) comes with 4 modules (or sub-modules if you like). All independent of each other so that you can choose to use just 1 or all of them. By default, it is disabled. All you need to do is simply enable them
in your osc Admin section. The Default module however must be enabled to use STS at all.
Recall that STS 4.5.8 (from hereon in, referred to as STS) comes with 4 modules (or sub-modules if you like). The Default module must be enabled to use STS at all.
This is the main module. Must be enabled to use any of the others.
Even if you just have only this one enabled, it will already make your designing job much easier.
In OSC Admin, you enable/disable it. There are few parameters you can set. For now, I am only dealing with the basic ones we need.

As I said earlier, we would be choosing the /test/ Template folder as our working folder. If you had another Template folder you wanted to use and you wanted the default Template-file to still be sts_template.html, then you would move (or copy) that file over to your Template folder of choice. The Working Template folder you choose is just the folder that contains all your HTML template files and all you have to do to choose/change the Template folder you want to use, is by letting STS know - via the osc's Admin > Modules; just as we are doing now.
I know the smarter ones amongst you will find this silly but it took me a quite awhile before I could see these connection clearly. So I am including a summary-logic here for those of you who might unenviably find themselves in a similar situation as myself.
What we have done here is:
OK! Great! But what do you do now, right? Well you can now simply go to your chosen default HTML template file:
/includes/sts_templates/test/sts_template.html
Open it in any HTML editor, and make changes to layout as you like.
And if you need to know either the definition or more placeholders you can use, please refer to Bill Kellum's STS v4.5.8 User Manual (which comes with the STS module when you download it). Or if you prefer, you can download this STS v4.5.8 User Manual (in .pdf format; approximately 273 kb. This is Bill Kellum's documentation but I just made it into .pdf format as it is safer for internet downloads).
When you open up the folder /sts_inc/ containing the placeholder files, you will see that there are a number of placeholder files in there already. If you wanted to use some placeholder that is in one of this other placeholder files (in addition to the default sts_user_code.php), then in your Default module setup, you just add the name of the additional placeholder file(s) after sts_user_code.php separated by semi-color (;).
For example, if you wanted to use a placeholder file you created and named extras.php, then your setup would look like:
Files
for normal template = sts_user_code.php;extras.php
You can also create your own placeholders and put it in a new file or in one of the existing placeholder files. Then remember to "tell" STS as per above. If you create a new placeholder file, you must put it in the same folder as with all the other placeholder files - i.e. in folder /sts_inc/
This is actually done via 2 templates:

To enable this module go to:
The Product Info module first looks for the Main template and then for the Content template. Usually your Main template would be the same for most if not all your product pages, as the type of information and layout you want for the header, columns, footer would not change much. But if you wanted them to change for a specific category, for a specific page within a specific category, or even for just one specific page, you can do this with the Product Module.
The same holds true for your Content template.
As we mentioned in STS 4, the STS 4.5.8 contribution comes with 2 template folders,
which are found in /includes/sts_templates/.
We also said that we have chosen (as recommended in the User Manual) to use the "test" as our working Template folder. And we noted that the "full" template folder has more files than the "test" folder but that we can easily copy, rename, and paste the files we needed from the "full" to our "test" folder.
Now only if you want the "yellow" part of all/any your product pages to be different from other pages in your site, only then will you need to do anything about the Main template. Otherwise, you can ignore this section and go on to the discussion on the Content template below. If you are going to be changing the "yellow" part for any of your product pages, you will need to use a file from the "full" folder.
In a fresh install/download, this is what the "full" template folder contains:
We are interested in the product_info.php_3.html file.
We will be using this as our default Main (HTML) template file for our product pages - that is to say, if you
This is pretty much what the layout looks like when you have a look at it (in a WYSIWYG HTML editor):
Again, remember we are talking about the "yellow" portion. So changing/adding/removing/moving any of the placeholders will change the "yellow" part of your product pages. You redesign as you would with any HTML layout file.
Okay, what do you do if you want specific look and feel for specific pages or categories?
Let's say that the specific product has a products_id=4. (Easiest way to get this is by looking at the address bar in your browser when viewing that one particular product).
In your /includes/sts_templates/test/ folder,
Let's say that the specific product has a products_id=4 and the category it is in has a cPath=46.
In your /includes/sts_templates/test/ folder,
Let's say that the specific category has a cPath=46. (Easiest way to get this is by looking at the address bar in your browser when viewing that one particular category).
In your /includes/sts_templates/test/ folder,
In each of these searches, it will go from the very specific to the general. As soon as it has found the relevant specific template, it will apply that and stop the search for anymore relevant templates. So from our examples above, this is what it would do in sequence:
I find the content template extremely useful. I can show the product details exactly how I want them, using the placeholders that I want. Even if you don't use the STS 4 Product Module, the osc default product information is still pretty good. But when you really want to change something or add some piece of information or make the product details look different somehow, then you will be oh so grateful to have the Product module.
Without me even saying it, you must already know that the $content part is determined by a content template when we enable the Product Module. And that this template is a good old HTML file. But where is it and what is it called?
When you look at the files and folders you downloaded and installed for the STS 4 contribution, you will notice that there is no such "content" folder within the "test" folder. However in the fuller "full" folder, you will see it.
And it contains only one file: product_info.php_26.html.
$content - i.e. the "pink" portion) to be a different layout for one specific product, for a specific product within a specific category, for all products in only one specific category, or for all products. Revisit the Main template section above for the name-format to apply to this template file. Just in case that is not clear, if you want the layout of the $content section to be customised for one specific product (say, product_id=12), then your content template file would be renamed to product_info.php_12.htmlFor this exercise, I have renamed my content template file to be product_info.php.html (i.e. I want the customised layout changes to be applied to all my product pages.
Open the content template file in a HTML (wysiwyg) editor, make the layout changes you want, upload. That's it.
Just to show you the big changes you can do to how your product details can look. Below is how the content template looked before any changes were made to the layout:


At the start of this paper, I talked about the settings you would enter when you enabled your Product module. In particular, I want to now comment on the field:The 2 files specified are placeholder files and as with all placeholder files, they are located in /includes/modules/sts_inc/
You can remove these files from this settings fielf (for faster processing time) if you don't use any of the placeholders in those files. However if you are using this Product Info module, you will almost invariably be needing the placeholders found in /includes/modules/sts_inc/product_info.php.
You can also have a look at the placeholders in these placeholder files. Either open up your own files or look at: STS 4 List of User (created) placeholders and STS 4 List of Product Info placeholders.
With the Index module, you can create a different layout/look for your home page (e.g. when you want it to look pretty different from the rest of your site), your category and/or sub-category pages, and/or your manufacturer pages. These customized layout might range from different colours, positional arrangement of pieces of information, and/or additional informational text that you want displayed only for certain category, sub-category, or manufacturer pages.
So we now know that the Index module, when it looks for what templates to apply to which pages, also takes into consideration the product pages templating (i.e. has a product page been design-customized via the Product Info module?). The following flowchart shows how this logic works:

If you are going to customize any of these pages, then the naming format are as follows, and each of these (HTML) template-files must be stored in /includes/sts_templates/test/ (where "test" folder is your Working Template folder. Please refer again to STS 4: Default Module if unclear as to what a "Working Template" is.)
| for .. | File Naming Format |
|---|---|
| (site's) Home page | index.php_0.html |
| a specific manufacturer (e.g. manufacturers_id=6) | index.php_mfr_6.html |
| all manufacturers | index.php_mfr.html |
| a sub-category.. (e.g. cPath=40) which is a child of parent category (e.g. cPath=2) |
index.php_2_40.html (Note: top-parent category-id first, then it's child-cat-id, then next child-cat below that, &c.) |
| category (no parent) e.g. cPath=3 | index.php_3.html |
Many people like to customise their home pages quite extensively. Can the STS Index Module be of any great help here?
Well, yes and no. It depends on what you want .. and more specifically, what you don't want.
Let's say we are not using STS but just the way osc came to us. We know that it is pulling in dynamic data from somewhere so that it can populate our different pages like our product details pages and our home page. But they do look different from each other don't they? So specifically, where does the content for the home/front page come from?
I am going to use this image for illustration. Imagine for a moment that this is how your home page is set up. (This shows the HTML design layout using placeholders and stuff but not to worry, what we are concerned about here is only what the $content placeholder represents.)
Our question was, without STS contrib, where does the actual info that placeholder $content gets it's information from and how much can we change that?
Well I (still) don't know the whole answer but I know you can determine quite a bit of that information.
If you open to your index.php file in (catalog>/includes/languages/english/index.php,
quite near the top you will find (if you have changed nothing yet):
define ('TEXT_MAIN','This is a default set up of osCommerce Online Merchant ....');
$content.
But there are other bits as well the osc does for you automatically on the home page .. like the opening header on that page, the "Welcome Guest! Would you like to log yourself in?.." etc., a table of your latest products for the month. Changing the yellow highlighted portion above will not affect those things.
OK. So now we know that even without STS, we can change some of the contents to be displayed on your home page (via changing the yellow highlighted portion in the index.php file as mentioned above. The changes will be between the 'want to log in?..' and the latest products table). Useful to know but really quite a bit troublesome to do. Quite limiting too. For instance, if you wanted to add something to the bottom of the home page, how would you do that? This is when we ask if STS can help us out.
As we talked about in the STS Default Module article, if you do nothing else but enable it (which is necessary if you are to use STS at all), the HTML template file you would be using to redesign your osc site would be
/(catalog)/includes/sts_templates/test/sts_template.html
And if you were to open the sts_template.html file without any changes, this is pretty much how it first appears (in a WYSIWYG editor)
But you don't want to use the Default Module's sts_template.html file if you want to custom design your home page. Why? Because the changes you make here will probably affect every page on your site.
So as we touched on in the STS Index Module article, you will want to be using some form of (HTML) index template file. To be more exact, you will need a file that is named index.php_0.html.
If you do not have such a file as index.php_0.html in the test folder, then go to the full folder in:
/includes/sts_templates/full/
Copy the index.php.html file into the test folder, then rename it to index.php_0.html.
Open this up. It will look almost identical to the sts_template.html templating file used by the Default Module we talked about above. However, with the Index Module enabled, when you upload this file to the corresponding folder at your server end, this file will only affect your Home page.
As with all the other templating files we talked about, you can easily rearrange and customize the look and feel of this file. So go ahead and do that, knowing that this will only affect your home page.
$content, then the automatic information that osc does for you (like the 'Welcome guest!..', the latest products table, etc.) will also be gone.$content placeholder, then your content will be above the opening header, the"Welcome guest!.." as well. Which might not be what you want. So, replacing the yellow highlighted part in the index.php as we talked about above might still be the way to go for that part (i.e. to change the contents after the opening header and before the New Products table).However with the template file for the Home page, i.e. the index.php_0.html you can now easily add any content and/or images below the 'automatic' stuff that osc puts in the front page for you. This, I find, can also be very useful.
It really is hard to explain exactly what is going on. The best way to find out exactly what your changes will look like is to try it out. Just remember to make a duplicate copy of each file so that if something goes very pear shaped, you can revert back to the duplicated copy. And remember, you can always turn off (disable) the STS Index module if you don't want to use that anymore. Then the default template will take over (sts_template.html) as before.
| Placeholder | Description |
|---|---|
| $date | The current date |
| $sid | The string for the Session ID in the format "SessionIdVarName=WhateverTheSessionIdIs" |
| $cataloglogo | Shop logo with link to index.php. Before v4.3: oscommerce.gif in catalog/images folder. Since v4.3: header_logo.gif, in template folder/images/english (or other language). |
| $urlcataloglogo | The URL used by the $catalog logo |
| $myaccountlogo | The MyAccount graphic and link to account.php . Before v4.3: header_account.gif in catalog/images folder. Since v4.3: header_account.gif, in template folder/images/english (or other language) |
| $urlmyaccountlogo | Deprecated in v4.3, use $urlmyaccount instead |
| $cartlogo | The shopping cart graphic and link to shopping_cart.php. Before v4.3: header_cart.gif in catalog/images folder linking to shopping_cart.php (without SSL). Since v4.3: header_cart.gif, in template folder/images/english (or other language), linking to the same page (with SSL if present). |
| $urlcartlogo | Deprecated in v4.3, use $urlcartcontents instead |
| $checkoutlogo | The Checkout graphic and link to checkout_shipping.php. Before v4.3: header_checkout.gif in catalog/images folder. Since v4.3: header_checkout.gif, in template folder/images/english (or other language). |
| $urlcheckoutlogo | Deprecated in v4.3, use $urlcheckout instead. |
| $contactlogo | Added in v4.3: image header_contact_us.gif, located in template folder/images/english (or other language), and linking to contact_us.php . |
| $loginofflogo | Added in v4.3. If customer is not logged: displays header_login.gif in template folder/images/english (or other language), linking to login.php. If customer is logged: displays header_logoff.gif in template folder/images/english (or other language), linking to logoff.php |
| $breadcrumbs | The "Top > Catalog > whatever..." breadcrumbs text and links |
| $myaccount | The text version of "My Account" and link to account.php. |
| $urlmyaccount | The URL used by the MyAccount function |
| $logoff | The Logoff text and link |
| $urllogoff | The URL for the LogOff function |
| $myaccountlogoff | shows "My Account | Logoff" if logged in or "My Account" if not logged in |
| $cartcontents | The text version of the "Cart Contents" function |
| $urlcartcontents | The URL of the shopping_cart.php page, using SSL (if available). Buggy before v4.3 (was same as $cartcontents). |
| $checkout | The text version of the "Check Out" function |
| $urlcheckout | The URL used by the "Check Out" function |
| $templatepath | Deprecated in v4.3, use $templatedir instead. |
| $templatedir | Contains the path to the template folder, without trailing slash. |
| $headertags | New in v4.0.4: The meta tags for the <head> section of the html page. By default contains only the <TITLE> meta tag. This variable is automatically inserted into the $headcontent variable, so you don't need to use it in your template. Note: This variable can be modified by some modules to allow for other meta tags, for example a module for header tags controller modifies this variable to add description and keywords to the pages |
| $numrequests | The text "1489 requests since Friday 11 August, 2006" |
| $footer_text | The osCommerce copyright information and "Powered By osCommerce" texts. |
| $banner_only | The banner, generally displayed at the bottom of the pages. |
| $langid | New in v4.5.8: This tag allows you to add the language ID to your image link to call an image according to the language selected by the user. |
| Placeholder | Description |
|---|---|
| $productid | The ID of the product being displayed. Added in v4.0.6 for compatibility with STS v3. Buggy until v4.3. Removed in v4.3SP1, use $productsid instead. |
| $productsid | The ID of the product being displayed. Added in v4.0.6 for compatibility with STS v3. Buggy until v4.3SP1 |
| $startform | Required as the first item in the content area. This starts the HTML form needed for adding things to your cart |
| $endform | This should be the last item in the content area. This closes the HTML form needed for adding things to your cart |
| $regularprice | The price of the product, does not care of special prices |
| $specialprice | The special price, empty if not defined |
| $regularpricestrike | Contains "<s>$regularprice</s>" if a specialprice is set, otherwise contains $regularprice (not striked). |
| $productname | The product name |
| $productmodel | The product's model number |
| $productdesc | The product description |
| $imagesmall | The product image scaled down to the thumbnail size specified in your /admin/ tools. Since v4.0.7 it is empty if there is no product image. Use $product_popup if you want to have the popup option. |
| $imagelarge | The product image with no resizing (actual size of image). Since v4.0.7 it is empty if there is no product image. |
| $product_popup | New in v4.0.7: The Javascript with small image and link to popup window. Empty if no product image. |
| $optionheader | The "Available Options:" text above the options, will change with the language. Blank if no options (product attributes) |
| $optionnames | A list of Option (Product Attribute) names, separated by line breaks ("<br>"). Blank if no options |
| $optionchoices | A list of Option (Product Attributes) choices as drop-down boxes, separated by line breaks ("<br>"). Blank if no options |
| NOTE: As shown in the “/catalog/includes/sts_templates/test/product_info.php_26.html” file, it is recommended that you use an HTML table to layout the options (Product Attributes). In the first column have $optionnames and in the second column have $optionchoices. This will automatically keep the correct names next to the correct choices. Use a table without a border. | |
| $moreinfolabel | The language-sensitive value of TEXT_MORE_INFORMATION (for linking to a more detailed page) |
| $moreinfourl | The URL of the page where more information can be found |
| $productdatelabel | Will contain either the Date Added or the Date Available messages, language specific |
| $productdate | The date it will be available or the date it was added |
| $reviews | The text with the number of reviews for the item. Empty if no reviews are available |
| $reviewsbutton | The image for the reviews button |
| $reviewsurl | The URL for the product's reviews |
| $addtocartbutton | The button to send the product into the cart |
| $alsopurchased | The box with products also purchased |
| Placeholder | Description |
|---|---|
| $catmenu | A drop-down list of available categories |
| $footer | Includes $footer_text as well as date and requests counter, inside an html table. To use this variable, uncomment its code. Existing only for compatibility with templates made with STS v2 and v3 |
| $banner | The banner inside an html table. To use this variable, uncomment its. Existing only for compatibility with templates made with STS v2 and v3 |
| $cat_CategoryName, $urlcat_CategoryName | Links to categories using the category name. Available for each language. Example: $cat_Hardware. To use these variables, uncomment their code. |
| $cat_CategoryID, $urlcat_CategoryID | Links to categories using the category ID. Better use the ID than the name, so changing the category name won't break the link. Example: $cat_2. To use these variables, uncomment their code. |