Compare button on every product page

grega33 · April 30, 2014

There are two buttons in a products list "Add to whishlist" and "Add to compare". But when I show product details only "Add to my whishlist" is available.

Two questions:

1. How to add "Add to compare" and "Compare" buttons also on product details page?

2. How to style "Add to whishlist" and "Add to compare" with different icons (like the one in front of "Add to my whishlist" under product details)?

Thanks. Regards,

Grega

grega33 · May 16, 2014

Anyone, please?

vekia · May 16, 2014

check this Nemos guide:

http://www.prestashop.com/forums/topic/267602-free-tutorial-adding-the-compare-button-to-the-product-page/

klymets1 · July 9, 2014

check this Nemos guide:

http://www.prestashop.com/forums/topic/267602-free-tutorial-adding-the-compare-button-to-the-product-page/

Does not work on version 1.6

What to do?

viji · October 29, 2014

Hi Vekia,

I need to display 'Add to Compare' on product detail pages without checkbox. Please help me, In nemos guide, there is a checkbox needed to compare the product.

frank_jarle · November 1, 2014

Hi

I need the exactly the SAME thing. I need a "Add to compare" on product detail page, but without the checkbox.

Thanks if someone can help.

beulan1970 · November 19, 2014

Hi all,

How to add "Add to compare" and "Compare" buttons also on product details page?

vekia · November 19, 2014

Hi all,

How to add "Add to compare" and "Compare" buttons also on product details page?

have you checked link to guide that i attached ?

frank_jarle · November 23, 2014

The drawback with the original guide Vekia is the attached check-box, this should be mention as this is a completely different approach compared to just one-click as its every where else in the system.

To me its strange that on the front page or product list one is able to have a one-click "add to wish list" and "Add to compare", but on the product page one is somehow forced to use the checkbox and then add-button.

Another drawback of this is that this again does not fit in with the "theme" of the default Prestashop and the "Add to wishlist button" on the product. :-)

I work in a software company (NOT as a developer or programmer), but it seems strange to me that many places the user can perform the same task all over, but when suddenly one break the way of doing things (i.e. must use the checkbox then click add-button) it seems a bit...

Aditya Kaushik · January 3, 2015

Add this code in "product.tpl" where you want to place the "Add to Compare button", code is working fine with Prestshop 1.6 version too --and consists of javascript code /ajax function to add a product to comapre.

Use this code and Enjoy B) :D

<script type=\"text/javascript\">

function addToCompare()
        {

            var totalValueNow = parseInt($('.bt_compare').next('.compare_product_count').val());
            var totalVal;
            if(totalValueNow<3){
            $.ajax({
                url: 'index.php?controller=products-comparison&ajax=1&action=add&id_product=' +     {$product->id|intval},
                async: true,
                cache: false,
                type: 'Post',
                dataType: 'html'

           });
            compareButtonsStatusRefresh();
            totalVal = totalValueNow +1,
            $('.bt_compare').next('.compare_product_count').val(totalVal),
            totalValue(totalVal);
            $('.bt_compare').attr("disabled",false);
            $('.bt_compare').css("background-color","#E8490C");
            $('.bt_compare').css("color","#fff");

           }
           else{
            var $div8 = $(".comapare_max_limit");
            if ($div8.is(":visible")) { return; }
            $div8.show();
            setTimeout(function() {
            $div8.hide();
            }, 4000);

            var $div9 = $(".product-added_overlay");
            if ($div9.is(":visible")) { return; }
            $div9.show();
            setTimeout(function() {
            $div9.hide();
            }, 4000);
           }

    }

function totalValue(value)
{
   $('.bt_compare').find('.total-compare-val').html(value);
}

function compareButtonsStatusRefresh()
{
   $('.add_to_compare').each(function() {
       if ($.inArray(parseInt($(this).data('id-product')), comparedProductsIds) !== -1)
           $(this).addClass('checked');
       else
           $(this).removeClass('checked');
       });
}
    </script>

{if isset($comparator_max_item) && $comparator_max_item}

        <a onclick="addToCompare()" href="#" data-id-product="{$product->id|intval}"><span class="product_btn_comparison">Add to Compare</span></a>
       <div class="comapare_max_limit">You cannot add more than 3 product(s) to the product comparison</div>

    {/if}
    {include file="./product-compare.tpl"}

Edited January 3, 2015 by aditya0002 (see edit history)

frank_jarle · January 4, 2015

Add this code in "product.tpl" where you want to place the "Add to Compare button", code is working fine with Prestshop 1.6 version too --and consists of javascript code /ajax function to add a product to comapre.

Use this code and Enjoy B) :D



    <script type=\"text/javascript\">

function addToCompare()

        {



            var totalValueNow = parseInt($('.bt_compare').next('.compare_product_count').val());

            var totalVal;

            if(totalValueNow<3){

            $.ajax({

                url: 'index.php?controller=products-comparison&ajax=1&action=add&id_product=' +     {$product->id|intval},

                async: true,

                cache: false,

                type: 'Post',

                dataType: 'html'



           });

            compareButtonsStatusRefresh();

            totalVal = totalValueNow +1,

            $('.bt_compare').next('.compare_product_count').val(totalVal),

            totalValue(totalVal);

            $('.bt_compare').attr("disabled",false);

            $('.bt_compare').css("background-color","#E8490C");

            $('.bt_compare').css("color","#fff");



           }

           else{

            var $div8 = $(".comapare_max_limit");

            if ($div8.is(":visible")) { return; }

            $div8.show();

            setTimeout(function() {

            $div8.hide();

            }, 4000);



            var $div9 = $(".product-added_overlay");

            if ($div9.is(":visible")) { return; }

            $div9.show();

            setTimeout(function() {

            $div9.hide();

            }, 4000);

           }



    }

function totalValue(value)

{

   $('.bt_compare').find('.total-compare-val').html(value);

}

function compareButtonsStatusRefresh()

{

   $('.add_to_compare').each(function() {

       if ($.inArray(parseInt($(this).data('id-product')), comparedProductsIds) !== -1)

           $(this).addClass('checked');

       else

           $(this).removeClass('checked');

       });

}

    </script>

    {if isset($comparator_max_item) && $comparator_max_item}



        <a onclick="addToCompare()" href="#" data-id-product="{$product->id|intval}"><span class="product_btn_comparison">Add to Compare</span></a>

       <div class="comapare_max_limit">You cannot add more than 3 product(s) to the product comparison</div>



    {/if}

    {include file="./product-compare.tpl"}

I tried your code, very good start on this work (cheers). But i noticed that only the counter is updated, but the product itself is not added to the comparison. The URL i get when i hover on the "Add to compare" : http://mysite.com/index.php?id_product=14&controller=product#

I am not sure where the problem lies, could you have a second look at your code, then i will give my "like" to you for solving this one :-)

BTW: The green Compare button is something i consider as a nice "bonus" as well, so thanks for that :-)

frank_jarle · January 4, 2015

I noticed that the regular "Add to compare" has the following URL: http://mysite.com/index.php?id_product=14&controller=product

where as yours has the extra hash-sign at the end, hence only the counter is updated, but the product itself is not added to the comparison list. Possible to fix?

viji · January 5, 2015

Hi,

I used your code. It works, but the page redirects as mentioned url (http://localhost.com/projects/kabandi/en/products-comparison?compare_product_list=0 ), the page is blank. You mentioned that, more than 3 products cannot be added, but it adds more than 3 products.

frank_jarle · January 5, 2015

Hi,

I used your code. It works, but the page redirects as mentioned url (http://localhost.com/projects/kabandi/en/products-comparison?compare_product_list=0 ), the page is blank. You mentioned that, more than 3 products cannot be added, but it adds more than 3 products.

When you click on "Add to compare" does it actually add the product to compare or just the green button that is updated with new number.

To answer your question:

Change the following code:

From:

if(totalValueNow<3){

To:

if(totalValueNow<123){

The amount of products you allow to be added.

From:

<div class="comapare_max_limit">You cannot add more than 3 product(s) to the product comparison</div>

To:

<div class="comapare_max_limit">You cannot add more than 123 product(s) to the product comparison</div>

Amount of product you allow to compare.

The main code for changing the amount is held in "products-comparison.tpl (if i am not mistaken, i am not on a system to double check it at the moment) there is the main lead text for when you add more than one product.

Aditya Kaushik · January 5, 2015

Hi friends

As mentioned if you are geeting some url on the hover that means that the anchor tag for "Add to Compare" is having href value as the url , but as shown in the code submitted above it must be "#"-

<a onclick="addToCompare()" href="#" data-id-product="{$product->id|intval}"><span class="product_btn_comparison">Add to Compare</span></a>

The "#" you are getting in url has nothing to do with the add to comparison function and is not an error, it is coded so.

The actual work of adding the product to the comparison list is being done by ajax function mentioned in the javascript block of the above code-

$.ajax({
                    url: 'index.php?controller=products-comparison&ajax=1&action=add&id_product=' + {$product->id|intval},
                    async: true,
                    cache: false,
                    type: 'Post',
                    dataType: 'html'

                });

Possible errors that might have been done if this code is not working are-

1. The href value of "Add to compare" anchor<a> tag pointing to some page// --It must be "#" only.

<a onclick="addToCompare()" href="#" data-id-product="{$product->id|intval}"><span class="product_btn_comparison">Add to Compare</span></a>

2.In the ajax function in the javascript section the url must have a product id which in my case was-{$product->id|intval}, this variable name can be different too--

url: 'index.php?controller=products-comparison&ajax=1&action=add&id_product=' + {$product->id|intval},

I would advice to use the code pasted initially by me "as it is" to avoid any confusion of code. The code works and is to be pasted in product.tpl only

Hope this will help

Thanks

Edited January 5, 2015 by Aditya Kaushik (see edit history)

Aditya Kaushik · January 5, 2015

If it still not works

Add this code as it is in the product.js-

----------------------------------------------------------------------------

--------------------------------------------------------------------------------------

After this add the code below in product.tpl-

----------------------------------------------------------------------------

<div class="full_width compare-product">
    {if isset($comparator_max_item) && $comparator_max_item}

        <a onclick="addToCompare()" href="#" data-id-product="{$product->id|intval}"><span class="tn btn-default button button-medium"><i class="fa fa-plus"></i> Add to Compare</span></a>
        <div class="comapare_max_limit">You cannot add more than 3 product(s) to the product comparison</div>
        {*<a href="index.php?controller=products-comparison&ajax=1&action=add&id_product={$product->id|intval}" data-id-product="{$product->id|intval}"><span>Add to Compare</span></a>*}
    {/if}
    {include file="./product-compare.tpl"}
</div>

----------------------------------------------------------------------------

This should solve the problems B)

frank_jarle · January 5, 2015

Aditya Kaushik: If i understand you correctly, the javascript/ajax is moved into the product.js now and the original code i shal remove from product.tpl and replace it with your new code, correct?

frank_jarle · January 5, 2015

WOW, this worked like a charm!!!!!!

I am still a bit surprised why the initial code did not work for my system, after all it was defined with "script/javascript" and all the running code etc. Well, you have now solved a many months mystery for me, as i am not a developer and been trying to solve this particular one for months myself, it now just works. WOW!

Thank you A LOT Aditya Kaushik

viji · January 6, 2015

Hi,

Compare button is working, after click the 'Add to compare', it goes to the top. Button showing compare count, automatically update the count. It doesn't check the product is already in compare list or not. Can you please tell me what problem occurred in this?

frank_jarle · January 6, 2015

Hi,

Compare button is working, after click the 'Add to compare', it goes to the top. Button showing compare count, automatically update the count. It doesn't check the product is already in compare list or not. Can you please tell me what problem occurred in this?

When i look at the code provided, i do not see that it actually contains any "is this product already in the compare list"-check. I am not sure if this can be done or not.

grega33 · February 18, 2015

Looking forward to final solution!

Compare button on every product page

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites