[Pro] Working Comparison Chart

Nate · November 28, 2011, 2:09pm

Does anyone know how to create a working comparison chart, where you can select products for comparison, as shown here-http://www.motorola.com/Consumers/US-EN/Consumer-Product-and-Services/Mobile-Phones/?features=41492

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · November 28, 2011, 3:35pm

Usually this requires a server-side component written in a dynamic language and a database to use for the comparison. If you want something simpler than that, you could make a side-by-side layout in the following manner:

Set up your product listing as a set of inline single-product elements within a single larger parent element. In each of the inline elements, add a checkbox form element. It doesn’t matter what you name these fields particularly, you won’t be doing anything form-related with them, they just need to be nested inline within the inline element, at the same level of hierarchy in each one.
Draw an HTML box where your side-by-side comparison will appear, and note the Title (ID) attribute Freeway assigns it (or set one you like in the Inspector). Be sure to put some text in this box, or else all your text will get resized to 1px (unreadable).
Add the Protaculous Action to the page, and choose prototype-packed from the library picker.
Click the top Function Body button, and paste in the following code. You will need to change the placeholders used within the code (hopefully these are obvious) with the real names of your elements on the page.

gist.github.com

https://gist.github.com/walterdavis/1400781

simplepastiefile.js

var outer = $('theOuterBox');
var comp = $('theComparisonArea').update();
//you shouldn't need to change anything below this
var list = outer.childElements();
document.observe('click', function(evt){
  var elm;
  if(elm = evt.findElement('input[type="checkbox"]')){
    if((outer.select('input:checked').length + comp.select('input:checked').length) > 2){
      evt.stop();
      elm.checked = false;

This file has been truncated. show original

What this does is take any two checked elements from the main list and insert them into the comparison area. It won’t choose more than that (but you could change this limit on line 8 of the script) and it removes the elements from the main box as it does this. If you un-check one of the elements from the comparison area, it will be returned to the main list (at the bottom of the list) and the next element you check in the main list will be added to the comparison area.

Obviously, this doesn’t do anything more elaborate than to show two items side-by-side. For a more evolved system, you would need a database and an application server.

Walter

On Nov 28, 2011, at 9:09 AM, Nate wrote:

Does anyone know how to create a working comparison chart, where you can select products for comparison, as shown here-http://www.motorola.com/Consumers/US-EN/Consumer-Product-and-Services/Mobile-Phones/?features=41492

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options