Shopable - How it Works
This manual follows through a full shopping sequence, from pressing the order button,
to confirming the order. It is split into the following sections:
Ordering an Item
The order function on each order page first
combines all it's arguments into one string. Then it determines if Shopable is
already open or not. If it is, the function calls Shopable's addItem function, passing
the new item. If not, it opens a window or frame for Shopable and passes the new item in the search string
(this is because the addItem function is still being loaded). When the window or frame
finishes loading it will process this waiting item. (See the order pages manual
for how to specify whether Shopable opens in a new window or just a frame.)
Loading the Shop
This manual will now progress through the scenario of an item being added when the shop window
is not already open. It assumes that Shopable opens a new window for itself (as in the demo).
The first file loaded when Shopable is called upon is index.html. This creates
a frameset, which loads loading.html.
A frameset is necessary because all functions and variables will be owned by index.html
(the top level window), so it must stay open. The shopping basket itself is displayed
in the first frame, and the second invisible frame is used for further loading. index.html
is also the place to put messages for browsers that don't support frames or Javascript.
index.html places loading.html in it's first frame. loading.html
just displays a loading message, and then loads currency.html into the lower invisible frame.
Settings and Functions
currency.html sets currency information (automatically drawing in information
from an external site), and then loads settings.html into the same invisible frame.
settings.html is the biggest and most complicated file in Shopable. It
doesn't display anything, but does set lots of variables and declare loads of functions.
The first section of this file is explained in the settings manual,
and the next section is explained in the shipping manual.
Halfway down the file, the functions are declared (they will be explained in this manual
in the order in which they are used). After the declarations,
settings.html calls createCommonStrings() which forms strings for
the basket header, buttons, and the customer table. These are created once at the beginning
(and every time the language is changed)
so that the shop can act more efficiently, rather than spending time constantly manipulating
strings. Then settings.html reads the cookie and fills up the mainFrame.basket
(mainFrame always refers to the window or frame containing the index page) and
mainFrame.customer with previous basket and cookie information if available (and if
requested in the settings file). Finally, settings.html adds any waiting item
(waiting since the order button was pressed), using the addItem function. It then
sets the loaded variable to true (which is used by the order pages to recognise
that the shop window is open).
Adding an Item
The addItem function is eventually called to add the item (this applies to when the
shop window is already open, and when it is has just been opened). addItem checks
that the item exists, and if so calls createItem. createItem creates an
item object, splits the item string back into an array of variables, and then
adds the properties (such as price, quantity, options, see the
order pages manual for further discussion) to the object.
Then it creates HTML strings for the first part of the item's table row which is
displayed in the shopping basket (the description and options).
Then createItem calls updateQuantity which finishes the item's table row
with the current quantity, and computes weight, price, and tax
(all items have tax computed, this might not be used however if they are ordering
from a country where taxes needn't be charged). (These strings
are created in advance for efficiency. Strings are formed
for the item for the shopping basket, the confirmation screen, and any emails which
might be sent to the customer and shop owner when the order is completed.)
createItem returns the item object, and it is placed by addItem in the
top.basket object according to the order in which it was added (the items are indexed by number).
Lastly, addItem calls refreshBasket (whether or not a new item was added,
so this takes care of the case when a shopper just wants to view their basket), which
places basket.html in the top frame.
Showing the Basket
basket.html is then loaded into the top (main) frame, on top of the loading
message. It uses a stylesheet to determine it's display. It first calls
setBasketCookie which stores the basket into a cookie on the browser's computer (by
calling it here, we guarantee that the cookie is always up to date). basket.html
then loops through the items, building a table (from the strings set by createItem
and updateQuantity), and computing the total price, tax, and weight. It then prints
out the page's header (including navigation buttons), and (if there are any items to
display) the shopping basket header, and contents. showTotals is called to
show the subtotal (and shipping, tax, and total if they can be computed). Then it prints
out some instructions, and the next move is up to the shopper. One thing they can do
is change quantities or remove an item.
Updating and Removing Items
basket.html contains a form whose action is the same page (basket.html).
Each item in the basket has a box for changing the quantity and a remove button, and it's
own Javascript for making the change. When a quantity is changed (or remove button pressed)
updateQuantity is called, passing the item's own object, along with the new
quantity, as arguments. (The item refers to itself using the index number it was
added with, such as top.basket[3] for the third item added to basket.)
updateQunatity performs as earlier, updating text strings, and recomputing
the item's weight, price, and tax. It also checks that the quantity is a number, and that
it meets the requested minimum and incremental value (and rounds it up if needed).
Then, when the form on basket.html is submitted
(either by pressing the update button, or immediately after a remove button is pressed),
basket.html shows the changed text strings. In this manner, only the items whose
quantities are changed have their strings recomputed. Note that items are removed by
setting their quantity to zero. This means that the object still exists, and therefore
there won't be any errors when looping through the basket the next time. At this stage,
if the shopper presses Keep Shopping, then focus will return to the window which
first started up Shopable, and if they click on an item in the shopping basket, that
item's order page will be loaded into the original window.
The shopper can also press the Check Out button, which goes to the customer details page.
Customer Details
customer.html displays some buttons, some instructions, and a form for all the
customer details, including the billing and shipping country. This whole table was
created (with empty form elements) by the createCommonStrings function
and is just recalled from memory at
this time. Each form element includes some Javascript which updates the underlying
mainFrame.customer object whenever something changes.
customer.html also sets the onUnload event to save the customer
details to a cookie, so that whenever the user fills something in and then goes to
another page, the details are saved (however this method is not 100% reliable). At the
bottom of the page, the customer's current information is put into the form.
When the Confirm Order button is pressed, the function checkCustomer is
called, this checks that all the required information is present, and then proceeds to the
confirmation page. Note that if the user fills in their billing and shipping countries
(or just the billing country with the same as billing box is checked) and
then goes back to the basket, the showTotals function will be able to compute
their shipping and tax.
Confirmation
confirm.html prints the basket but without any form elements (it again uses
text strings stored within each item object). Then it prints the customer details,
shows the terms and conditions, and (if there was anything in the basket), a
confirmation button. This button could say I Agree, to confirm that the user
has read the terms and conditions. The user then goes to the payment page.
Payment
There are currently two working payment options: mailto and formmail. There is also
a holding page (payment_other.html) for future implementations. The
payment_mailto.html sequence of pages use the browser's built-in emailing
functions (by submitting a form to a "mailto" URL) to send the order (along with the
customer's credit card details) to the shop
owner, and a confirmation to the customer. The payment_formmail.html sequence
of pages send the emails using a formmail script. Both of these will complete the order
but both are insecure (the customer's credit card details will be sent over the Internet
in plain text) and both require the merchant to have the facilities to take payment from
credit cards. If Shopable is put on a secure server, it may secure these methods
but a far better way would be integration with an online
bank, where payment is taken securely over the Internet, without the shop owner
ever needing to know the customer's credit card details.
|