Wosbee 1.10 NEW FEATURES!
HOWTO Make a compare products - Pop-Up window
Created December 20th, 2007
Howto make a Compare Products -popup
Often in web shops one can see features such as compare products that lets user to select the products he/she is interested in and compare the main features on one single page, often a pop-up.
JavaScripts
Load a required javascript here.
Open javascript file e.g. in notepad or some other editor and look in its content.
Now you should find the line which starts with var title ="";. Inside ""-signs you can write the title for the popup window that opens when compare-button is pressed.
Notice: If you use " characters INSIDE the ""-signs you must remember to use backslash \-sign before "-sign i.e.
var title ="comparing window says \"hi there\"";.
The javascript file contains a line which starts var content = "<!DOCTYPE HTML PUBLIC.. Leave this line as it is and move forward to see other lines below that. There are lines which starts content += "<html>" and you can add, remove or edit these lines while you rememeber the use of " and \" characters.
HTML layout of popup window
Upload the script into Workspace using file manager:
Visual -> Tools -> Filemanager
Load the script on your page placing the following script between the <head> and </head> tags in your HTML template:
<script src="files/organization/html/compare.js"></script>
Where the organisation is the organisation name of your Workspace (default: "organization").
Go to Visual -> www-Outlook -> Page Construction -> Product List
And open Product List WAE from the left.
- Add <div id="prdc$product_itemcode$"> tag before the first tag inside the Product HTML textarea.
- Add <input type="checkbox" name="$product_itemcode$" value="compare"> tag somewhere inside the same textarea.
- Add </div> tag as last last tag inside the Product HTML textarea.
- Add <input type="button" name="compare" class="compare" value="Compare selected products" onclick="findCompareBoxes(this.form.name);"> tag inside the lowest textbox which name is End HTML.
Now you should have something like this:
The script used in this HOWTO document is tested with Firefox 1.5 and Internet Explorer 6.0.
- Add new comment
- 1714 reads
- Email this page
