Help Topics

Price Options Script


Welcome
Setup

Form Edit

  • Drop Down Lists
  • Text Boxes
  • Check Boxes
  • Radio Buttons
  • Hidden Field
  • Submit Button
  • Reset Button
  • Required Fields

Mal's Cart Settings

  • Mal's Required Fields
  • All Fields

Other Details

  • Currencies
  • Delimiters/Separators
  • JavaScript File

CSS Styles

  • CSS Default Styles
  • Other Styles

Technical Information

  • Troubleshooting
  • Contact Support

For further help and support please visit www.orderhistorysoftware.com

Welcome to Help

This area will help you to use the Price Options Script . Use the navigation links on the left of the screen for further information on that feature.

New User? Start Here >>

Note: this help file is for Version 3.0 of the script

If you are experiencing an error then please contact us using this page

Setup

IMPORTANT! Follow these steps when setting-up the script for the first time:

There are at least three steps needed to add Price Options Script functionality to your web site. You will need all the pages of code sent to you via email or downloaded to make it work correctly. If you have deleted these pages then please contact us .

The pos_example.htm page is a fully working example pages of the script. Look at the code to see how the script is set-up (open in e.g. Internet Explorer and go to 'View > Source').

Step 1:

Save the mm_pos.js file to the same folder on your web site as the shopping page using the script (this can later be changed)

Step 2:

Open the pos_setup.htm page in e.g. Notepad or Dreamweaver. Copy the code in the Head section code and paste into a shopping page where you want the script to be, making sure it is pasted directly before the </head> tag at the top of the page e.g.

<html>
<head>
<title>My Shopping Page</title>
<!--PRICE OPTIONS HEAD - START-->
<style type="text/css"> .......
</script>
<!--PRICE OPTIONS HEAD - END-->
</head>

<body>
</body>
</html>

Step 3:

Next you need to create the form that the script will use to create prices etc. and pass the products onto Mal's Cart.

Copy the code from the Form section and paste into the shopping page between <body> and </body> where you want the form to be e.g.

<body>
<!--PRICE OPTIONS FORM - START-->
<form onSub ......
......
</form>
<!--PRICE OPTIONS FORM - END-->
</body>

The form is now ready to be edited to sell your products. Next: edit your form >>

^top

Drop Down Lists/ Select Lists

The code for a typical drop down list looks like

<select name="productoption" onChange="CalcPrice(this.form)">
<option value="40 GB Hard Drive:60.50" selected>40 GB Hard Drive</option>
<option value="50 GB Hard Drive:70.00">50 GB Hard Drive</option>
<option value="60 GB Hard Drive:80.00">60 GB Hard Drive</option>
<option value="70 GB Hard Drive:90.00">70 GB Hard Drive</option>
</select>

  • name="productoption"
    For a dropdown list to be added to the shopping cart and also affect the price it must begin with the word product. It can then be called whatever you like but typically it would be productoption
  • onChange="CalcPrice(this.form)"
    This is the Javascript code that dynamically changes the price when the user select an option
  • option value="Option Name:Price:Units:SCode"
    Each option value is divided into 1 to 4 elements depending on your requirements

    Option Name - e.g. the product name (required)
    Price - e.g. 10.00 For no-additional cost options either use 0.00 or leave blank (if no further option elements are required)
    Units - e.g. 5 or 0. Used with Mals shipping options
    Scode - e.g. ABC123. Used with Mals scode options (stock code)

Here is an example of the most simple form of drop down list.

<select name="productoption" onChange="CalcPrice(this.form)">
<option value="">No option </option>
<option value="Option 1:10.00">Option 1 (+10.00) </option>
<option value="Option 2:20.00">Option 2 (+20.00) </option>
<option value="Option 3:30.00">Option 3 (+30.00) </option>
</select>

Here is an example of a more advanced drop down list with full options.

<select name="productoption" onChange="CalcPrice(this.form)">
<option value="">No option </option>
<option value="Option 1:10.00:5:TEST1">Option 1 (+10.00) </option>
<option value="Option 2:20.00:10:TEST2">Option 2 (+20.00) </option>
<option value="Option 3:30.00:15:TEST3">Option 3 (+30.00) </option>
</select>

^top

Text Boxes

The code for a typical textbox looks like

<input type="text" name="productOption" / >

  • name="productOption"
    Each textbox must have the word product at the start followed by the option name e.g. productTest. The Test part will be shown in the cart beside the value that the visitor types into the text box

    e.g Test - This is a test

You can also use a textarea for multi-line text boxes.

<textarea name="productOption"></textarea>

Note: for the option name to be shown beside the textbox you must ensure that in the mm_pos.js file the following code is set to true

var ShowTextboxName = true;

^top

Check Boxes/Tick Boxes

The code for a typical check box looks like

<input name="productoption" type="checkbox" value="Option Name:10.00" onClick="CalcPrice(this.form)" / >

  • name="productoption"
    For a check box to be added to the shopping cart and also affect the price it must begin with the word product. It can then be called whatever you like but typically it would be productoption
  • onChange="CalcPrice(this.form)"
    This is the Javascript code that dynamically changes the price when the user select an option
  • value="Option Name:Price:Units:SCode"
    Each option value is divided into 1 to 4 elements depending on your requirements

    Option Name - e.g. the product name (required)
    Price - e.g. 10.00 For no-additional cost options either use 0.00 or leave blank (if no further option elements are required)
    Units - e.g. 5 or 0. Used with Mals shipping options
    Scode - e.g. ABC123. Used with Mals scode options (stock code)
^top

Radio Buttons

The code for a typical radio button looks like

<input name="productOptionName" type="radio" value="Option Name:10.00" onClick="CalcPrice(this.form)" / > Option 1

Option 1

  • name="productOptionName"
    For a radio button value to be added to the shopping cart and also affect the price it must begin with the word product. It can then be called whatever you like but typically it would be productOptionName where OptionName is the name of the radio button. Remember that radio buttons need the same name to work together. See next example below
  • onChange="CalcPrice(this.form)"
    This is the Javascript code that dynamically changes the price when the user select an option
  • value="Option Name:Price:Units:SCode"
    Each option value is divided into 1 to 4 elements depending on your requirements

    Option Name - e.g. the product name (required)
    Price - e.g. 10.00 For no-additional cost options either use 0.00 or leave blank (if no further option elements are required)
    Units - e.g. 5 or 0. Used with Mals shipping options
    Scode - e.g. ABC123. Used with Mals scode options (stock code)

Here's another example with three radio buttons

<input name="productTest" type="radio" value="Test 1 :10.00" onClick="CalcPrice(this.form)" / > Option 1 <br />
<input name="productTest" type="radio" value="Test 2 :20.00" onClick="CalcPrice(this.form)" / > Option 2 <br />
<input name="productTest" type="radio" value="Test 3 :30.00" onClick="CalcPrice(this.form)" / > Option 3

Option 1
Option 2
Option 3

^top

Hidden Fields

You can hide fields that have an impact on the price/cart values but will stay hidden to the visitor. The code for a typical radio button looks like

<input name="productoption" type="hidden" value="Option Name:10.00" / >

  • name="productoption"
    For a hidden form value to be added to the shopping cart and also affect the price it must begin with the word product. It can then be called whatever you like but typically it would be productoption
  • value="Option Name:Price:Units:SCode"
    Each option value is divided into 1 to 4 elements depending on your requirements

    Option Name - e.g. the product name (required)
    Price - e.g. 10.00 For no-additional cost options either use 0.00 or leave blank (if no further option elements are required)
    Units - e.g. 5 or 0. Used with Mals shipping options
    Scode - e.g. ABC123. Used with Mals scode options (stock code)
^top

Submit/Reset Buttons

The code for a typical submit button looks like

<input name="Submit" type="submit" value="Add To Cart" / >

The code for a typical reset button looks like

<input name="Reset" type="button" value="Reset" onClick="this.form.reset(); CalcPrice(this.form);" / >

^top

Required Fields

For some fields you will want the visitor to enter something. You simply list the exact name of the fields (case sensitive) separated by a comma in a hidden field called Required

<input name="Required" type="hidden" value="productOptionA,productOptionB,productOptionX" / >

  • value="productOptionA,productOptionB,productOptionX"
    Each field that is required is listed here with a comma , between each one

Note: to change the alert message that shows if a visitor tries to add to cart and the required field value is missing you must ensure that in the mm_pos.js file the following code is set to the message you want.

var RequiredMessage = "Please enter all required information";

^top

Mal's Cart Form Elements - Required

There are several other elements in the script that are required to make it interact with Mal's Shopping Cart:

  1. ... action="http://ww5.aitsafe.com/cf/add.cfm" ...
    replace the 5 with the number of your Mal's server (this will be sent to you via email when you sign up with Mals Shopping Cart)

  2. <input type="hidden" name="userid" value="xxxxxxx">
    <input type="hidden" name="return" value="">
    <input type="hidden" name="price" value="">
    <input type="hidden" name="product" value="">
    <input type="hidden" name="units" value="">
    <input type="hidden" name="scode" value="">

    - Replace xxxxxx with your userid e.g. A392383
    - Use the "return" value for the url/web address you wish customers to 'Continue Shopping' to after adding this product to the cart e.g. www.orderhistorysoftware.com
    - Do not enter any values in the "price" and "product" and "units" and "scode" tags. However, if you want to have a base or default price for the product you can put a number in price or a default product in the product field.
    - You can also add other hidden form tags here. See this section for more details

  3. <select name="qty" onChange="PriceCalc(this.form)">
    <option value="1" selected>1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>



    The quantity field. You can add more quantities to this drop-down list if you wish or change it to an input text field. Please note, if you do this and the customer types a letter instead of a number the script will not work so you will need to put some Javascript to ensure this happens.

  4. <input type="text" name="CurrencyMessage" readonly="readonly" class="Transparent" / >



    The CurrencyMessage field will show the associated currencies of the price (if set-up). A CSS class called Transparent removes the border from the text box and makes the background color transparent and the text bold. Note: to not show this message box change the type from 'text' to 'hidden' or else remove the Currency functionality

  5. <input type="text" name="DisplayPrice" readonly="readonly" class="Transparent" />



    The Total Price box. You can change it's size by adding style="width:30px" for example. A CSS class called Transparent removes the border from the text box and makes the background color transparent and the text bold.


^top

Mal's Cart Form Elements - All Fields

Here are all the Mals cart fields that can be used with the script.

userid = Your User ID (REQUIRED WITH VALUE)
product = Description of your product (REQUIRED WITH NO VALUE)
price = Price (without Currency enumerator, $, £ or whatever) (REQUIRED WITH NO VALUE)
qty = a quantity (default = 1) (REQUIRED WITH VALUE)
units = a value for calculating shipping (default = 0) (REQUIRED WITH NO VALUE)
scode = a stock code which you would like the cart to store (REQUIRED WITH NO VALUE)

Optional :
return = www.your_co.com/your_page.htm (default = none)
message = a message (see the messages help file)
lg = a language other than your default
currency = currency number for multi-currency payments
tax = % rate of sales tax for that item (default = 0)
sd = your own session data
noship = overide shipping units being set to the same as the price
noqty = turns off the carts' quantity box (default = show box)

^top

Currencies

To show customers the price in another currency or currencies ensure that in the mm_pos.js file the following code is set:

var TotalCurrencies = 2;

Change 2 to the total number of currencies you wish to display e.g. $, €, £ etc.

var CurrencyText = "Approx. ";

This is the message that appears before the actual currency symbol and value e.g. Approx. $50.00

Currency Options/Arrays

Currency[1][0] = "$";
Currency[1][1] = 2.01510;

Currency[2][0] = "€";
Currency[2][1] = 1.47474;

Each currency has two parts - the currency symbol and the currency conversion rate to the default currency. This is displayed using the options above

Currency[x][0] = "Symbol";
Currency[x][1] = ConversionRate;

  • x = the current currency number in the list of currencies e.g. 1, 2, 3, 4 etc. (Note ensure this is not longer than TotalCurrencies)
  • 0 = the symbol part (ensure it is 0 and not 1)
  • 1 = the conversion rate
  • Symbol = the currency symbol e.g. $, £
  • ConversionRate = the decimal point conversion rate (Tip! Get rates for free at www.xe.com)

Display Currencies on Form

A form field called CurrencyMessage should be displayed on the form. The currency conversions etc. will be displayed here.

<input type="text" name="CurrencyMessage" readonly="readonly" class="Transparent" / >

No Currencies

To not show currency information ensure var TotalCurrencies = 0, there are no Currency[x][y] values and the PriceMessage field does not exist or is hidden on your form.

^top

Delimiters/Separators

A delimiter is something that separates something, in this case each product option in the cart. In the mm_pos.js file the following code is set:

var Delimiter = "{br}";
var StockCodeDelimiter = "|";

The Delimiter shows a {br} tag which Mals Cart identifies as a <br> or line break value. This can be changed to whatever you want (see below).

StockCodeDelimiter is for multiple stock codes or scodes per product option. Can be used within the Order History System to work with your internal stock system

Delimiter Examples

  • New line - {br}
  • Comma - ,
  • Semi-Colon - ;
  • Colon - :
^top

Javascript File

The main script is located in a separate file called mm_pos.js. Usually this file is located in the same folder as the form(s) that uses it. Ensure the following code is located between the <head> </head> tags at the top of the page or alternatively just above the form code.

<script src="mm_pos.js" type="text/javascript">
</script>

If the mm_pos.js file is in another folder e.g. a sub folder called 'scripts' then this code needs to be adjusted slightly

<script src="scripts/mm_pos.js" type="text/javascript">
</script>

^top

CSS Styles

<style type="text/css">
<!--
.Transparent{
background-color:transparent;
border: 0px;
font-weight: bold;
-->
</style>

This is the default style sheet and is used to change color and appearance of the price and currency fields. Add to this style sheet or else add it to an external CSS file to completely change the appearance of your forms. Look at other CSS examples here.

^top

Other CSS Styles

You can completely change the appearance of your forms by using CSS (Cascading Style Sheets). Here is a link to an example tutorial

^top

Technical Information

Debugging

The easiest way to find out why the script isn't working for you is by using Firefox's Error Console.

Download Firefox for free and then open the page up. Go to 'Tools > Error Console' and view the error and line number there to try and figure out what is wrong.

Tips

  • Remember to add all the required fields, both hidden and visible e.g. DisplayPrice.
  • All scripting and name of fields are CaSe SeNsItIvE
  • If in doubt start with a very basic form and work up from there. Eliminate each part as you go along
  • Make sure the .js file is located either in the directory of the other files or is referenced correctly