Code example

This Shopping cart is intended for people who have a good basic (or advanced) knowledge of HTML and can understand a little JavaScript.

If you are using Frontpage or a similar WYSIWYG editor the following code examples below must be copied and pasted into notepad, then copied and pasted into your page in HTML edit mode. Do you use notepad a lot? if you do you might like this http://www.textpad.com/ it's very useful (Shareware). Texpad is the programmers tool we like.

Users of DreamWeaver will find that the some of the frame sets do not work and we suggest that you use Go Live, FrontPage or another HTML editor.

See the end of this page for additional 'required' modifications you need to know about.

Setting up products... In the code examples below

Items in Red are the product ID or SKU numbers, these MUST be unique and start with an character (A-Z). Once you have decided on the style you want to use (see the 5 examples below, and yes different styles may be used within the same shop) you will have to remember to change each and every occurrence of the product ID (5 places).

Items shown in Maroon relate to the displayed product name, this can be changed in the HTML code or in the editor.

Items shown in Blue are the product descriptions that your shop will store, please ensure that these provide sufficient information for you to recognise the product that is being ordered. This is the part that appears as the product in the order confirmation e-mail and on-line data storage (SECPay version).

Items in Green are the options (i.e. size, colour etc). These may be changed in either editor or HTML mode, you may add as many options as you need.

Important........... Every page that has products on it must be set-up as a form, put this code in your page before the 1st item

And end with </FORM>

Open up any of our product pages to see code examples.

All 'shop' pages other than the frame-set MUST be in a folder or they will not work.
Product layouts can be modified as required.
Be careful - the id attached to the BUTTON needs the 1add at the end, so DO NOT change that section of the code, only the part in RED.

<TR>
<TD><FONT SIZE="-1" FACE="Geneva,Arial">Product name</FONT></TD>
<INPUT NAME="id0001option" TYPE=Hidden VALUE="-">
<TD ALIGN="RIGHT">
<FONT SIZE="-1" FACE="Geneva,Arial">100.00</FONT></TD>
<TD><INPUT TYPE="value" NAME="id0001quant" VALUE="1" SIZE="3">
<INPUT TYPE="BUTTON" NAME="id00011add" VALUE="Add to Basket"
ONCLICK="top.menu.buyItem('any product','100.00', document.itemsform.id0001quant.value,
document.itemsform.id0001option.value)">
</TD></TR>

<TR>
<TD><FONT SIZE="-1" FACE="Geneva,Arial">any product</FONT></TD>
<TD><SELECT NAME="id0001option" SIZE="1">
<OPTION>option 1
<OPTION>option 2</SELECT></TD>
<TD ALIGN="RIGHT">
<FONT SIZE="-1" FACE="Geneva,Arial">100.00</FONT></TD>
<TD><INPUT TYPE="value" NAME="id0001quant" VALUE="1" SIZE="3"></TD>
<TD><INPUT TYPE="button" NAME="id0001add" VALUE="Add to basket"
onclick="top.menu.buyItem('any product','100.00',
document.itemsform.id0001quant.value,document.itemsform.id0001option.options[document.itemsform.id0001option.selectedIndex].text)";>
</TD></TR>

<TR ALIGN=Left VALIGN=Bottom>
<TD ALIGN="RIGHT">
<IMG SRC="images/pic1.gif" BORDER="0"></TD>
<TD ALIGN="LEFT"><FONT SIZE="-1" FACE="Geneva,Arial">any product</FONT></TD>
<INPUT NAME="id0001option" TYPE=Hidden VALUE="-">
<TD ALIGN="RIGHT">
<FONT SIZE="-1" FACE="Geneva,Arial">100.00</FONT></TD>
<TD><INPUT TYPE="TEXT" NAME="id0001quant" VALUE="1" SIZE="3"></TD>
<TD><INPUT TYPE="BUTTON" NAME="id0001add" VALUE="Add to Basket"
ONCLICK="top.menu.buyItem('any product','100.00', document.itemsform.id0001quant.value,
document.itemsform.id0001option.value)">

!--- Start product ID 0001 --->

<HR size=1 COLOR="#000000">
<TABLE BORDER=0 CELLSPACING=4 CELLPADDING=1>
<TR ALIGN=Left VALIGN=Bottom>
<TD><IMG SRC="images/pic1.gif" BORDER="0"></TD>
<TD><FONT SIZE="4" FACE="Geneva,Arial"><B>any product</B></FONT><BR>
<FONT SIZE="-1" FACE="Geneva,Arial">
enter notes here<P>
<B>Pris</B> 100.00<P>
<INPUT TYPE="value" NAME="id0001quant" VALUE="1" SIZE=3>
<INPUT NAME="id0001option" TYPE=Hidden VALUE="-">
<INPUT TYPE="button" NAME="id0001add" VALUE="Add to Basket"
onclick="top.menu.buyItem('any product','100.00', document.itemsform.id0001quant.value,
document.itemsform.id0001option.value)">
</TD></TR>
</TABLE>
<HR size=1 COLOR="#000000">

<HR size=1 COLOR="#000000">
<TABLE BORDER=0 CELLSPACING=4 CELLPADDING=1>
<TR ALIGN=Left VALIGN=Bottom>
<TD><IMG SRC=images/pic1.gif BORDER="0"></TD>
<TD><FONT SIZE="4" FACE="Geneva,Arial"><B>any product</B></FONT><BR>
<FONT SIZE="-1" FACE="Geneva,Arial">notes go here<P>
<B>Price</B> 100.00:-</FONT><P>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
<TR><TH><FONT SIZE="-1" FACE="Geneva,Arial">Qty<FONT></TH>
<TH align=middle>
<FONT SIZE="-1" FACE="Geneva,Arial">Option</FONT></TH></TR>
<TR><TD><INPUT TYPE="value" NAME="id0001quant" VALUE="1" SIZE=3></TD>
<TD><SELECT name="id0001option">
<OPTION>option 1
<OPTION>option 2
</SELECT></TD><P>
<TD><INPUT TYPE="button" NAME="id0001add" VALUE="Add to basket"
onclick="top.menu.buyItem('any product','100.00',
document.itemsform.id0001quant.value,document.itemsform.id0001option.options[document.itemsform.id0001option.selectedIndex].text)";>
</TD></TR></TABLE></TABLE>
<HR size=1 COLOR="#000000">

Please note..... the <hr> tags are not required, and may be modified / removed as required.

Page order.htm - You will need to edit the e-mail address the shop sends it's details to please refer to the README file for instructions (included in the .zip)

Our CGI script is hosted - you do not need to change the script URL at the top of the form (order.htm).

Please note:
In our example the shop areas have been set up in folders, please add folders as required (or re-name) and if you are using shop-1 you will need to manually set the <option> box in the file top.htm to direct the drop down menu to the correct pages.

Currency symbol:
Depending on which version of the shop you have downloaded the page names may vary but include, basket.htm and change.htm and order.htm - open these pages and search for the Ł symbol, replace it as required.

Good Luck and please tell us the URL of any site you set-up using this program so we can list it on our website.