For further help and support please visit our website
Dynamic List Script (with Price Options Script)
Setup
There are at least four steps needed to add Mal's eCommerce Dynamic List Script functionality to your web site. You will need all the pages of code sent to you via email to make it work correctly. If you have deleted these pages then please contact media mount.
The pages mm_dynamic_list_example1.htm and mm_dynamic_list_example2.htm are full working example pages of the script.
NB: this help file is for Version 1.41 of the Dynamic List Script and Version 2.41 of the Price Options script. If you have previously bought the script then please contact media mount and request the latest version
Step 1:
Save the mm_priceoptions.js and mm_dynamic_list.js file to the same folder on your web site as the shopping page using the script
Step 2:
Copy the code on the mm_dynamiclist_head.htm page 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>
Copy the code on the mm_dynamiclist_footer.htm page and paste into the very bottom of the shopping page where you want the script to be, making sure it is pasted directly before the </BODY> tag e.g.
<body bgcolor="#FFFFFF" text="#000000">
<!--DYNAMIC LIST FOOTER - START-->
<script language="Javascript">for (var i = 0; i<document.forms.length; i++) { mmCalc(document.forms[i]);}</script>
<!--DYNAMIC LIST FOOTER - END-->
</body>
</html>
Step 4:
Next you need to create the form that the script will use to create prices and options etc. and pass the products onto Mal's Cart. There are two types of form - standard and quantity/price bands.
Standard Forms
Copy the code from page mm_dynamiclist_form.htm and paste into the shopping page between <BODY> and </BODY> e.g.
<BODY>
<!--DYNAMIC LIST FORM - START-->
<form onSub ......
......
</form>
<!--DYNAMIC LIST FORM - END-->
</BODY>
Quanity/Price Bands Forms
Copy the code from page mm_dynamiclist_form_bands.htm and paste into the shopping page between <BODY> and </BODY> e.g.
<BODY>
<!--DYNAMIC LIST FORM - START-->
<form onSub ......
......
</form>
<!--DYNAMIC LIST FORM - END-->
</BODY>
Dynamic List Options
Once you have pasted the above code then the script will work on that shopping page. You are now ready to change the information for the drop-down lists and add/remove more drop-down lists and create your drop-down list arrays.
Arrays
Don't close this page yet! - arrays may sound geeky and difficult but they're not and once you get the hang of them you can create as many drop-down dynamic lists as you want.
An array is simply a list of information, in this case a list of product options and prices that are used to dynamically populate a drop-down list box. Logically (and you've got to use logic here) the script needs to know a couple of things before it goes and updates a list box with information
What drop-down list is to be populated with information
What information to use
A Trigger to tell the script to activate the script
The trigger is simply the onChange event for each drop-down list i.e. onChange="populateOptions(this.form, this.value, 'productListToPopulate');". The drop-down list to be populated is the name of the drop-down list e.g. product2 so change the script in red in this paragraph to onChange="populateOptions(this.form, this.value, 'product2');"
What information to use - this is done via an array, and an example of an array is shown below
var strArrayCubedColor = new Array(strPleaseSelect, '[strArrayRedScent]Red:10.00','[strArrayBlueScent]Blue:15.00', '[strArrayOrangeScent]Orange:20.00');
Which will populate a drop-down list box like this one
You have to give each array a name and this one is called strArrayCubedColor. NB: all array names must contain no spaces nor other characters, they should always be text and start with a text/letter, also watch out for lower and upper case - use exactly the same name throughout your script. Each item in an array is separated by a comma so in the array above there are 4 items in the array
strPleaseSelect
'[strArrayRedScent]Red:10.00'
'[strArrayBlueScent]Blue:15.00'
'[strArrayOrangeScent]Orange:20.00'
The only items you will need to change are 2, 3 and 4. Each looks a bit complicated so let's break it down
'[strArrayRedScent]Red:10.00'
All items should be inclosed by an inverted comma '
If you want this item to populate another drop-down list you need to tell the script what array you want to use. Use [theNameOfTheArray] at the start of the item to do this or else don't include it if you don't need another drop-down list populated
After the [theNameOfTheArray] type the name of the option. Do not include the following characters {}, [] , ; or ,
Type a colon :
Type the price of the product option, or 0 if it has no price
Image Options Compatibitlity
A new feature of versions 1.41+ of the Dynamic List Script lets you combine dynamic options with dynamic image changing. To use this feature you need to purchase the Image Options Script.
Add the (imagename.gif) tag to the end of the [arrayname] tag e.g.
'[strArrayRedScent](redcar.gif)Red:10.00'
This will change the specified picture to the 'redcar.gif' image when this option is selected. You will also need to add an extra event to the drop-down: it should now look like
Remember to create an image and give it the name of 'imagename' otherwise nothing will happen. Read more about Image Options Script help here
Units
You may need to include shipping units with your product selections. To do this, add another :xx value to each option in the array for example:
'[strArrayRedScent]Red:10.00:5'
The :5 means that 5 units are to be assigned to this option
Each options' units are totalled together when the form is submitted to Mal's cart so if there are two drop-down lists with units for each drop-down of 5 each then the total units for the product would be 10
You can have as many items in your arrays for drop-down list population as you need. Here's another example with three items (the first is always Please Select)
var strArrayRedScent = new Array(strPleaseSelect, 'Bay Rum:3.00','Deep Forest:5.00');
Edit Script: Drop-Down Lists
Once you have pasted the above code then the script will work on that shopping page. You are now ready to change the information for the drop-down lists and add/remove more drop-down lists.
Edit Drop-Down (Standard Form only)
Choose one drop-down list as your 'primary' selection - this drop-down will feed the rest of the drop-down lists and determine what list will show what information. It should be located at the top of your form.
Primary Drop-Down (Standard Form only)
The code for the Primary drop-down list looks like this:
Each drop-down must contain the name "productX" where X is the number of the drop-down list i.e. the first drop-down is product1, the second product2 etc. Please ensure that the onChange="populateOptions(this.form, this.value, 'productX')" is included too.
The <option> tag represents each option in the drop-down list. The value of each option is in the same format as the productpr tag in Mal's Cart i.e. value="name of product:price of product" along with the name of the array that is to be used to populate the other drop-down list enclosed in []. The text that the customer sees is betwen the <option ..> and </option> tags. This can be anything but a good example would be <option ...>Product Name - £Product Price</option>
The [strArrayCubedColor] is the name of the array (list of information) that will be used to populate the list box given as productListToPopulate which would be e.g. 'product2'
To add another drop-down list copy and paste a drop-down list code to where you want it placed on your shopping page and change the name="productX" to the number after the previous drop-down list e.g.
The information from the array will dynamically populate this drop-down's options so you don't need to add them here.
IMPORTANT! - once you have added all your drop-down lists, count them e.g. in the examples above there would be 2 productX drop-downs. Enter that value into the <input type="HIDDEN" name="numberSelections" value="N"> script at the top of the form code, replacing N with the number of productX drop-downs e.g. <input type="HIDDEN" name="numberSelections" value="2">
Misc Drop-Downs (Standard Form only)
You can include other drop-downs that do not populate other drop-downs but still are used to calculate the price
You can have whatever size of text box you need, just remember to call it productItemRequired
NB: for form validation to work you will need to change the onSubmit function within the <form..> element slightly. The event should read onSubmit="return mmCalc(this, 'submit')"
Add a Check Box (Standard Form Only)
To add a checkbox use the following code:
<input name="productX" type="checkbox" value="name of product:10.00" onClick="mmCalc(this.form)">
Add a Radio Button (Standard Form Only)
To add a radio button use the following code:
<input name="productX" type="radio" value="name of product:10.00" onClick="mmCalc(this.form)">
Option 1
Option 2
You can have groups of radio buttons, just name them all the same productX number
Change Quantity/Price Bands (Quantity/Price Bands Form only)
To build a list of quantity and price bands for the script to calculate total cost use the following hidden form field
Change the value to the bands that you require. The syntax (format) that should be used is
Quantity1:Price per product1~Quantity2:Price per product2~Quantity3:Price per product3 etc.
You can have as many bands as you require. Note: don't put a ~ at the end of the last band
Round Quantities Up to Nearest Quantity Band (Quantity/Price Bands Form only)
To make the script round the quantity up to the nearest quantity band use the following hidden form field. Change value to false if you don't want this option.
The script will not add form elements that are disabled to the shopping cart. This is useful for drop-down lists that when a customer click a checkbox for example, a corresponding drop-down list is enabled and can only then be added to the cart.
Remember, the JavaScript syntax for disabling a form is thatForm.elements['element name'].disabled = true; (or false to enable)
Price Discount (Standard Form and Quantity/Price Bands Form)
To add a straight-forward discount to the product instead of changing all price values by X percent, add this hidden form field to the form. Replace the 0 with the percent to discount e.g. 10 for 10%
There are several other elements in the script to make it interact with Mal's Shopping Cart:
... 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 Mal)
- Replace xxxxxx with your userid.
- Use the "return" value for the url/web address you wish customers to 'Continue Shopping' to after adding this product to the cart.
- Do not enter any values in the "price" and "product" and "units" tags
- strMainProductName hidden field can be used to give an individual form a product name on a web page where there is more than one form
- To show another currency total within the form enter a value in strOtherCurrencySymbol e.g. $, £, €. You must also have a currency rate dbOtherCurrencyRate to make this work correctly. NB: this will not work in conjunction with price bands
- You can also add other hidden form tags here e.g. sd for session data. Please consult Mal's support for more information
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 not, if you do this and the customer types a letter instead of a number the script will not work.
The Customer Message box where a customer is told to select a product type or the total price. You can change it's size by increasing/decreasing size="50". NB: to not show this message box change the type from 'text' to 'hidden'
The Total Price box. You can change it's size by increasing/decreasing size="8".
<input type="submit" value="Add to Cart">
<input type="reset" value="Reset">
The "Add to Cart" and "Reset" button. You can change the text on these buttons by editing the value="" tag
strCurrency = "£";
strMainProductName = "{b}Custom Build Computer{/b}";
strProductDelimeter = "{br}";
strTellCustomer = "Please select a product type above";
strRequiredFieldText = "Not all required fields have been completed";
These Javascript variables found at top of the page let you customize the script further.
- Change strCurrency to equal the currency you are using e.g. £, $, € etc.
- Change the strMainProductName to equal the name of the product you are selling e.g. Custom Built Motorbike. You can surround this text with {b} and {/b} tags. This will make the text bold when entered into Mal's Shopping Cart. For multiple forms on one page change strMainProductName = null (without inverted commas) and use the hidden form field strMainProductName as shown in point 2 above
- You can change strProductDelimeter to either , or : or {br}. This will determine how products are displayed in Mal's Shopping cart
- Change the text for strTellCustomer to whatever text you like. This will appear in the Customer Message Box if the customer needs to select a product type for the total price to be calculated
- Change the text for strRequiredFieldText to whatever text you like. This will alert the user if they have not completed the form correctly
This is a style sheet and is used to change color and appearance of buttons and drop-down lists on your web page. For a full tutorial on style sheets visit CNET Builder
Troubleshooting:
If you get a Javascript error
Error: 'elements.numberSelections.value' is null or not an object
then either remove the <script language="Javascript">for (var i = 0; i<document.forms.length; i++) { mmCalc(document.forms[i]);}</script> line of code from the bottom of the page or else change the i = 0 to i = 1. Keep trying a higher number (1, 2, 3 etc.) until the error does not appear.
Cause of Error: the number of forms on your page exceeds the number of forms containing the script.