Installing osCommerce on your own home computer

Recently I’ve been seeing lots of requests for instructions on how to install osCommerce on your own home computer.  There are lots of good reasons why you should do this;

  1. You can test out new contributions easily before adding them to your live store
  2. You can make a design without affecting your live store
  3. You can just see if osCommerce is right for you without having to buy a domain name and hosting

I decided that YES, I could easily write a tutorial showing how to do this, but then I thought why not just supply it all ready to go?  So that all that anyone would need to do is download some files, press a button, open the browser to http://localhost and osCommerce is ready and waiting for you.  Sounds good, right?

Well, hopefully, in the next day or two I will be able to offer this!  My idea is to install 2 flavours of osCommerce;

  1. Standard osCommerce
  2. osCommerce with STS

That way, anyone can decide which to use!  I think that this will be a useful addition to everyone!

eBay is hard work!

I haven’t used eBay for a very long time other than buying the odd item here and there.  In the past couple of weeks I’ve been using eBay to sell a couple of my osCommerce related products – it’s taken me 2 hours to get the the point where I’ve got a live listing.

For starters, eBay UK don’t allow ANY items of a digital nature – so any UK sellers selling osCommerce realted products (eg templates, scripts etc) are now forced to list on eBay.com -also, any digital products must be listed only in 1 certain category in eBay.com – but that category is unselectable!  Argh!

You are probably wondering why I just don’t use an osCommerce shop to sell my stuff … I do!  But eBay has such a large presence on the net that I’m of the opinion that an eBay listing is just as good as having your own shop.  So, why not do both, and get as many sales as possible!

Think about it for your own shop – could you use eBay to sell your stuff?  Or maybe you could use it to create some traffic to your osC Shop?

Making a design work in osCommerce

I thought it might be interesting for you guys to see how I make an osCommerce site. What I do is pretty simple and I do this for every site I built since 2000…

Step 1 is to sketch out my design on a piece of paper – here’s a REAL example:

Sorry about the quality – I don’t have a scanner so I had to take a snap with digital camera! Anyway, I’m sure you get the idea, but if not here’s the same thing in Photoshop:

Basically, what I want is 4 (yes, four) rows in the header:

  • Row 1 will contain the breadcrumb and the checkout, basket links
  • Row 2 will contain the shop logo
  • Row 3 will contain category links (style to look like buttons)
  • Row 4 will contain a search box and a summary of the shopping cart

Underneath these 4 rows, I want 2 columns:

  • 1 “thin” column for the left hand side
  • 1 “fat” column for the content of my site

I hope all this makes sense?

Step 2 is to decide upon the colour scheme. To do this I visit the Online Color Schemer – for this particular site I am using a dark blue and a pale yellow. Blue and yellow usually complement each other quite well.

Step 3 is to create the “thin” column using real osCommerce coding. In this example, I need to move a couple of infoboxes from the sidebars into the header. So I can remove the categories box, the search box and the shopping cart box. As I only use the english language, I can remove the languages box – and I can remove the currencies box as I only use UK Pounds. In addition, I don’t use the manufacturers functionality so I can remove the manufacturers dropdown box and the manufacturers information box.

Step 4 is to reduce the number of new products to 3 – easily done in the Admin section. And add in a way to feature 1 particular product – very simple to do using my own “Featured Product” contribution.

Step 5 is to code up the header area. A simple table of 4 rows is required, each with 2 columns. This is easy – if you don’t know how to code a table have a look at www.w3schools.com – a great online resource for all things HTML. I then insert the relevant infoboxes that I removed from the “thin” column into the right areas. At the same time, I make sure that my new table has stylesheet classes so that I can give it a pretty look…

Step 6 is to remove the right hand column from all my osCommerce pages – takes me 2 minutes to whizz through the 30 or so files to achieve this.

Step 7 is to amend my stylesheet to use “blue” and “yellow” colours, as this is the colour scheme that I decided I would like to use.

And here is what I ended up with, after about 1 hours work:

I understand that this post is not a full on tutorial about how to make code changes to exactly make things happen – I just wanted to bring you an overview of how I do things when I am making an osCommerce shop.

You can see in the screenshot that I have made further changes – I placed the language flags into the header area and swapped about the content of the page. I also swapped the images and text so that everything is “side by side” rather than underneath the image:

In a usual osCommerce set-up the text link is below the image – I think it looks better by the side 🙂

Clear Cart, then add a product automatically

Frank asks;

I’m trying to create a page that when someone visits; automatically empties the shopping cart and then adds one specific product, so the cart will only have that one item whenever the customer loads that page.

I thought this was an intelligent and interesting question – and as no-one else was helping, I decided to post it here in the blog rather than in the osCommerce Forum.

The Solution

My idea for this is to create a standalone page which you can advise your customers of – this page will simply do the following;

  • Clear the Cart Contents
  • Add a product to the Cart
  • Redirect to the Shopping Cart Page

That’s fairly straightforward and should just about cover what is needed.

How To Do It

1. Create your product – this will simply be the product that you want added to the Cart. Easy enough. Make a note of the Product ID – as we’ll need this in our “adding” code!

2. Create a new blank file called “addproduct.php” and save it into the same directory as your normal base files (index.php, product_info.php and all the rest). You can name it whatever you want really.

3. Add the following code to the file you created in Step 2:

[php]remove_all();
$cart->add_cart(28);
tep_redirect(tep_href_link(FILENAME_SHOPPING_CART, ”, ‘SSL’));
?>[/php]

In this example, the Product ID is “28” – you can see this in the second $cart line. Amend this number to whatever Product ID you are going to use.

4. Save the file. Visit in your browser and you will end up at your site Shopping Cart, with nothing other than Product ID 28 (or whatever ID you used!) in the Cart.

Easy as 123. Can I get a “hell yeah”?

What if your product has “options” (aka attributes)?

That’s a bit more problematic, but not overly so. What you will need to do is create your Product, with all it’s options. Then visit the product and add it to your Cart (making sure you selected the options that you wish your customers to automatically add) and view the resulting URL to get the options values… sounds complicated, so;

Let’s illustrate this with an example

In a standard install of osCommerce, Product ID #1 is a Matrox G200 MMS with a couple of options. Let’s say that that you wanted the following to be added to the cart automatically:

A “Matrox G200 MMS” with “Memory of 16Mb” and “Model Premium”. Select these options and press “add to cart” button. This will now show your Shopping Cart with the product and it’s options. Copy the link back to the product, and paste it somewhere – you will see something like this:

http://www.yoursite.com/product_info.php?products_id=1{4}3{3}6

Those numbers in brackets are the options that we selected! So…now you have this, you need to go back to the addproduct.php code and amend it slightly, like this:

[php]remove_all();
$cart->add_cart(1, 1, array(4 => 3, 3 => 6));
tep_redirect(tep_href_link(FILENAME_SHOPPING_CART, ”, ‘SSL’));
?>[/php]

Look at the difference in the 2nd $cart line – you can see a couple more parameters – they work like this: add_cart(PRODUCT ID, NUMBER OF PRODUCTS TO ADD, OPTIONS)

In the options part, you can plainly see a correlation between the URL we copied: product_info.php?products_id=1{4}3{3}6 and the option value: array(4 => 3, 3 => 6)

So, adding options make things slightly more complicated, but not overly so.

I have no doubt that in practice, this will need tweaking, but at least you now have a start in a way (maybe not even the best way!) to do this. Go to it!

Making Templates

David asks;

I am very interested in designing oscommerce templates and installing contributions. I dont know how the system works and would really like to learn. I have every adobe product so all I need to know is what files must be edited to change looks.. thanks

David, the best advice that I can give is to dive right in. Install osCommerce and play with the stylesheet, and the header [ includes/header.php ] and footer [ includes/footer.php ] files. It’s fairly easy to give a site a whole new look just by amending those files…

However, if you are wanting to start up a business design templates, then you will need to know a lot more about how osCommerce works in order to give your customers the support they will need. My advice is to learn osCommerce inside out, and then go to the official osCommerce forums and answer questions! By answering questions, you’ll learn a lot about osCommerce in a very short time.

In depth templating…

The main template seller is Template Monster – but TM templates are coded horribly by people who have no real knowledge of osCommerce. None of their templates use STS (Simple Template System) – the STS is a way to layout your shop by amending 1 HTML file and using “placeholders” to place the osCommerce tools. It works pretty well, but I prefer to get budding osCommerce users to delve into the codebase – as you’ll learn a lot.

I have two recommendations for you;

1. Designing osCommerce – this eBook takes you from the standard grey install to a shop that is nicer looking – it shows you how to make a deisgn without using the STS shortcut.

2. osCommerce STS Tutorial – this one does the same – but using the STS system to make a design.

Both of these eBooks are worth reading – they will give you a massive headstart over most osCommerce users, and the skills that you learn will enable you to take any design and integrate to osCommerce!

Good luck with osCommerce!

Information Pop Up – Cool Feature

I’ve been trying to make the front page of osCommerce a little less intimidating – it’s my opinion that a typical osCommerce store is too “busy”. What I wanted to do was find a way to have less information in the page, in other words make the page more bare.

A good way to do this is to remove some text! Well, that’s easy to do – just amend the welcome greeting etc. Then you can cut down on the number of infoboxes and maybe even remove a column (or both columns)…

It’s Web2.0 baby!

I wanted to go a step further so went on the hunt for a feature that I had seen – “information pop up bubbles”. Here’s what I came up with, which is full integrated into the “New Products for Month” box in the front page of osCommerce.

The actual look is much smoother than you see in the video – basically, the “name” and “price” and “view product” link are contained within the popup. I think it adds a lot of style to a store! What do you think?

What else could this be used for?

Well, it would be ultra simple (assuming you had a small/large image modification installed) to show the larger image in the pop-up. Or it could be used for the “Welcome Guest” greeting or anywhere else – maybe the “Your Previous Orders” box. The possibilities are endless.

Your Contact Details

Customers never want to get a hold of you – that’s why they buy online! Plus, if they have a complaint they have no way of getting in touch with you other than email, and we all know how easy to forget that form of communication is.

Just think, without them knowing who you are, where you are, or how to contact you they can never make returns, never make complaints, and never cause waves. It’s brilliant! You can claim customer satisfaction is 100%, because nobody could ever call you and tell you otherwise.

Sure, this might put off about 90% of your potential customers, but don’t let that stop you. That still leaves you 10% of the internet, and trust me, that darn sure is big. Make sure you ship your items from the shipping store or the post office so there is never a return address on the box too. When the credit card company calls you about a chargeback, make sure you tell them the customer never called and complained.

Of course, you should take all of that as tongue-in-cheek. In most countries, it is illegal not to have contact details on a business website. As a bare minimum, you should provide an email address, a physical address and the name of your business (or your name if you are a sole trader).

Just because people shop online does not mean they don’t want to know who they are dealing with. Make sure you post an address (even if it’s just a PO box – its better than nothing) and a phone number where people can call and at least leave you a message. This is all about customer service, and this is what turns single customers into repeat customers and word-of-mouth advocates of your site (that’s the best advertising money CAN’T buy).

Think about getting an (0)800 number. 800 numbers go a long way toward establishing yourself as a legitimate business. Call your customers back when they call. They will appreciate the personal service.

Invest in some nice company mailing labels for your packages – it builds brand recognition, makes you look more professional, and lets the customer know that you are a real company that can be trusted.

All makes sense doesn’t it? As I am sure most readers know, I see about 100 osCommerce sites per day and a good percentage of those have NO contact details on them – other than the standard osCommerce “contact us” page which has nothing but an email form on it. It is easy to show the name and address of your store in osCommerce, just use this code:

[php]echo STORE_NAME_ADDRESS;[/php]

After adding that code, if you see this in your site: “Store Name Address Country Phone” then you have not filled in your Store Name and Address in your Admin Area;

Most of this post is courtesy of my good friend Jason over at JC Commerce.

Finding Text that you want to change

osCommerce is set up a little differently to a “normal” website.  Put simply, this is because the “base pages” are the structure and “language pages” are pulled into the structure automatically.

  • index.php
  • product_info.php
  • and all the rest of the pages

are your “structure pages” – these should only be amended if you are adding contributions or changing the actual design of your site.

Your “language pages” reside 3 levels “down”;

  • /includes/languages/english/index.php
  • /includes/languages/english/product_info.php
  • /includes/languages/english/conditions.php
  • and so on…

Can you see the relationship between the “structure page” and the “language page” ?

  • conditions.php => /includes/languages/english/conditions.php
  • and so on…

In other words, the TEXT for “your “Terms and Conditions Page” (conditions.php) is all contained in the following file:  /includes/languages/english/conditions.php

The same for “contact_us.php”, “index.php” and so on.

However, there are a few exceptions!

You need to be aware of the fact that some TEXT is contained in MULTIPLE files (eg, the text in the footer of each page).  Using the above file by file method, this would mean that we would have to repeat the same information many times (for it to show on each individual page).  So we have one more OVERALL language page called “english.php”.  It is located at /includes/languages/english.php

SO…whenever you are looking for text to change, the first place that you should look is in the individual language page and then in the overall “english.php” page.

If you can remember that MOST text is either contained in the INDIVIDUAL language file (always inside /includes/languages/english/*.php) OR in the OVERALL language file (always /includes/languages/english.php) you won’t go far wrong.

NOTE:  If you don’t use “english”, then look in the folder that you do use, eg:  /includes/languages/german/*.php … and the OVERALL german file at /includes/languages/german.php

That wasn’t so difficult, eh ?

Random Products on Front Page

Almost daily, I see this question asked in the osCommerce Forum…

How can I have 9 random products showing in the the “New Products For…” box in the front page of my osCommerce site?

The answer is really, really simple – you need to change the SQL that selects the 9 products, like this;

Open up /includes/modules/new_products.php

Find:

[php]p.products_date_added desc[/php]

Change to:

[php]RAND()[/php]

Upload the file and refresh your index page. You’ll get 9 random products rather than the last 9 added/amended products. A better option in my opinion would be to add a “Featured Products” contribution, as I think that no customer wants to see Random Products.

OMG – what do i do now?

Mario asks;

I have absolutely no knowledge of wed site or design but I have the task to set up a website from scratch.  I have been introduced to OSCOMMERCE but I have no idea of what to do with it. So far i downloaded the program from the site, but I already know i shouldn’t have done it to my PC. Can you give me the bearing of what I am doing, or link me to a blog or site that could tell me from scratch of what to do?

Mario – to run osCommerce you do need to have certain things lined up…

  1. A domain name!  I’m guessing that you know where to get one from, if not, I suggest “Name Cheap” – com domains are less than $10.
  2. A hosting account.  There are so many hostinf compnaies out there that I wouldn’t know which to recommend.  Maybe “Hosting Zoom” – so long as the hosting account that you purchase has PHP and MySQL, osCommerce will work.
  3. Once you got both the above, link one to the other.  This is done by the host that you choose to use.  You then get email, webspace and so on.
  4. osCommerce.  You’ve already downloaded it which is the right thing to do.  You now need to unzip it and you will find that the unzipped folder structure contains a “catalog” folder.  Upload everything that is inside that folder to your website hosting account.
  5. Now set up a database for osCommerce to use.  To do this, follow the instructions given by the host that you choose.
  6. Now install osCommerce!

It’s all much easier than it sounds.  If you think that you won’t have any chance of getting it up and running, I have an osCommerce install guide that is only a few dollars.  Alternatively, I do offer an installation service, however this is obviously quite a lot more expensive than the eBook I linked to.

Well, for starters, get your domain name and host sorted out.  Once you’ve got that, please do come back and ask for more help if you need it.

Good luck!