| |
|
|
...
 |
|
|
|
|
|
|
 |
 Our
WhigShop™ homepage ...
Our WhigShop™ Add-on
for our "Do-It-All" WhigScript™
is an easy to configure and surprisingly powerful little javascript
shopping cart that integrates smoothly with our core WhigScript™.
It is almost as easy
to configure too!
Just set up your page
according to the simple instructions below, add in the variables
for your product categories and items (see "Step 6"
below), and you have an elegant, total e-Commerce solution that
will run on even the most basic of web servers - without the
need to purchase your own expensive "back-end" hardware
and software!
You will receive your
customer's order and details in an easy to read email, sent
either via any default form submit action (such as any CGI mailer
- try here),
or using our WhigMail™
Add-on to generate a custom-formatted email based on a "mailto:"
link.
WhigShop™ is FREE
to download for personal AND commercial use (see the foot of
this page for the full copyright details). Before you use this
script, you must first install our core WhigScript™
into your pages. Then follow these simple steps to use this
javascript in your own web page(s):
| WhigShop™
Setup Instructions. |
| Step 1: |
You can include the WhigShop™
script into your own page directly, between
the <HEAD> and <BODY> tags
in your HTML page like this:
Alternatively, you can save the script
as an external file by adding an external
script link like this:
The latter option is recommended for 3
reasons. Firstly, this means that your
user's browser only ever needs to download
the approximately 7Kb script file once
into its cache, and not each time your
user visits another of your pages that
utilises this script (every little bit
helps, right?). Second, you can then place
this file in a hidden directory on your
web server (a basic security technique).
Lastly, and most importantly, IT IS EASIER! |
| Step 2: |
Setup your shop page with
a separate form for each category of item
you wish to sell. There can be any number
of shop categories, but each form must
be uniquely named and include the string
"service" somewhere within it's
name and must finish with a number corresponding
to it's list of available products in
the "productArray" (see Step
6). The <FORM> tag should look like
this:
|
| Step 3: |
Each shop category (i.e.
each "service" form) must have
the following five elements, but they
can be in any order:
| Element |
Specific
Information |
| wanted |
This
is a checkbox
element that must be checked to
verify that the user wishes to order
from this section. It must include
the string "iswanted"
somewhere within it's name. There
is another reason for its' inclusion,
but this will be explained soon. |
| quantity |
Self-explanatory.
Can be a text/textarea
element or a hidden
one, depending on the type of product
category (explained later). Can
only be changed by the user to an
integer > "1" by the
user or defaults back to "1".
This element must include the string
"qty"
somewhere within it's name. |
| code |
The
text/textarea/hidden
element where the selected product's
code is entered by the user. Only
a valid, case-independent code is
accepted, or the default element
value is returned. This element
must include the string "code"
somewhere within it's name. |
| cost |
The
text/textarea/hidden
element where the selected product's
single-item cost is displayed. The
value, if displayed, cannot be changed
by the user. You must flag this
element by including the string
"cost"
somewhere within it's name. |
| total |
A
read-only
text/textarea/hidden
element where the subtotal for this
shop category is displayed (cost x qty).
This element must include the string
"total"
somewhere within it's name. |
Referring to your product list (see Step
6), you then setup the element types for
this form in either of two ways. The first
is for a shop category where there is
only a single item to purchase - make
all elements hidden except the "iswanted"
and "total" ones, and all your
user has to do to purchase is check the
box! It will look like this:
The second way to set up your shop category
form is for when there are more than one
product available in that category. Make
all elements visible (i.e. checkboxes
or text/textareas), and then all your
user has to do to purchase is to check
the box and enter a valid product code
(show these on your page). You can leave
the "cost" element hidden if
you like, but it provides valuable feedback
for your user. Set up in this way, the
form will look something like this:
|
| Step 4: |
Add an "onChange"
event to every form element to call the
"checkOut" shop function. It
should look like this in your code:
As an added feature, any default values
in your forms'
text or text-area
elements can be cleared on entry (and
restored on reset or exit) by adding this
"onFocus" event calling one
of the basic WhigScript™ functions:
Note that if you wish to use
this feature, you MUST use the "onBlur"
event handler for the checkOut function
call instead! See the instructions
for our WhigScript™
for more on this, but it should look like:
|
| Step 5: |
The total cost to your
user over all shop categories is displayed
by including another form with the string
"final" somewhere within its'
name. Include a text element within your
form with the string "total"
somewhere within it's name. There can
be any number of "Final Total"
form/box combinations shown around your
page (keep the names unique, though),
as they will all be automatically updated
whenever a user (successfully) changes
a shop value. They should look something
like this when you are done:
Note: the onChange event
is also required for this element. This
makes sure that your user cannot change
the final totals!
Oh, another thing:
Remember that
you are working WITH the core WhigScript™,
so adding a "*R" to the
end of your "Final Total"
element's name will mean that a
valid order MUST to be completed
before the user can submit the page
details to you - cool!
This technique can also be used
to make one (or more) of your products
compulsory to purchase and the others'
optional by again just adding the
"*R" flag to the end of
that product category's "total"
element name - even
cooler! |
|
| Step 6: |
Lastly, you now need to
provide the script with your list of shop
products per category. This is done by
editing the "productArray" variables
at the start of the WhigShop™ script.
They should look like this:
Individual products in each category require
only two entries each - the product code
and the product cost per item. They are
listed in couplets within each product
category ("CODE1", 25, "CODE2",
35, etc.). Note that in the above example
the first 2 product categories include
only a single item, as might be the case
for a set company service with a set price.
In this situation, the code is irrelevant,
but the entry in the product variables
must include the string "default"
somewhere.
Additionally, please note that the numbering
of the "productArray" starts
from zero (i.e. productArray[0]),
as this is the way javascript counts.
A matching "service" form name
for items listed in productArray[0] would
therefore be "service1", get
it? |
| Step 7: |
All done! Now just upload
your pages and reap the profits! |
|
| Version:
1.0
Updated:
02-Oct-01 |
|
|
| |
|
  |
Now why not check out
our additional "plug-ins" for our WhigScript™:
|
Other WhigScript™ add-ons: |
| |
 |
WhigCredit™
- a credit card validator. |
| |
|
WhigMail™
- the email solution. |
| Our
other scripts: |
| |
|
WhigMCQ™
- a multi-choice exam tool. |
The legal stuff:
|
|
|
|
 |
|
|
 |
|
|
 |
|
|
| |
|
|
 |
|
|
| |
|
|
| |
|
|
Whigwham
Web Services. Web Developers for the medical, industrial and commercial sectors,
medicine, industry, commerce, brisbane, Australia, queensland, MCSE, Doctor,
intranet, internet, design, hosting, database, specialists. Whigwham Web Services.
Web Developers for the medical, industrial and commercial sectors, medicine,
industry, commerce, brisbane, Australia, queensland, MCSE, Doctor, intranet,
internet, design, hosting, database, specialists. Whigwham Web Services. Web
Developers for the medical, industrial and commercial sectors, medicine, industry,
commerce, brisbane, Australia, queensland, MCSE, Doctor, intranet, internet,
design, hosting, database, specialists. Whigwham Web Services. Web Developers
for the medical, industrial and commercial sectors, medicine, industry, commerce,
brisbane, Australia, queensland, MCSE, Doctor, intranet, internet, design, hosting,
database, specialists. Whigwham Web Services. Web Developers for the medical,
industrial and commercial sectors, medicine, industry, commerce, brisbane, Australia,
queensland, MCSE, Doctor, intranet, internet, design, hosting, database, specialists.
Thank you.
Right-click
and select "Save As" to save this
file to a location on your hard-drive.
