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.

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.

<< Back to HOWTO index



[an error occurred while processing this directive]
New Downloads
Workspace Developer Edition 1.11.1

Online demo
You can test latest Smilehouse Workspace Developer running in Smilehouse hosting facilities online

HOWTO
Learn how to use Workspace more efficient! Find latest tips and tricks from here


 
© Smilehouse