For further help and support please visit our website
Image Options Script (with Price Options Script)
Setup
There are at least four steps needed to add Mal's eCommerce Image Options 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_imageoptions_example1.htm and mm_imageoptions_example2.htm are full working example pages of the script.
NB: this help file is for Version 1.10 of the Image Options 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_imageoptions.js and mm_price_options.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_imageoptions_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>
<!--Image Options HEAD - START-->
<style type="text/css"> .......
</script>
<!--Image Options HEAD - END-->
</head>
Copy the code on the mm_imageoptions_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.
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_imageoptions_form.htm and paste into the shopping page between <BODY> and </BODY> e.g.
<BODY>
<!--Image Options FORM - START-->
<form onSub ......
......
</form>
<!--Image Options FORM - END-->
</BODY>
Quanity/Price Bands Forms
Copy the code from page mm_imageoptions_form_bands.htm and paste into the shopping page between <BODY> and </BODY> e.g.
<BODY>
<!--Image Options FORM - START-->
<form onSub ......
......
</form>
<!--Image Options FORM - END-->
</BODY>
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.
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="mmCalc(this.form)" 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". 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>
Images
When an option is selected from the drop down list then it should change an image on your web page. To tell the script which image to change and what to change it to do the following:
a) Identify image to change - onClick="changePhoto(this.form, this, 'mouse')" change 'mouse' to the name of the image you wish to change. The <img> tag must have a name to make this work e.g. <img src="noimage.gif" name="mouse">. Make sure the name is all lowercase and has not spaces or special characters of text in it
b) What image to change to - value="(mouse1.gif).... Change the value in each option within the brackets to the name and path of the image you wish to change it to e.g. to change it to an image called cat1.jpg located in the images folder do the following
You may need to include shipping units with your product selections. To do this, add another :xx value to each option for example:
<select size="1" name="product1" onChange="mmCalc(this.form)" class="MENU">
<option value="40 GB Hard Drive:60.50:4" selected>40 GB Hard Drive</option>
<option value="50 GB Hard Drive:70.00:6">50 GB Hard Drive</option>
<option value="60 GB Hard Drive:80.00:7">60 GB Hard Drive</option>
<option value="70 GB Hard Drive:90.00:8">70 GB Hard Drive</option>
</select>
Add a Drop-Down (Standard Form only)
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.
<select size="1" name="product2" onChange="mmCalc(this.form)" class="MENU">
<option value="CD Rom:35.00" selected>CD Rom - £35</option>
<option value="DVD Rom:45.00">DVD Rom - £45</option>
</select>
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">
The code above for the drop down list will only calculate the price and not swap an image. See the first example for instructions as to how to do this.
Add a Text Box (Standard Form Only)
To add a text box or multiple text boxes use the following code:
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.