IMPORTANT! Follow these steps when setting-up the script for the first
time:
There are at least three steps needed to add Image 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 ios_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_ios.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 ios_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>
<!--IMAGE OPTIONS HEAD - START-->
<style type="text/css"> .......
</script>
<!--IMAGE 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>
<!--IMAGE OPTIONS FORM - START-->
<form onSub ......
......
</form>
<!--IMAGE OPTIONS FORM - END-->
</body>
The form is now ready to be edited to sell your products. Next: edit your form >>
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
onClick="ChangePhoto(this, 'mouse')"
This is the code that activates the image change. The word mouse is the name of the image - so the code is simply stating when someone click the drop down the mouse image will change to whatever they have selected
option value="(Image)Option Name:Price:Units:SCode"
Each option value is divided into 1 to 4 elements depending on your requirements
(Image) - e.g. images/product1.jpg. The location/name of the image to be displayed for this option. MUST BE SURROUNDED BY BRACKETS (). If no image is required don't add the (image) 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)
Here is an example of the most simple form of drop down list with only one image change.
Remember to add the images! Each form option that displays an image must ensure that the image exists beforehand. You can put the image anywhere you like on the page, it doesn't even have to be within the form, but usually it's good practice to put the image beside the option that displays it.
The default/main image is called 'noimage.gif' and it is a transparent GIF (a blank, see-through image). The code to put it on your page looks like
src="images/noimage.gif"
The src means the source or location of the image. The noimage.gif is located in the images folder so the full src is "images/noimage.gif"
name="mouse"
This is the name that the script references when a product option wants to change it. Each image should have a different name (otherwise the script wont know which one to change!) e.g. OptionA, ScentedCandle etc. Note: everything is CaSe SeNsItIvE
onerror="this.src=images/noimage.gif'"
This shows the noimage.gif image if another image cannot be found (Internet Explorer only)
Change the noimage.gif to Another Image
Open the mm_ios.js file in e.g. Notepad and change the following code
Note: when the onClick event is already used and you want to do two or more things use a semi-colon ; to separate each Javascript function e.g. onClick="CalcPrice(this.form); ChangePhoto(this, 'BigProduct');"
The main scripts are located in separate files called mm_pos.js and mm_ios.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