[FREE TUTORIAL] Adding the Compare button to the Product page

[NemoPS]

Hey everybody!

I got curious after reading this user's post: http://www.prestashop.com/forums/topic/266574-how-to-add-compare-to-the-product-page-not-only-category/

 

I went deeper and came up with a tutorial on how to add the compare butto nto the single product page. Here it is!

 

http://nemops.com/compare-button-to-product-page/

 

Cheers!

[damian5000]

The tutorial isn't very noob friendly. Step 1 is clear enough, but then step 2 and 3 aren't so clear. Is this added to the .php created in step 1? So, I have this in a file called productcontroller.php, is it correct?

<?php
 
class ProductController extends ProductControllerCore
{
}
public function setMedia()
{
    parent::setMedia();
 
    if (Configuration::get('PS_COMPARATOR_MAX_ITEM'))
        $this->addJS(_THEME_JS_DIR_.'products-comparison.js');
}
public function initContent()
{
 
    $this->context->smarty->assign('comparator_max_item', Configuration::get('PS_COMPARATOR_MAX_ITEM'));
 
    if (isset($this->context->cookie->id_compare))
        $this->context->smarty->assign('compareProducts', CompareProduct::getCompareProducts((int)$this->context->cookie->id_compare));
 
    parent::initContent();
}

?>

Edited September 8, 2013 by damian5000 (see edit history)

[NemoPS]

Yes, that's correct, it's the same php file

[damian5000]

Thanks... So it's perfect as shown? I mean, all the functions and closing signs are in the right place? Or should the 'public functions' go within 'class product controller....'

 

BTW, thanks for the tutorial. It blows my mind this isn't default functionality.

Edited September 10, 2013 by damian5000 (see edit history)

[frosticek]

Guys,

Actually you do not need to modify core files, you can use only tpl files.

Array {$compareProduct} can be replaced with simple: {CompareProduct::getCompareProducts((int)$cookie->id_compare)}

 

Thats it, so easy

[NemoPS]

Yes. but it's always better to keep logic away from views as whenever possible

[frank_jarle]

Is it possible to not use the checkbox, just have a Add to Compare button?

I would like to have a "Add to compare" above "Add to Wishlist" and i think it just looks neater without the [ ] checkbox. Thanks!

Edited November 1, 2014 by frank_jarle (see edit history)

[NemoPS]

Well yes, but you have to create a javascript trigger for it, different than the compare.tpl one

[frank_jarle]

I am not sure if i understand. Does that means that it is not possible to add "Compare" to the product page without having the checkbox? In my mind "add to wishlist" looked so simple but to add "compare" without the checkbox seems to complicated :-) Or is it just complicated in my head?

 

Frank

[NemoPS]

As I said, you can, but you need to add some javascript as well as html

[frank_jarle]

Sorry, i am not a developer, i am a spoon-feed-me admin :-)

[davidmr92]

Dont works on PS 1.6+

[NemoPS]

Well you need to adapt the template's code, of course, did you just copy/paste?

[davidmr92]

Yes, I don't know to adapt this. Could you help me please?

[kosm12]

You must create ProductController.php how write this, but in product.tpl you must insert 

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

<div class="compare">
<a class="add_to_compare" href="#" data-id-product="{$product->id|intval}">{l s='Add to Compare'}</a>
</div>
{/if}
{include file="./product-compare.tpl"}

 

and I add this:

{*Products compare *}
{addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
{addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
{addJsDef comparator_max_item=$comparator_max_item}
{addJsDef comparedProductsIds=$compared_products}

[mmsh]

hello,

PS 1.4

 

in addition to "$this->context" which you can't use on PS 1.4

 

which are the differences, please?

How to let it work on PS 1.4? I tried something but with no success... thanks

[mmsh]

in PS 1.4 there is no CompareProduct.php class and no ps_compare table (for getCompareProducts () function )

 

I was able to put the select and compare buttons on the page, but is there a way to keep the products in the cookie in PS 1.4 when the user clicks on the selection box?

thanks

[NemoPS]

You might have added it inside another <form> which causes your second one not to be loaded

[mrhandaka]

i have followed the tutorial, but i got 404 error after that. It shows 404 Error every I open the product details.

I have deleted the productcontroller.php and undo the product.tpl like before but it still 404 Error.

 

can i get some help? 

[NemoPS]

Sounds strange, did you clear the class index after you removed the override?

[mrhandaka]

Sounds strange, did you clear the class index after you removed the override?

 

I have solved it by myself. haha, i had removed the ProductController.php in public_html/controllers/front/ as accidentally.

[gabrielio]

Thanks for the solution, i solved it like this:

1. Create the override file ProductController.php (like @NemoPS mentioned in his tutorial link) containing the code shown below and upload the file to override/controllers/front

<?php
 
class ProductController extends ProductControllerCore
{
    public function setMedia()
{
    parent::setMedia();
 
    if (Configuration::get('PS_COMPARATOR_MAX_ITEM'))
        $this->addJS(_THEME_JS_DIR_.'products-comparison.js');
}
public function initContent()
{
 
    $this->context->smarty->assign('comparator_max_item', Configuration::get('PS_COMPARATOR_MAX_ITEM'));
     
    if (isset($this->context->cookie->id_compare))
        $this->context->smarty->assign('compareProducts', CompareProduct::getCompareProducts((int)$this->context->cookie->id_compare));
 
    parent::initContent();
}   
}
?>

 

2. In product.tpl  add the following code (like @kosm12 mentioned) where you want the "add to compare" button to appear. You can customise the check button using css before and after.

<div class="compare_product_page">    
            {if isset($comparator_max_item) && $comparator_max_item}
            <div class="compare">
            <a class="add_to_compare" href="#" data-id-product="{$product->id|intval}">{l s='Add to Compare'}</a>
            </div>
            {/if}
            {include file="./product-compare.tpl"}
            </div>

            {*Products compare *}
            {addJsDefL name=min_item}{l s='Please select at least one product' js=1}{/addJsDefL}
            {addJsDefL name=max_item}{l s='You cannot add more than %d product(s) to the product comparison' sprintf=$comparator_max_item js=1}{/addJsDefL}
            {addJsDef comparator_max_item=$comparator_max_item}
            {addJsDef comparedProductsIds=$compared_products}

 

You can see the results live, here: https://laptop-hunter.com/notebook-hp-15-dw0012na-6pc36ea-silver-6098.html

 

PS: I forgot to mention that i use Prestashop 1.6.1.18.

Thank you!

Edited August 21, 2019 by gabrielio (see edit history)

[ruisonika]

Is it possible to add in product-list.tpl?

[niekoarchimedes]

I would like to have a "Add to compare" above "Add to Wishlist" and  water damage restoration  i think it just looks neater without the [ ] checkbox. Thanks!

Edited April 27, 2021 by niekoarchimedes (see edit history)