IMPORTANT! Follow these steps when setting-up the script for the first
time:
There are at least three steps needed to add Dynamic List 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 dls_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_dls.js file and 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 dls_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>
<!--DYNAMIC LIST HEAD - START-->
<style type="text/css"> .......
</script>
<!--DYNAMIC LIST 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>
<!--DYNAMIC LIST FORM - START-->
<form onSub ......
......
</form>
<!--DYNAMIC LIST FORM - END-->
</body>
The basic principle behind the script is that when a customer selects a product option then another form list displays further options to match the already selected option.
Here's an example of how it works with two drop down lists, each with different options depending on what is selected
Main Product = Scented Candles
Drop Down #1
-
Colors
Option 1 = Blue
Option 2 = Orange
Option 3 = Purple
Drop Down #2
- Sizes
Blue
Option 1 = Large
Option 2 = Xtra Large
Orange
Option 1 = Small
Option 2 = Large
Option 3 = Xtra Large
Purple
Option 1 = Small
The diagram above shows product options for Scented Candles. There are two main drop down lists
Colors
Sizes
Depending what is selected on the 1st drop down will determine what is shown in the 2nd drop down.
If Blue is selected from drop down 1 (colors) then Large and Xtra Large are shown on drop down 2 (sizes)
If Orange is selected from drop down 1 (colors) then Small, Large and Xtra Large are shown on drop down 2 (sizes)
If Purple is selected from drop down 1 (colors) then only Small is shown on drop down 2 (sizes)
Creating Arrays/Sets of Options
To create the code to do the above example you will need to create several 'arrays' or sets of options in Javascript code.
<script language="Javascript">
// Use the following arrays to create further drop-down dynamic lists var PleaseSelect = "Please Select";
var ArrayBlue = new Array(PleaseSelect, 'Large:10.00','Extra Large:20.00');
var ArrayOrange = new Array(PleaseSelect, 'Small:5.00','Large:10.00','Extra Large:20.00');
var ArrayPurple = new Array(PleaseSelect, 'Small:5.00');
</script>
Let's break down this Javascript:
var PleaseSelect = "Please Select";
This is the text that is shown in a drop down list when no previous option has been selected. You can change Please Select to whatever you wish
ArrayBlue
This is the set of options that is displayed in the second drop down when Blue is selected in the first drop down
= new Array(...) This tells Javascript that a new set of options is to be created
PleaseSelect,
This is replaced by the text in var PleaseSelect ... above
Each option value is divided into 1 to 4 elements depending on your requirements and is surrounded by inverted commas with each option separated by a comma , Option Name:Price:Units:SCode
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)
So for example the ArrayOrange lists three options, with each option separated by a comma
var ArrayOrange = new Array(PleaseSelect, 'Small:5.00','Large:10.00','Extra Large:20.00');
'Small:5.00' = Option Name is Small and Price is 5.00
'Large:10.00' = Option Name is Large and Price is 10.00
'Extra Large:20.00' = Option Name is Extra Large and Price is 20.00
This is the most basic information where Small is the option name and 5.00 being the price (the option values are separated by a colon: as stated above)
Drop Down Lists
Now that the Javascript has been created we need to create the drop down lists
name="productColors"
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 productOption1
onChange="PopulateOptions(this, 'productSizes');"
This is the Javascript code that dynamically changes the price when the user select an option and also populates the drop down 'productSizes'
option value="[ArrayName]Option Name:Price:Units:SCode"
Each option value is divided into 1 to 4 elements depending on your requirements
[ArrayName] - e.g. [ArrayBlue]. The name of the Array created in Javascript that will be used as the options for the next drop down list. MUST BE SURROUNDED BY SQUARE BRACKETS [] . If no array is required don't add the [xxx] info
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)
name="productSizes"
The next drop down list. This drop down will be used as the previous/top level drop down calls it by name onChange="PopulateOptions(this, 'productSizes');". Note that it is empty except for a Please Select option
When two lists are not enough and you want the options to 'string' together so that when another option is selected then it determines options in another drop down list and so on, view the code below.
Here's an example of how it works with three drop down lists, each with different options depending on what is selected
Main Product = Scented Candles
Drop Down #1
-
Colors
Option 1 = Blue
Option 2 = Orange
Drop Down #2
- Scents
Blue
Option 1 = Midnight Moon
Option 2 = Blueberry Pancake
Orange
Option 1 = Carrot Cake
Drop Down #3 - Sizes
Midnight Moon
Option 1 = Large
Option 2 = Xtra Large
Blueberry Pancake
Option 1 = Small
Option 2 = Large
Option 3 = Xtra Large
Carrot Cake
Option 1 = Small
The diagram above shows product options for Scented Candles. There are three main drop down lists
Colors
Scents
Sizes
Depending what is selected on the 1st drop down will determine what is shown in the 2nd and 3rd drop downs.
If Blue is selected from drop down 1 (colors) then Midnight Moon and Blueberry Pancake are shown on the drop down 2 (scents)
If Orange is selected from drop down 1 (colors) then Carrot Cake is shown on drop down 2 (scents)
Then when scents are changed
If Midnight Moon is selected from drop down 2 (scents) then Large and Xtra Large are shown on drop down 3 (sizes)
If Blueberry Pancake is selected from drop down 2 (scents) then Small, Large and Xtra Large are shown on drop down 3 (sizes)
If Carrot Cake is selected from drop down 2 (scents) then only Small is shown on drop down 3 (sizes)
Creating Arrays/Sets of Options
To create the code to do the above example you will need to create several 'arrays' or sets of options in Javascript code.
<script language="Javascript">
// Use the following arrays to create further drop-down dynamic lists var PleaseSelect = "Please Select";
var ArrayBlue = new Array(PleaseSelect, '[ArrayBlueMidnightMoon]Midnight Moon:10.00', '[ArrayBlueBlueberryPancake]Blueberry Pancake:15.00');
var ArrayOrange = new Array(PleaseSelect, '[ArrayOrangeCarrotCake]:15.00');
var ArrayBlueMidnightMoon = new Array(PleaseSelect, 'Large:10.00','Extra Large:20.00');
var ArrayBlueBlueberryPancake = new Array(PleaseSelect, 'Small:5.00','Large:10.00','Extra Large:20.00');
var ArrayOrangeCarrotCake = new Array(PleaseSelect, 'Small:5.00');
</script>
Let's break down this Javascript:
var PleaseSelect = "Please Select";
This is the text that is shown in a drop down list when no previous option has been selected. You can change Please Select to whatever you wish
ArrayBlue
This is the set of options that is displayed in the second drop down when Blue is selected in the first drop down
= new Array(...) This tells Javascript that a new set of options is to be created
PleaseSelect,
This is replaced by the text in var PleaseSelect ... above
[ArrayName) - e.g. ArrayBlueMidnightMoon. This is the name of the array that will be called when this option is selected. In this example it will show the options Large and Extra Large (shown in var ArrayBlueMidnightMoon ...) MUST BE SURROUNDED BY SQUARE BRACKETS [] . If no array is required don't add the [ArrayName] info
The rest of the information is the same as the previous examples.
So the drop down 1 Blue option will call Midnight Moon and Blueberry Pancake as options under the Scents drop down 2 and if the customer selects Midnight Moon then Large and Extra Large are shown in the Sizes drop down 3. If they select Bluberry Pancake instead then Small, Large and Extra Large will be shown in the Sizes drop down 3.
These arrays can all create one enormous selection which is based on the choices made along the way ... but remember the longer the form the more difficult it will be to debug!!
Drop Down Lists
Now that the Javascript has been created we need to create the drop down lists
Remember to call each drop down list a different name and to reference each one correctly with the onChange function
The last drop down list doesn't need an onChange="PopulateOptions(... function as it doesn't add any more drop down options BUT IT DOES NEED a CalcPrice(this.form) function so price is changed correctly
The main scripts are located in separate files called mm_pos.js and mm_dls.js. Usually the files are located in the same folder as the form(s) that use 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.
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.
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