osCommerce 2.2 Template Installation
The following will explain how to install one of the osCommerce 2.2 templates (also known as themes, layouts or skins) available on this website.
Step 1. Back up everything
The osCommerce 2.2 STS templates themselves do not require you to over-write any files, however:
Before ever modifying your osCommerce installation (or anything else for that matter), back up everything on the server and your database! Again, backup- backup!
Step 2. Install the STS (Simple Template System) module
All of the osCommerce 2.2 templates on this site require the STS (Simple Template System) module. Here's why.
osCommerce 2.2 doesn't come (by default) with a way to easily manage templates. If you want to change the look of your osCommerce 2.2 website, you pretty much have to edit every individual page (of which there are many). The best solution to the 2.2 template problem is the free STS (or Simple Template System) module. STS was developed to allow you to control the look and function of your osCommerce 2.2 website by editing just one file. It's an elegant solution that integrates well with most shops, even modified ones, and is compatible with a wide range of other modules. It takes only a few edits to install STS to a modified osCommerce shop. If you're setting up a new osCommerce store you can install STS in less than five minutes.
If you don't already have STS installed on your system, visit the official STS page to download it. Install it according to the official STS Installation documentation.
Step 3. Download and unzip your ecommerce template
If you haven't already, browse the osCommerce 2.2 layouts available on this website and choose the one that you like best. Unzip the file to a folder on your hard drive.
Step 4. Upload the template files to your web server
Via FTP, upload everything in the 'upload' folder to the same directory as your store.
Template files:
The upload folder contains the following (### = template number):
includes/sts_templates/ecommerce_###/ecommerce_###.html (template)
includes/sts_templates/ecommerce_###/ecommerce_stylesheet.html (stylesheet)
includes/sts_templates/ecommerce_###/boxes/ (templates for the sidebar boxes)
includes/sts_templates/ecommerce_###/images/ (template images, buttons and other images)
Important note: If you have changed the name of your sts_templates folder, you must manually upload the contents of includes/sts_templates to the appropriate directory (or change the STS template back to sts_templates in the STS admin). If you're using a default STS installation you should be fine.
No files will be over-written with this installation.
Step 5. Activate the template (Configure STS)
Once you've successfully installed STS and uploaded everything in the 'upload' folder to your web server, it's time to actually activate the template. To do this, log in to your osCommerce online store, select Modules --> STS in the admin menu. Select the Default module, then click the edit button.
Update the following configuration values (where ### is replaced by the template number -- for example, for template number 004, ecommerce_###.html will be ecommerce_004.html).
5a. Set Use Templates? to true.
5b. Set Template folder to ecommerce_###
5c. Set Default template file to ecommerce_###.html
5d. Set Use template for infoboxes to true.
5e. Click the update button to finish
Your template should now be fully functional. If it's still not working, check to make sure the files were uploaded to the correct folders (important if you've changed your sts_templates folder name) and double-check configuration values.
Step 6. Fix checkout_confirmation.php (if necessary)
Some stores using STS experience a page break on the checkout_confirmation.php page of the checkout process due to the placement of a small block of php code. This is a simple fix that requires only one change.
To fix this, open checkout_confirmation.php and find this code at around line 111:
<!-- body_text //-->
<td width="100%" valign="top">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<?php
if (isset($$payment->form_action_url)) {
$form_action_url = $$payment->form_action_url;
} else {
$form_action_url = tep_href_link(FILENAME_CHECKOUT_PROCESS, '', 'SSL');
}
echo tep_draw_form('checkout_confirmation', $form_action_url, 'post');
?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
and replace it with this (which moves the php code above the table code):
<!-- body_text //-->
<td width="100%" valign="top">
<?php
if (isset($$payment->form_action_url)) {
$form_action_url = $$payment->form_action_url;
} else {
$form_action_url = tep_href_link(FILENAME_CHECKOUT_PROCESS, '', 'SSL');
}
echo tep_draw_form('checkout_confirmation', $form_action_url, 'post');
?>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td class="pageHeading"><?php echo HEADING_TITLE; ?></td>
Save the file and upload it to your server, replacing the old checkout_confirmation.php file.
Alternatively, if you have a new installation of osCommerce (with an unmodified checkout_confirmation.php) file, you can use the replacement file that comes in the 'checkout fix' folder of your template package.
Step 7. Set up your footer and header menu links
Your osCommerce v.2.2 template is set up with top header image/s and menu links (The Header/s can easily be modified with the included Photoshop files) at the top of the page, and a footer at the bottom of the page for links, copyright information and/or anything else.
To modify the menu links or the footer, you'll need to open the template file named ecommerce_###.html (located in the 'upload/includes/sts_templates/ecommerce_###/' directory of your template package), where ### is the number of your template.
To modify the links in the header:
In the ecommerce_###.html template file, you'll find a section that looks like the following (where the Links have actual html and/or php code):
<div id="top_menu_links">
<span>Home</span>
<span>Link 2</span>
<span>Link 3</span>
<span>Link 4</span>
</div>
If you want to just put some text in place of links, remove everything between the two div tags and place your text there. If you want to put page links, just add links inside <span></span> tags, like this:
<span><a href="mylink.php">My Link</a></span>
The span tags will allow the CSS to space the links correctly on the page -- you can modify this any way you like by editing the ecommerce CSS file.
To modify the footer:
Find the following (or something similar) in the sts_template.html template file:
<div id="footer"> This is the footer.<br/><br/> <span style="color: #0033CC"><a style="color: #0033CC" href="http://www.simphpsoftware.com/" target="_blank">osCommerce Templates</a></span></div>
You can put anything between the footer div you want, from copyright information to links to images. If you really must remove the ecommerce link you can do that, though it would certainly be nice to give a little credit to this site. It's up to you, though.
Step 8. Enjoy your new osCommerce 2.2 layout
That's it -- if you've uploaded and activated your template and set your box preferences, your new store is ready to go!
|
