Wednesday, August 29, 2007

How to make a Credit Card Shopping Cart Website

It's every budding web designers dream. But the novice web developer soon discovers there's a LOT more to designing an online shop and shopping cart than just thinking up the commission you'll make on all your clients products!

Where do I start?

The answer to that depends on the answer to this...

How much do you know?
Or more to the point, how much DON'T you know about web design and development?
Well before your ears get giddy and your fingers fail, take heart - it's easier than you think. It always is, if you have an overview. It's the first step in teaching anything - take the learner from what they already know and show them around the corner - and it's more than crucial to designing websites that sell products online.

The overview of getting started:

We'll take these one at a time in future posts,
but for now, find where you fit in:

You'll need to know how to design some HTML.
That's a given, and won't be discussed here (not till later posts, anyway). There are a zillion HTML tutorials but we'll need to sort them out. So assuming you can put images and text on a web page and make them look pretty enough for someone to buy them, the next step is...

You'll need to be able to make HTML forms.
These drove the interactive nature of the web, and took the internet from a digital newspaper with glossy ads, to an online shop with all the choices. Again, easy to learn. And that would be enough if you only had three products. But more products and more choices mean eventually you have to...

Take HTML form data across multiple pages.
And that's the hard bit. When the submit button or submit image of a HTML form is clicked, the form data (all the choices the customer made) get sent to the server - and need to be processed by a script on the server - not Javascript, because that isn't on the server, it's on the browser, on the user's computer. I remember banging my head on my keyboard like the pianist from Sesame Street for weeks on end - until 3am one morning and the sun rose on what would be the dawning of a new day for simple but effective website design and development for intermediate programmers. I'll share my 3am secret solution later. (No cookies, no server side scripts like PHP or ASP needed, just good old fashioned innovation!) First, you're going to need to...

Manipulate form input elements.
That is, pre-select a checkbox or drop-down list or radio button in the forms, disable certain choices or even make them disappear. This could apply either on the one page (like if the customer chooses the Blue color and the Blue is only available in Medium and Large, not Small) or on successive pages of the website (like if the customer has already typed in their name and you want the next page to start by saying 'Thanks Paul...').

Insert products into the online shop from a database.
Not long after that 3am morning I found myself hand-coding a clients website with over 50 products, writing the separate HTML for each one! Craaazzziiinnneeesss, now that I look back. Sure, there was copy and paste, but as you know, even changing the unique information for each product is time consuming. What's worse is, it allowed errors to creep into my 'template' product layout. And then can you imagine when the client asks to edit that template layout? Sure, you can use 'replace all' if they wanted to change 'red' text to 'green' text but it wasn't always that easy. What you want to be able to do is insert products into a database and manipulate the database as often as you want and as easily as tying up your shoelaces (on velcro shoes that is). That means you can edit prices, descriptions, names, categories, choices, etc etc. Then you want to be able to write just one piece of HTML that is your product layout, template style, and if your client wants to change the layout - its no sweat, you just change the template, once. Buddabing!

Have your client upload the product information themselves!
Now you've swum this far across the English Channel, you don't want to turn around and go back... take it to the other side! This is what's known as Content Management, or Content Managed Websites - the most complex of which allow the client to change everything right down to the color of the corners and the image behind their logo... but online shops where the owner (your client) can upload products themselves, including images, prices and descriptions are not too far down the information superhighway track.

Any questions?

The next post will be entitled:

Credit Card Shopping Cart Website - The tools you'll need.

Labels: , , , , , , , , , , , , , , ,

Bookmark and Share