: Online Store How-To

The Candy Store

Speedsoft's On-Line Store Test Site, have fun.

Here's the concept: The customer clicks on a button to order one of your products. The product is added to the customer's "shopping cart" and they are shown the contents of the "shopping cart". Once the customer is done shopping at your site, they "checkout". At this point they are prompted for a shipping method from your pre-defined list of shipping rates. Then they are required to enter information such as their shipping address and credit card information. From here they are shown an invoice and given the opportunity to go back and make changes or send the invoice to you.

The store works from data taken directly from your web page and your site configuration file. The first thing you should do after setting up your store with Speedsoft is customize your store configuration. To do this, enter your site name below and press "Edit Site".

Here is The Candy Store User Configuration Page.

Don't worry if you aren't sure about what you should enter in some of the fields, you can always go back and change them. The changes are immediate on your store.

The single biggest reason to use the Speedsoft On-Line Store is customization. You can have your products listed how you want. This documentation will cover the major ways to enter your products, but you'll probably find one that works best for you.

Here is the most straightforward way of having a product on your web page. This is the HTML code that would be on your web page.

Example 1:

<form action="/ssstore/cart.html" method=post>
<input type=hidden name="site" value="test">
<input type=hidden name="ID" value="C101-A">
<input type=hidden name="name" value="Gumball Machine">
<input type=hidden name="price" value="25.99">
<input type=submit value="Order">
</form>

Look at Example 1

When the customer clicks on the Order button, an order for one Gumball Machine, product ID C101-A, will be added to their shopping cart.

There are four "fields" that must be present on any order: Site Name, Product ID, Product Name, and Price Per Unit.

• Site Name: This is the username of the account which has control over the store setup.
• Product ID: Each one of your products needs an unique ID. This can be up to 12 characters long and may be composed of letters, numbers, and dashes. This is the single most important field, as the store uses this product ID to keep track of the products ordered.
• Product Name: This is the name of the product.
• Price Per Unit: How much does one of these products cost? This is in whatever currency you are using, so do not include a dollar sign ($) or other notation here, just numbers. Your currency symbol is defined in the site configuration file.

Notice that all of these fields fall between the <form></form> tags. This is the only way the store will be able to access these fields, so make sure the <form> tags are there.

In addition to the three required fields, there are three other optional fields: Quantity, Shipping, and Credit Card Surcharge.

• Quantity: How many of this product will be added to the shopping cart? This is useful if you want to either force or allow your customer to choose a certain number of products at a time rather than the default of 1.
• Shipping: This can be used in place of or as a supplement to the shipping methods you have set up with your site configuration. If you want all of your products to have individual shipping costs, set your Site Configuration shipping methods to $0.00 and specify a shipping cost for each product with this field in the HTML. If you want to use both methods, the shipping price you specify here will be added to to the shipping cost from your shipping methods in the Site Configuration.
• Credit Card Surcharge: Do you add a surcharge for customers using a credit card to purchase this product? Surcharges are applied on a product-by-product basis.

So, now let's look at the Gumball Machine example again with these additions. Now we will force the customer to order two gumball machines at once, charge them $10.00 for shipping and tack on a surcharge if they use a credit card. (The Product ID is different now, so you can see the difference in the two products on the Candy Store test pages checkout.)

Example 2:

<form action="/ssstore/cart.html" method=post>
<input type=hidden name="site" value="test">
<input type=hidden name="ID" value="C101-B">
<input type=hidden name="name" value="Gumball Machine">
<input type=hidden name="price" value="25.99">
<input type=hidden name="quantity" value="2">
<input type=hidden name="shipping" value="10.00">
<input type=hidden name="surcharge" value="1">
<input type=submit value="Order">
</form>

Look at Example 2

Here's where we start to have fun. Let's allow the customer to put in how many gumball machines they want to order at once. Modify the "quantity" input field so that it is not hidden:

Example 3:

was:
<input type=hidden name="quantity" value="2">
now is:
<input name="quantity" size=3 maxlength=2 value=1>

Look at Example 3

Notice we did not change the Product ID for Example 3, so the amount that you order now is added to the two you ordered in Example 2.

Moving on, let's use an image for the order button, rather than the old boring Submit-style button:

Example 4:

was:
<input type=submit value="Order">
now is:
<input type=image alt="Order"
src="http://www.speedsoft.com/candy/order3.gif">

Look at Example 4

Adding additional fields to your order

If you want to add fields to specify additional details about your order, we have made available the color and size fields.  You would implement them in an HTML select field like so:

<select name="C101:color">
<option>Red</option>
<option>Green</option>
</select>

Where C101 might be the item identifier of this particular item.

Add a Link to View Cart Contents

Create a link or graphic link to the URL below. "SOMEURL" is where you want the link named "Shop Some More" on the shopping cart page to point to. For example you might put "&back=/tshirts/small.html".

Link to "/store/viewcart.pl?site=YOURSITENAME&back=SOMEURL"

Add a Link to Checkout

Link to "/store/viewcart.pl?site=YOURSITENAME&back=SOMEURL#checkout"

That's all there is to it for a basic product order. The On-Line Store allows more complex order setups. For the next tutorial on this, see On-Line Shopping How To II (No, it's not French, just "To II").