Compare products using a checkbox

Question

It seems too cumbersome for the user to have to wait for a page reload everytime they click on "add to compare" to add a product to a compare list and I wanted to change thelink with a checkbox and then add a button that will submit the list of products to compare and then send you to that page.

What is the best way to do this?

Edit:

I will post the code I used so that someone else can use it in the future!

In each product I have a checkbox like this:

<input class="idcompare" type="checkbox" name="idcompare<?php echo $_product->getId();?>" value="<?php echo $_product->getId();?>">Compare

Then I have my form with the button that will send me to the compare page:

<form id="comparelist">
    <button type="button" title="<?php echo $this->__('Compare') ?>" class="button"><span><span><?php echo $this->__('Compare') ?></span></span></button>
</form>

And my js that will change the action and submit the form! (not very elegant I know but it works):

jQuery(document).ready(function() {
        jQuery('#comparelist .button').click(function(){

            var i=0;
            var prdString="";

            var prdString = jQuery.map(jQuery(':checkbox:checked'), function(n, i){
                  return n.value;
            }).join(',');


            var url='<?php echo Mage::getUrl('catalog/product_compare/index').'items/'; ?>'+ prdString + '/uenc/';
            jQuery('#comparelist').attr('action', url);
            jQuery('#comparelist').submit();
        });
    });

Answer 1

In order to add a product to compare you need the following url:

<?php echo Mage::getBaseUrl() ?>index.php/catalog/product_compare/index/items/' + productID + '/uenc/'

You can add multiple items to compare at the same time by creating a comma seperated string of the product id's.

It would look something like this:

<?php echo Mage::getBaseUrl() ?>index.php/catalog/product_compare/index/items/10,23,456,8/uenc/'

Based on this information you can set this up with checkboxes by doing the following:

• create a <form>
• create checkboxes for each item you want to be able to compare
• set the id of each checkbox to the id of the product
• add some js to the onclick event of the checkbox that adds the id to a comma separated sring

• onSubmit have the form action go here:

  <?php echo Mage::getBaseUrl() ?>index.php/catalog/product_compare/index/items/' + prdString + '/uenc/'