Smilehouse Workspace HOWTO Articles

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.


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(;"> 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.

<< Back to HOWTO index