Show product image in search results while searching

[DARKF3D3]

I'm trying to show products image in AJAX search while searching the products, so i edited the line:

return value;

to:

return "<img src=\"" + baseDir + "img/p/" + data.id_product + "_small" + ".jpg\"  alt=\"" + value + "\" />" + value;

 

The problem is that with this method i call image named: id-product.jpg but the images of the products are called like 110-id-product.jpg, 20-id-product.jpg.

 

Someone know i can i call the right image?

[DARKF3D3]

No one know how to do that?

[And63]

What version of prestashop ? .

My mod in ajax search - http://fortec.pl

[DARKF3D3]

i'm using prestashop 1.4.9

[And63]

I modified :

1./classes/search.php

2/modules/blocksearch/blocksearch-top.tpl and blocksearch.tpl

my code in blocksearch-top.tpl look here:

tmp_value= "<img src=\"" + baseDir + "img/p/" + data.id_product+"-" + data.image + "-mini.jpg\" alt=\"" + value + "\" />" + value;

[DARKF3D3]

So after that line you write

return tmp_value;

?

[And63]

Yes, i get data image from sql query in search.php full code in.tpl:

<script type="text/javascript">
// <![CDATA[
{literal}
 $('document').ready( function() {
  $("#search_query_block")
   .autocomplete(
 '{/literal}{if $search_ssl == 1}{$link->getPageLink('search.php', true)}{else}{$link->getPageLink('search.php')}{/if}{literal}', {
  minChars: 3,
  max: 10,
  width: 500,
  selectFirst: false,
  scroll: false,
  dataType: "json",
  formatItem: function(data, i, max, value, term) {
   if(data.image!=null)
		  {
		    tmp_value= "<img src=\"" + baseDir + "img/p/" + data.id_product+"-" + data.image + "-mini.jpg\" alt=\"" + value + "\" />" + value;
		  }
		  else
		  {
		    tmp_value="<img src=\"" + baseDir + "img/p/pl-default-mini.jpg\" alt=\"" + value + "\" />" + value;
		  }
		  return tmp_value;
  },
  parse: function(data) {
   var mytab = new Array();
   for (var i = 0; i < data.length; i++)
    mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > <strong>' + data[i].preference +'</strong> '+ data[i].pname};
   return mytab;
  },
  extraParams: {
   ajaxSearch: 1,
   id_lang: {/literal}{$cookie->id_lang}{literal}
  }
 }
   )
   .result(function(event, data, formatted) {
 $('#search_query_block').val(data.pname);
 document.location.href = data.product_link;
   })
 });
{/literal}
// ]]>
</script>

I use this in Prestashop1.4.4.1 and 1.5.4 - works ok.

[DARKF3D3]

I try to use all your if condition, but for every products it goes in the ELSE so it never show the product image.

I don't understand why data.image is = null

[And63]

Since I have a few people have asked about it, I decided to share the modified files( prestashop1.4.4.1).

Remember about making backup copies of your files. !

On the BO -> tabs image I made a special class called "mini" for product.

If you want to take advantage of other sizes - you have to change it in the file .tpl

 

In my modification works on Prestashop 1.4.4.1 and 1.5.4 (other files are subject to change).

 

Demo of the page http://fortec.pl

 

Sorry for my english .

[DARKF3D3]

You're a genius, it work! Thanks!

 

I have another question, the search form show 10 results (value can be modified from the search.php file), but do you think is possible if there more than 10 result to show at the end of the list a link: "Show all", that clicking on it open the search page with all the results?

 

I would also like to limit the product name lenght to 40 chars...

Edited April 5, 2013 by DARKF3D3 (see edit history)

[phll]

Hi there, Hi And63, Thanks for your works !

 

I tried to use your attached files on my prestashop v1.5.4.1 with quick search block v1.2 and the search doesn't work anymore.

Could you explain me what did you change exactly ? I'll try to "patch" my own files.

 

BTW, does anyone run it on 1.5.4.1 ?

 

Thanks again,

 

Phil.

Edited August 27, 2013 by phll (see edit history)

[And63]

Hi there, Hi And63, Thanks for your works !

 

I tried to use your attached files on my prestashop v1.5.4.1 with quick search block v1.2 and the search doesn't work anymore.

Could you explain me what did you change exactly ? I'll try to "patch" my own files.

 

BTW, does anyone run it on 1.5.4.1 ?

 

Thanks again,

 

Phil.

Look this ( solution vor 1.4.4.1 and 1.5.4.1) : http://www.prestashop.com/forums/topic/260934-zdjecie-produktu-w-wyszukiwarce-moje-rozwiazanie/page__hl__zdj%C4%99cie

 

It works for 1.5.4.1 example: http://flashitall.com

[phll]

Thanks ! You replied quickly ! Looks perfect.

Have a nice day !

 

Funny shop by the way

[max0509]

Hi there,

 

I've tried this method but it doesn't show the product image. It only displays the /p-default-mini.jpg (in our case: 404.gif). We do have a lot of images and subdirectories in the img map, maybe that has something to do with it?

 

Example of an image path: img/p/6/7/0/0/9/67009-small.jpg

 

We are running on Prestashop 1.4.8.2.

 

Thanks!

[jhon alba]

hi,i use prestashop 1.6,please help me in add image and price to guick result search,very thanks.

[jhon alba]

hi my friend,please help me

[max0509]

Been experimenting again with this but still no luck. As I said before the image path is this: img/p/6/7/0/0/9/67009-small.jpg
My guess is that I need to read the id_image instead of id_product.
 
Originally the line looked like this:

tmp_value= "<img src=\"" + baseDir + "img/p/" + data.id_product + "-" + data.image + "-small.jpg\" alt=\"" + value + "\" />" + value;

I changed it to this which somehow makes more sense if you look at the image path and gives this as the img source "img/p/35234/67009-small.jpg":

tmp_value= "<img src=\"" + baseDir + "img/p/" + data.id_product + "/" + data.image + "-small.jpg\" alt=\"" + value + "\" />" + value;

 
If I edit "data.id_product" to "data_id_image" I'm getting "img/p/undefined/67009-small.jpg":

tmp_value= "<img src=\"" + baseDir + "img/p/" + data.id_image + "/" + data.image + "-small.jpg\" alt=\"" + value + "\" />" + value;

 
I hope someone knows a solution.

Edited October 24, 2014 by max0509 (see edit history)

[max0509]

Fixed it using this line:

return "<img src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image + "-home.jpg\" alt=\"" + value + "\" />" + value;

[shookai]

hi all,

It doesn't work with 1.6 version of prestashop

Anyone can help me ?

Thx 

[mecollectibles]

Any suggestion for version 1.6 ?

[sondiva]

Can anybody help to get Rates of Products and Add to Cart option with Quantity in Ajax Live Search????.. It would be a nice addon...