Jump to content

How to add compare button in each product near view button on product-list page


Recommended Posts

  • 3 weeks later...

thanks for reply....PascalVG..... :)

As you said i have a compare button on top of the Product-listing page and Check boxes given in each product<li>....But i don't want this functionality....

Actually, i want a compare button on each product<li> (near ADD TO CART & VIEW buttons) on product-listing page and Don't want check boxes on page.....whenever i click on COMPARE button, that product should be added directly to PRODUCT-COMPARISON page.....

Link to comment
Share on other sites

  • 1 year later...

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) B) :D :D :D

 

 <!--Add to Compare---->

    <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"}
    
    <!------>

Link to comment
Share on other sites

×
×
  • Create New...