Make your own free website on Tripod.com

Example code for adding items to

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

Our shop is a English language version of a Swedish shop and you can access their "Code Generator" by Clicking here We are not connected to this other company in any way and their shop files are freely distributed. We own the integration page with SECPay and have made some slight modifications to the original code. Our integration page is copyrighted to us and may not be used with any other payment gateway without our prior consent. The code generated by the Swedish Code Generator is, naturally, in Swedish. and will product code that needs to be altered. UK versions are below - ready to cut and paste.

If you are using Frontpage or a similar WYSIWYG edditor the following code examples 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), the programmers tool we like.

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

This version of NOTES relate to the FREE Simple Shop with order by E-Mail (no credit cards). For the Credit card version you will need to apply for a credit card merchant account and a credit card payment service agreement with Secpay  www.secpay.com using our form. Then tell us and we will send you the updated page you need and replacement instructions for FREE. An application form for a SECPay account (50 set-up fee) is available on our signup page at the following URL http://www.waw.co.uk/secpay_registration_form.htm our up-grade is only FREE if you use this form.

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

<FORM NAME="itemsform">

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.

Layouts...

...... Example 1

Product Name 100.00

<!--- Start product ID 0001 --->
<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> 

<!--- End product ID 0001 --->

Example 2

any product 100.00

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

<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> 

<!--- End product ID 0001 --->

Example 3

any product 100.00

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

<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)">
 <!--- End product ID 0001 --->

Example 4


any product
enter notes here

Price 100.00


!--- 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">

<!--- End product ID 0001 --->

Example 5


any product
notes go here

Price 100.00:-

Qty Option


 <!--- 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">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">

<!--- End product ID 0001 --->

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

******** Other modifications - required ***********

Page order.htm - You will need to edit the e-mail address the shop sends it's details to as follows; You will notice that we have include the FrontPage default form address - this is not required, a form name is.

Very near the top of the form you will see the following line - the part in BOLD is the e-mail address the shop will send the details to..... please change this to your own e-mail address (you will need to be in HTML mode if you are using FrontPage 2000).

<form action="mailto:simpleshop@waw.co.uk" ENCTYPE="text/plain" method=POST onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1">

An alternative would be to use a CGI script and enter the cgi-bin address into the area

<form METHOD="POST" ACTION="http://www.yourweb/cgi-bin/formmail.cgi" onsubmit="return FrontPage_Form1_Validator(this)" name="FrontPage_Form1">

If you want to use the shop in e-mail mode you may like to use a CGI script as this would allow you to send a message to both yourself and the purchaser check out http://www.cgi-resources.com/ for scripts...... There are several FREE script services you can use.

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 useing 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.

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.

If you would like our full instructions please visit www.waw.co.uk/program_request.htm There is a small charge for the user manual - because it took ages to write.....

websites@work all rights reserved.

Last update Wednesday 28 June 2000