 |
| EZ
setup for the osCommerce
online E-Shop: |
|
A few key points about osCommerce they DON'T tell you
on their support
site:
- oscommerce
is an "open source" application that requires
direct editing of some PHP code. The easiest way to
do this even if you've never edited any code in your
life is to use the WordPad program that comes with
Windows. (more on this later)
- oscommerce
takes up about 3MB of your webspace once installed.
This includes about 100 sample products, descriptions,
reviews etc., as well as the complete Admin section.
|
|
The
following tutorial applies to Unix based plans with
My SQL and PHP enabled.
Basic Setup in H-Sphere:
You
must make sure osCommerce is activated in your plans
creation wizard or plan settings.

Important!
Also, make sure PHP and My SQL are enabled for the plan.
|
|
Next,
Log into the admin panel for the account you'd like
to add osCommerce to.
Creating
a MY SQL database in H-Sphere:
- For
left menu H-Sphere setup click on "Databases"
then "MySQL DB Wizard".
- Name
the database and give it a description such as "shopping
cart", hit "next"
- Create
a username and password for the My SQL db user. For
"User role" use "dba", which grants
this user full administrative control.
- Click
"Add user"
- Click
"finish"
|
|
Activating
osCommerce and connecting it to your MY SQL Database:
- In
the left nav menu click on "Account" then
"Quick access"
- Click
on the osCommerce icon in the quick access menu
- In
the "Edit osCommerce" menu turn the
to
by clicking on it.
- Under
the "MySQL databases" drop-down, choose
the database you've just created.
- Under
the "MySQL User" drop-down, choose the user
you've just created. Click "NEXT"
|
|
If
successful, you should see this message:
osCommerce has been added successfully
Don`t forget to set permissions on the "admin"
directory using Web protect (Quick Access INFO) to restrict
access to osCommerce configuration.
This
message is simply a reminder to password protect your
"Admin" directory. The Admin directory holds
the backend of the osCommerce cart and enables you to
manage your cart settings etc., at anytime via the web
at: http://yourdomain.com/admin
To
Web Protect your Admin directory follow these steps:
- In
the Quick access menu click on "Web Protect"
- Click
on the "Admin" directory
- In
the "Name" field type in anything, for example
"cart admin"
- Click
on "Add user"
- Follow
the pop-up prompts to create a username/password for
this directory.
- Click
"Save", "ok" and close the window.
|
Setting
up osCommerce:
Click
the oscommerce icon in the "quick access"
menu. You should see this menu:

|
|
:
This operation restores corrupted osCommerce templates
and updates the osCommerce config file to use the current
hosting settings.
:
Upgrades osCommerce to the latest version.
:
A direct link to your online store.
:
A direct link to your password-protected Admin section
to setup and configure your cart.
|
|
Click
on .
The first thing you'll notice is the warning message
at the top of the screen:
"Warning:
Installation directory exists at: /hsphere/local/home/user/yourdomain.com/catalog/install.
Please remove this directory for security reasons."
To
get rid of this warning message you must delete the
entire "install" folder inside your "catalog"
directory. You can delete this using any FTP client
or the file manager in either H-Sphere or the osCommerce
admin section.
|
Basic
Configuration of your Store:
Click
on
or go to http://yourdomain.com/admin Login with
the user name and password you created using Web Protect
earlier. If logged in you should see:

A
good place to get started here is in "My Store".
This setup is pretty much like most other carts. Basically
highlight a title, click on it and either hit the "Edit"
button on the right to change its value or type it in
the text box and hit "Update". The entire
backend of osCommerce follows this basic procedure and
is fairly easy for anyone with basic knowledge of a
PC, website administration or the internet in general.
|
PHP
If
you already are familiar with the PHP scripting language
skip the rest of this tutorial. The following is for
beginners or those who have never edited code before.
Basic
Configuration of your main Storefront page: www.yourdomain.com/catalog/default.php
Assuming
your cart is in english:
There are basically 2 PHP documents you must edit in
order to customize your storefront.
Login
via FTP to your site and Download these 2 documents..
Path: /yourdomain.com/catalog/includes/languages/english.php
Path: /yourdomain.com/catalog/includes/languages/english/default.php
|
|
Were
not going to get into a PHP lesson here, just the basics:
2 important things to remember if you've never edited
PHP before:
- Any
line that starts with "define" can be edited,
for example:
define('HEADING_TITLE',
'What\'s New Here?')
could be changed to:
define('HEADING_TITLE', 'Welcome
to Our Store!')
- Don't
touch anything else in blue unless you know what you
are doing!
Open
default.php using WordPad:
--------------------------------------------------
define('TEXT_MAIN', 'This
is a demonstration online-shop, <b>any products
purchased will not be delivered nor billed</b>.
Any information seen on these products are to be treated
fictional.<br><br>If you wish to download
this sample shop, or to contribute to this project,
please visit the <a href="http://oscommerce.com"><u>support
site</u></a>. This shop is based on <font
color="#f0000"><b>' . PROJECT_VERSION
. '</b></font>.');
define('TABLE_HEADING_NEW_PRODUCTS', 'New
Products For %s');
define('TABLE_HEADING_UPCOMING_PRODUCTS', 'Upcoming
Products');
define('TABLE_HEADING_DATE_EXPECTED', 'Date
Expected');
if ($category_depth == 'products'
|| $HTTP_GET_VARS['manufacturers_id']) {
define('HEADING_TITLE', 'Let\'s
See What We Have Here');
define('TABLE_HEADING_IMAGE', '');
define('TABLE_HEADING_MODEL', 'Model');
define('TABLE_HEADING_PRODUCTS', 'Product
Name');
define('TABLE_HEADING_MANUFACTURER', 'Manufacturer');
define('TABLE_HEADING_QUANTITY', 'Quantity');
define('TABLE_HEADING_PRICE', 'Price');
define('TABLE_HEADING_WEIGHT', 'Weight');
define('TABLE_HEADING_BUY_NOW', 'Buy
Now');
define('TEXT_NO_PRODUCTS', 'There
are no products to list in this category.');
define('TEXT_NO_PRODUCTS2', 'There
is no product available from this manufacturer.');
define('TEXT_NUMBER_OF_PRODUCTS', 'Number
of Products: ');
define('TEXT_SHOW', '<b>Show:</b>');
define('TEXT_BUY', 'Buy 1 \'');
define('TEXT_NOW', '\' now');
define('TEXT_ALL', 'All');
} elseif ($category_depth == 'top')
{
define('HEADING_TITLE', 'What\'s
New Here?');
} elseif ($category_depth == 'nested')
{
define('HEADING_TITLE', 'Categories');
}
?>
----------------------------------------------------------------------------
What\'s
New Here?
Which is the page "heading title" can be easily
modified. As can anything I've highlighted in RED.
Tips:
- Make
copies of english.php
and default.php in a
separate folder before editing the source code. This
way, if you inadvertently mess up the syntax you can
always start over with the untouched file. Failure
to do so could destroy your cart.
- You
can insert some HTML tags like <b>
or <font> in between
the ' ' where
the text resides. For example: define('TEXT_SHOW',
'<b>Show:</b>');
- When
you are done editing any php file, upload it back
where you got it from and refresh your storefront
page to see the changes.
|
Custom
Colors and Graphics:
All
colors for your storefront are controlled by one single
document:
stylesheet.css
Path:
/yourdomain.com/catalog/stylesheet.css
|
|
You
can easily change the colors, font sizes, font colors,
margins, etc. for the entire cart using this document.
All
Changeable attributes are marked in RED,
but for .css you can edit just about everything.
Excerpt from stylesheet.css:
--------------------------------
BODY {
background: #ffffff;
color: #000000;
margin: 0px;
}
A {
color: #000000;
text-decoration: none;
}
A:hover {
color: #11366D;
text-decoration: underline;
}
FORM {
display: inline;
}
TR.header {
background: #ffffff;
}
--------------------------------
|
| Images: |
|
The
first thing you may want to do is replace the osCommerce
logo with one of your own:
Path: /yourdomain.com/catalog/images/oscommerce.gif
The
fastest and easiest way to do this is to make a logo
using a graphics editor, save the file as oscommerce.gif
and upload it, thus replacing the osCommerce logo with
your own. Note: Your logo DOES NOT have to be
the same size as oscommerce.gif
Other
images to note:
Path:
/yourdomain.com/catalog/images/infobox/corner_left.gif
This is the little left half-circle
at the top left side of your categories table: 
Path:
/yourdomain.com/catalog/images/infobox/corner_right.gif
Same thing, but on the right side: 
Path:
/yourdomain.com/catalog/images/infobox/corner_right_left.gif
The square one in every table: 
If
you decide to change the table colors in stylesheet.css,
you will want to replace these with matching colored
graphics of your own. For best results make sure the
new replacement graphics you make are the same width
and height as the above samples.
|