Getting Started with osCommerce
(This article is a
work-in-progress and will be subject to frequent
changes.)
Contents
Introduction:
Setting
up your on-line store can be a complicated process but it
becomes
much easier after your basic configuration settings have been made.
There are certain
configuration settings and features that need to be enabled or
modified to achieve a working on-line store.
These notes are not intended to be
a replacement
for documentation at the official osCommerce
project website.
Instead, they are meant to serve as a simple guide to help get
you started with setting up your osCommerce on-line store. You
may
need to read, learn, and implement instructions from the Additional References section
of this document in order to completely set-up and manage
your on-line osCommerce shop to your satisfaction.
This
article is also written under the assumption
that you
already
possess the fundamental skills to be able to perform these
steps.
These skills include, but are not limited to the following:
- How
to login to your Plesk Control Panel.
- How to
navigate your website's file system.
- How to edit
your osCommerce PHP files.
- How to edit, enhance,
and resize images.
- How to upload files and images
using osCommerce.
- How to edit HTML code and HTML
tables.
For expediency, the minutia of
beginner level instructions have been omitted. This means you are
responsible for
carrying out these instructions and Bright Ideas Computing
will
not assume any
liability whatsoever for any mistakes you make or any omissions in
these guide notes.
Because
osCommerce is provided
free-of-charge with your domain hosting account, it does
not come with any free technical support from Bright Ideas
Computing. If you require
any assistance with setting up your osCommerce shop, you may contract
us separately on a fee-based per-incident or hourly basis.
Conditions:
The
following set-up of osCommerce is made for an on-line shop that will
use
only PayPal as the credit card payment processor and only USPS as the
shipping method. Using PayPal as your credit card payment processor
negates the requirement to purchase and set-up an SSL
Certificate or sign up for another expensive credit card
processing account. You are responsible for your own PayPal
and USPS
accounts. If you have any problems with setting up and working with any
of those accounts, you will
need to contact their technical support resources.
Let's get started!
1.
Install osCommerce from within your Plesk Control Panel:
a. Login as domain administrator.
b. Click the Application Vault icon.
c. Click the Add New Application icon.
d. Select osCommerce and click "Install".
e. Change the destination directory name to "shop" or "store".
f. select directory "http" if you are NOT
using SSL.
g. Select directory
"https" if you ARE using SSL.
h. Enter and verify Database Preference passwords (don't
forget these!).
i. Enter and
verify Administrator's Preference passwords (don't forget these!).
j. Click "Ok" button to start the installation process.
2. To see
the default installation of your osCommerce shop, append "shop" or "store" onto your
website's URL.
3.
To login to the osCommerce Administration Control Panel, append "admin" onto the
shop's URL.
4. You
need to enter the payment module by clicking "Payment" under the "Modules" category
shown in the
osCommerce Administration Control Panel and then install the PayPal
module. Then you'll need to edit the PayPal module to
reflect these values...
Do you want to accept PayPal payments = True
Enter your valid PayPal email address
Select the Transaction Currency
Payment Zone = none
Set Order Status = default
Sort Order of Display = 0
5.
You will need to activate the "Auto Return for Websites Payment"
option inside your actual PayPal account and set the "Return URL" to
be...
http://yourwebsite.com/shop/checkout_process.php
...located in the "Website Payment Preferences"
of your PayPal Account's Profile "Selling
Preferences".
It's
important to note here that if you download and install an updated
PayPal module other than the one that is included in the default
installation set of osCommerce, then instead of the URL shown above you
might need to set the "Return URL" to
be...
http://yourwebsite.com/shop/checkout_success.php
For more detailed information directly from PayPal about auto return, see the following...
(Note: You must have a PayPal account and login before you can access that page.)
6. You
will also need to "allow
transaction-based shipping values" to override the profile shipping
settings by check marking the appropriate checkbox in the "Shipping
Calculations" of your PayPal account's
Profile "Selling
Preferences".
7.
If you want to use the USPS shipping module, you will need to register
an account with USPS at...
http://www.uspsprioritymail.com/et_regcert.html.
8. You
will receive an email from USPS with your USPS User ID.
9.
Call USPS at 1-800-344-7779 and tell them that your are using
osCommerce as your third-party shopping cart software and request that
they switch your account to the "production" server.
They will
perform that within a few minutes and you will receive another
verification email from USPS.
10.
To use the USPS shipping module you need to install and configure it
by clicking "Shipping"
under the "Modules"
section in the administrator's interface. Then edit the USPS
module to reflect
these values...
Enable USPS Shipping = True
Enter the USPS User ID
Leave the USPS Password blank
Set the account at USPS to use the Production server
Tax Class = none
Shipping Zone = none
Sort Order = 0
Let's Customize The Look and
Feel of Our Shop!
11. To insert your
own logo, save it as 'oscommerce.gif'
and upload it into:
../oscommerce/images
Your
basic osCommerce shop header starts out looking like this...
...but
with a new logo it can end up looking like this...
Don't
worry about the red background color or the change in text
from "Top"
to "Home".
We'll get to those changes later in this article.
12. To insert
additional text into the header area, edit the following table code...
<table border="0"
width="100%" cellspacing="0" cellpadding="0">
<tr
class="header">
<td valign="middle"><?php echo '<a href="'
.
tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES
.
'oscommerce.gif', 'osCommerce') . '</a>';
?></td>
<td align="right" valign="bottom"><?php echo
'<a href="' .
tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' .
tep_image(DIR_WS_IMAGES . 'header_account.gif',
HEADER_TITLE_MY_ACCOUNT) .
'</a> <a href="'
. tep_href_link(FILENAME_SHOPPING_CART) . '">' .
tep_image(DIR_WS_IMAGES . 'header_cart.gif',
HEADER_TITLE_CART_CONTENTS) .
'</a> <a
href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') .
'">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif',
HEADER_TITLE_CHECKOUT) . '</a>';
?> </td>
</tr>
</table>
...located
in...
../oscommerce/includes/header.php...
...to
add another table cell right behind the table cell that contains the
reference to oscommerce.gif...
<table border="0"
width="100%" cellspacing="0" cellpadding="0">
<tr
class="header">
<td valign="middle"><?php echo '<a href="'
.
tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES
.
'oscommerce.gif', 'osCommerce') . '</a>';
?></td>
<td><center><font
color="white"><b>Your Mission
Statement Here<br><br>123 Some Street, Some
City, State
ZIP<br>
1-800-555-5555
(toll free)<br>
1-301-555-5555
(office)<br>
1-301-555-5555
(fax)</b></font></center></td>
<td align="right" valign="bottom"><?php echo
'<a href="' .
tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' .
tep_image(DIR_WS_IMAGES . 'header_account.gif',
HEADER_TITLE_MY_ACCOUNT) .
'</a> <a href="'
. tep_href_link(FILENAME_SHOPPING_CART) . '">' .
tep_image(DIR_WS_IMAGES . 'header_cart.gif',
HEADER_TITLE_CART_CONTENTS) .
'</a> <a
href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') .
'">' . tep_image(DIR_WS_IMAGES . 'header_checkout.gif',
HEADER_TITLE_CHECKOUT) . '</a>';
?> </td>
</tr>
</table>
Naturally,
you will change the information listed above that is highlighted in bold red
to reflect whatever your entries are to be. This is how I chose for my
header text to look like...
13. You can change
the background
color hex values of the underlying page color in:
../oscommerce/stylesheet.css
BODY {
background:
#ffffff;
color: #000000;
margin:
0px;
The
default page color is white but can be changed to reflect a new color
as depicted in the difference between these two images...
14. To
change the color bars to reflect the look and feel of your underlying
website:
a. Change the colors of corner_left.gif, corner_right.gif,
and corner_right_left.gif
using your graphic image manipulation program
and then save them into:
../oscommerce/images/infobox
b. Change the background
color hex values of the header, top navigation bar, and the box titles
in:
../oscommerce/stylesheet.css
TR.header {
background: #bbc3d3;
TD.headerNavigation {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;color
font-weight : bold;
TD.infoBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #bbc3d3;
color: #ffffff;
TD.footer {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #bbc3d3;
color: #ffffff;
font-weight: bold;
.productListing-heading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
background: #b6b7cb;
color:
#FFFFFF;
font-weight: bold;
c. Change the color
hex values of the page heading titles in:
../oscommerce/stylesheet.css
TD.pageHeading,
DIV.pageHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
color:
#9a9a9a;
15. To change the
menu items "Top - Catalog" edit
the following lines...
define('HEADER_TITLE_TOP',
'Top');
define('HEADER_TITLE_CATALOG', 'Catalog');
located
in...
../oscommerce/languages/english.php
(Note: This
is useful if you want to change the link that reads "Top" to
"Home" or "Main".)
16. If you
want to change the index page title called 'What's New Here'
then you need to modify the line...
define('HEADING_TITLE',
'What\'s New Here?');
(Note: There
are two identical lines of this text. You want to modify the second
look-alike line.)
...located
in:
../oscommerce/includes/languages/english/index.php
17.
If you want to modify additional text on the store front, CAREFULLY
read the instructions posted on the first page of your shop's default
installation. Basically, you want to edit this code snippet so it looks
like this...
define('TEXT_MAIN', '');
...located
in...
../oscommerce/includes/languages/english/index.php
...then
you can add your text between the single quotes so it looks like this...
define('TEXT_MAIN', '<font
color=#cd5860><b>Add your text here. Make sure to
precede any
grammatical single quotes with a backslash. For example, if we use the
word "Our\'s" you'll see that we\'ve added a backslash in
front of
the single quote so that it is not read as a PHP code snippet. If you
do not add a backslash, then
your page will show up blank in a browser display window and you'll go
crazy trying to figure out what went
wrong.</b></font> As
you can see in this example, you can also use HTML formatting tags.');
18. If you
want to modify the title that shows up in the browser window, then edit
this line...
from: <title><?php
echo TITLE; ?></title>
to be: <title>Insert New Title Here</title>
...located
in:
../oscommerce/index.php
19. If you want to
add text to the Privacy page, then add it in place of the following
line...
<?php echo
TEXT_INFORMATION; ?>
located in:
../oscommerce/privacy.php
20.
You can perform the same for the following pages and their
corresponding files located in the same path as in the previous step...
Shipping and Returns
-> ../oscommerce/shipping.php
Conditions of Use
-> ../oscommerce/conditions.php
Let's Add Items For Sale!
21. Now
you can add, edit, or delete items from your on-line osCommerce shop.
WORK-IN-PROGRESS
MORE TO COME
Additional
References:
http://www.oscommerce.com/
http://www.oscommerce.com/solutions/documentation
http://forums.oscommerce.com/index.php?showforum=15
if you enjoyed this article and would like a custom process written just for you.
