Add an image on instant search

Creestoof · April 11, 2013

Hi everybody !

I have a difficulty to add an image on the instant search.

I think i should modify anything in this file : blocksearch-instantsearch.tpl

But i dont know how get the image for each product..

{if $instantsearch}
<script type="text/javascript">
// <![CDATA[
 function tryToCloseInstantSearch() {
  if ($('#old_center_column').length > 0)
  {
$('#center_column').remove();
$('#old_center_column').attr('id', 'center_column');
$('#center_column').show();
return false;
  }
 }

 instantSearchQueries = new Array();
 function stopInstantSearchQueries(){
  for(i=0;i<instantSearchQueries.length;i++) {
instantSearchQueries[i].abort();
  }
  instantSearchQueries = new Array();
 }

 $("#search_query_{$blocksearch_type}").keyup(function(){
  if($(this).val().length > 0){
stopInstantSearchQueries();
instantSearchQuery = $.ajax({
 url: '{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}',
 data: {
  instantSearch: 1,
  id_lang: {$cookie->id_lang},
  q: $(this).val()
 },
 dataType: 'html',
 type: 'POST',
 success: function(data){
  if($("#search_query_{$blocksearch_type}").val().length > 0)
  {
   tryToCloseInstantSearch();
   $('#center_column').attr('id', 'old_center_column');
   $('#old_center_column').after('<div id="center_column" class="' + $('#old_center_column').attr('class') + '">'+data+'</div>');
   $('#old_center_column').hide();
   $("#instant_search_results a.close").click(function() {
	$("#search_query_{$blocksearch_type}").val('');
	return tryToCloseInstantSearch();
   });
   return false;
  }
  else
   tryToCloseInstantSearch();
 }
});
instantSearchQueries.push(instantSearchQuery);
  }
  else
tryToCloseInstantSearch();
 });
// ]]>
</script>
{/if}
{if $ajaxsearch}
<script type="text/javascript">
// <![CDATA[
 $('document').ready( function() {
  $("#search_query_{$blocksearch_type}")
.autocomplete(
 '{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}', {
  minChars: 3,
  max: 10,
  width: 500,
  selectFirst: false,
  scroll: false,
  dataType: "json",
  formatItem: function(data, i, max, value, term) {
   return 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 + ' > ' + data[i].pname };
   return mytab;
  },
  extraParams: {
   ajaxSearch: 1,
   id_lang: {$cookie->id_lang}
  }
 }
)
.result(function(event, data, formatted) {
 $('#search_query_{$blocksearch_type}').val(data.pname);
 document.location.href = data.product_link;
})
 });
// ]]>
</script>
{/if}

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };

there is what we see in the search bar. But i dont know what i should add to get the image.

If anyone can help me to find how i can do this.. thanks a lot.

Edited April 11, 2013 by Creestoof (see edit history)

valx · May 15, 2013

did you solve it?

my prestashop version is 1.5.4.0

ruchit.devil · June 5, 2013

just try changing the following in \xampp\htdocs\prestashop\themes\yourtheme\module\blocksearch-instantsearch.tpl

$("#search_query_{$blocksearch_type}")

.autocomplete(

'{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}', {

minChars: 3,

max: 10,

width: 500,

selectFirst: false,

scroll: false,

dataType: "json",

formatItem: function(data, i, max, value, term) {

return value;

to

$("#search_query_{$blocksearch_type}")

.autocomplete(

'{if $search_ssl == 1}{$link->getPageLink('search', true)}{else}{$link->getPageLink('search')}{/if}', {

minChars: 3,

max: 10,

width: 500,

selectFirst: false,

scroll: false,

dataType: "json",

formatItem: function(data, i, max, value, term) {

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

And63 · June 5, 2013

Are you looking for something like this could - a link to my test page: http://ar.az.pl/miro/

If so, give the solution - not enough to change the entries in instantsearch.tpl, you still need to rewrite the class search.php.

This entry above with the addition of the image will not work in PS 15.4 is another path to the image.

vekia · June 5, 2013

Are you looking for something like this could - a link to my test page: http://ar.az.pl/miro/

If so, give the solution - not enough to change the entries in instantsearch.tpl, you still need to rewrite the class search.php.

This entry above with the addition of the image will not work in PS 15.4 is another path to the image.

hello

it looks really good, can you give us more information how to achieve this?

We will be really grateful :-)

vekia · June 5, 2013

btw. your page uses mixed language polish and czech probably, is something wrong there?

And63 · June 6, 2013

In file /modules/blocksearch/instantsearch.tpl line 72:
change from:

{return value;}

change to:

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

In file/classes/search.php change line 259:
from:

{
$sql = 'SELECT DISTINCT p.id_product, pl.name pname, cl.name cname,
cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
FROM '._DB_PREFIX_.'product p
INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
p.`id_product` = pl.`id_product`
AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
)
'.Shop::addSqlAssociation('product', 'p').'
INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
product_shop.`id_category_default` = cl.`id_category`
AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
)

to:

{
$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image, pl.name pname, cl.name cname,
cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
FROM '._DB_PREFIX_.'product p
INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
p.`id_product` = pl.`id_product`
AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
)
'.Shop::addSqlAssociation('product', 'p').'
INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
product_shop.`id_category_default` = cl.`id_category`
AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
)
LEFT JOIN `'._DB_PREFIX_.'image` im ON (p.`id_product` = im.`id_product`AND `cover` = 1)

Its -all

My files in attachment.

Before flashing necessarily take a backup of your original files !!!

BTW - this site have status test

.For now, I have the default language set to Polish shop - will ultimately Slovak - hence the description of the products, categories, and more in the Slovak language

Please - answer, whether it is all right.

FOTO_AJAX1.5 (1).ZIP

Edited December 25, 2013 by And63 (see edit history)

YanK1973 · July 5, 2013

Great work And63!

Edited July 5, 2013 by yanc (see edit history)

vekia · July 8, 2013

hmm i checked page and instant search doesnt work, so this method works as you expect?

And63 · July 11, 2013

It works. Look in another site:

http://vidimevas.sk

or

http://eden24.pl

Prestashop 1.5.4.1

vekia · July 11, 2013

yesss! you've got absolutely right, i checked it once again and now it works

i suppose that it was related to the cache issue in my browser (browser remembered old css etc. files from your website because i browsed it)

Davallen · September 17, 2013

In file /modules/blocksearch/instantsearch.tpl line 72:

change from:

{return value;}

change to:

{return "<img src="\""" +="" basedir="" "img="" p="" "="" data.image.split('').join('="" ')+"="" data.image+="" "-small_default.jpg\"="" alt="\""" value="" "\"="">" + value;}

In file/classes/search.php change line 259:

from:

  {
   $sql = 'SELECT DISTINCT p.id_product, pl.name pname, cl.name cname,
	  cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
	 FROM '._DB_PREFIX_.'product p
	 INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
	  p.`id_product` = pl.`id_product`
	  AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
	 )
	 '.Shop::addSqlAssociation('product', 'p').'
	 INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
	  product_shop.`id_category_default` = cl.`id_category`
	  AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
	 )

to:

  {
	$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image, pl.name pname, cl.name cname,
	  cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
	 FROM '._DB_PREFIX_.'product p
	 INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
	  p.`id_product` = pl.`id_product`
	  AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
	 )
	 '.Shop::addSqlAssociation('product', 'p').'
	 INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
	  product_shop.`id_category_default` = cl.`id_category`
	  AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
	 )
	  LEFT JOIN `'._DB_PREFIX_.'image` im ON  (p.`id_product` = im.`id_product`AND `cover` = 1)

Its -all

My files in attachment.

Before flashing necessarily take a backup of your original files !!!

BTW - this site have status test .For now, I have the default language set to Polish shop - will ultimately Slovak - hence the description of the products, categories, and more in the Slovak language

Please - answer, whether it is all right.

Awesome, works really great! If I'd like to add the product price also, would that be possible?

And63 · September 17, 2013

Yes - it possible

In file /modules/blocksearch/instantsearch.tpl line 90:
change from:

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };

change to:

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname + ' > ' + data[i].pprice };

And In file/classes/search.php change line 259:

from:

$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image, pl.name pname, cl.name cname,

to:

$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,p.price pprice,im.id_image image, pl.name pname, cl.name cname,

Davallen · September 17, 2013

Yes - it possible

In file /modules/blocksearch/instantsearch.tpl line 90:

change from:

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };

change to:

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname + ' > ' + data[i].pprice };

And In file/classes/search.php change line 259:

from:

$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image, pl.name pname, cl.name cname,

to:

$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,p.price pprice,im.id_image image, pl.name pname, cl.name cname,

Thank you! It works but the highlight of the characters you've typed is not highlighted anymore and the price is without taxes in 6 decimals. It somehow removed this function.

Here's the url if you wan't to have a look www.freshsmoke.dk

And63 · September 18, 2013

This is just an example of how to add something to search for in the evening see how to add price in the correct format

Edited September 18, 2013 by And63 (see edit history)

And63 · September 19, 2013

In file /modules/blocksearch/instantsearch.tpl line 90:

change from:

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname + ' > ' + data[i].pprice };

to:

mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname + ' > ' + Number((data[i].pprice)*1.23).toFixed(2)+ ' € ' };

where in this example 1.23 -> tax in shop

€ - currency symbol

Edited September 19, 2013 by And63 (see edit history)

Sharak · November 13, 2013

Does it work on final presta 1.5.6.0? I did everything right but no effect in front office. Tried with friendly url enabled and disabled.

vekia · November 13, 2013

Does it work on final presta 1.5.6.0? I did everything right but no effect in front office. Tried with friendly url enabled and disabled.

hello

your website is online? please share url, it will be much easier to check what's going on there

Sharak · November 13, 2013

With changes made like above instant search doesn't show at all. Could it be because of specific base url? The domain hasn't been fixed yet so it's a server url. Cache disabled and forced compile.

Files are definitely different than the ones And63 had changed as line numbers don't match in 1.5.6.0. For me this:

{return "<img src="\""" +="" basedir="" "img="" p="" "="" data.image.split('').join('="" ')+"="" data.image+="" "-small_default.jpg\"="" alt="\""" value="" "\"="">" + value;}

...goes to line 74 in /modules/blocksearch/blocksearch-instantsearch.tpl (there isn't any instantsearch.tpl file)

and this:

{
$sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image, pl.name pname, cl.name cname, cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
	FROM '._DB_PREFIX_.'product p
	INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
		p.`id_product` = pl.`id_product`
		AND pl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
	)
	'.Shop::addSqlAssociation('product', 'p').'
	INNER JOIN `'._DB_PREFIX_.'category_lang` cl ON (
		product_shop.`id_category_default` = cl.`id_category`
		AND cl.`id_lang` = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
	)
	LEFT JOIN `'._DB_PREFIX_.'image` im ON  (
		p.`id_product` = im.`id_product`AND `cover` = 1
	)
	WHERE p.`id_product` '.$product_pool.'
	ORDER BY position DESC LIMIT 10';
	return $db->executeS($sql);
}

...goes from line 279 in if($ajax) part in /classes/search.php

Edited November 3, 2014 by Sharak (see edit history)

Sharak · November 13, 2013

Found it

And63's attached files are correct but code in his post isn't as it looks like this:

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

It should look like this:

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

Edited November 13, 2013 by Sharak (see edit history)

vekia · November 13, 2013

yess i can confirm, i checked your website and now images appear

seog · December 14, 2013

Hello

Thanks for this tip. How can I align product name text in middle of image?

I tried with vertical-align:middle but this don´t work

best regards

vekia · December 14, 2013

hello

vertical-align is a definition for <table> <td> markups.

to use it in span/div etc you have to use also display:table-cell; css style

Zikma Solutions · December 25, 2013

I Still can't get this instant search on my presta 1.5.6.1

look at http://printcloud.ch/test/ and type "fly" or "plast"

Please help me... i do everything what you said

Zikma Solutions · December 25, 2013

Dumb!!!

Really need this done!! Please help!

And63 · December 25, 2013

Zikma - in test site instant search work corectly. I type "fly" and results show me. If you have images in results of search look post #7 in this topic.

My solution works with all version Prestashop > 1.5

ZikmaSolutions · May 7, 2014

Hi all , can someone give me full module of this search with images showing...

Thanks to all.

ZikmaSolutions · May 8, 2014

bumpp! Vekiaa helpp

And63 · May 10, 2014

In this post:

http://www.prestashop.com/forums/topic/260934-zdjecie-produktu-w-wyszukiwarce-moje-rozwiazanie/?p=1300364

You have solutions for prestashop 1.4, 1.5, 1.6 - unzip files and replace original - its all

hminh123456 · October 28, 2014

thank for share

juanfjk · November 12, 2014

Hello, thank you And63, but I have a clue for prestashop 1.6. I don´t use /modules/blocksearch/instantsearch.tpl to replace the code, I used themes\your_theme\js\modules\blocksearch and it works.

FERMB · December 1, 2014

Todo estupendo.

Pero necesitaría poner un texto (una frase concreta) sobre el listado de resultados de la busqueda ajax, a la que le hemos puesto las fotos y no consigo que el texto aparezca sobre el listado y que mantega el efecto de ajax.

Como podría incluir una frase, sobre el listado ajax de productos?

All rights, thanks.

I want to write a specific text over the results of the ajax search. How can i put a text over the list of product.?

Thanks.

geotargetplus · December 10, 2015

Found it

And63's attached files are correct but code in his post isn't as it looks like this:

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

It should look like this:

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

Working 1.6.

امیر · December 18, 2015

plz help me

my presta is 1.6.1.2

i chnage code but no display image

geotargetplus · December 18, 2015

plz help me

my presta is 1.6.1.2

i chnage code but no display image

themes/youtheme/js/blocksearch/blocksearch.js

Line from 45-47

formatItem: function(data, i, max, value, term) {

return value;

},

Change to:

formatItem: function(data, i, max, value, term) {

{return "<img src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + "<div style=\"float:right;width: 65%; padding-top: 20px; padding-right:3%\">"+ value + "</div>";}

},

for classes/Search.php

Before line 290

WHERE p.`id_product` '.$product_pool.'

Add

LEFT JOIN `'._DB_PREFIX_.'image` im ON (

p.`id_product` = im.`id_product`AND `cover` = 1

)

You can move Search.php to override/clasess and it's all.

Nixnix · March 1, 2016

themes/youtheme/js/blocksearch/blocksearch.js

(...)

for classes/Search.php

(...)

You can move Search.php to override/clasess and it's all.

I tried these changes on 1.6.0.9 but it didn't work for me.

I saw someone had uploaded the changed files for 1.6.0.6 in another (Polish) thread but those files are no longer available for download.

Does anyone know how to achieve this on 1.6.0.9?

That version is already quite old but we can not upgrade at the moment and this would be a great feature for our customers.

draganv · March 22, 2016

How for 1.6.1.4 ???

SergioE · April 6, 2016

Works in 1.6.1.4?

Yuri_SFAT · May 2, 2016

Bump - does anyone has a working version for 1.6.1.5?

artur0588 · June 24, 2016

Bump - does anyone has a working version for 1.6.1.5?

yes, working on 1.6.1.5

You need modify blocksearch.js from yourtheme/js/modules/blocksearch/blocksearch.js

and Search.php from classes/Search.php

I have attached modified files.

In blocksearch.js i have modified line 46

In Search.php modified line 287 and added line 299

If need you can modify image width in your theme/css/modules/blocksearch/blocksearch.css

for exampl I have added code:

 .ac_results li img {    float: left !important;
    margin-right: 8px !important;
    width: 54px;}

PS 1.6.1.5 modified files image search.zip

Edited June 24, 2016 by artur0588 (see edit history)

hakeryk2 · June 29, 2016

artur0588 You should create an override for Search.php instead of editing core files - It will be better when updating prestashop. This is my solution - Paste this file into yourdomain.com/override/classes/

After that go to yourdomain.com/cache and delete cache_index.php to refresh override index.

Anyway - thanks for Your work!

Search.php

sumit19911991 · August 22, 2016

here you get image and price ..

blocksearch.js(in your selected theme)\modules\blocksearch\blocksearch.js

return "<img height='40px' src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + value+ "<b>(" +parseFloat(data.price).toFixed(2)+")</b>";

classes\search.php

SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image,price1.price, pl.name pname, cl.name cname,

cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'

FROM '._DB_PREFIX_.'product p

INNER JOIN '._DB_PREFIX_.'product_lang pl ON (

p.id_product = pl.id_product

AND pl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'

)

'.Shop::addSqlAssociation('product', 'p').'

INNER JOIN '._DB_PREFIX_.'category_lang cl ON (

product_shop.id_category_default = cl.id_category

AND cl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'

)

LEFT JOIN '._DB_PREFIX_.'image im ON (p.id_product = im.id_product AND cover = 1)

LEFT JOIN '._DB_PREFIX_.'product_attribute_shop price1 ON (p.id_product = price1.id_product)

WHERE p.`id_product` '.$product_pool.'

ORDER BY position DESC LIMIT 20

SergioE · August 22, 2016

here you get image and price ..

blocksearch.js(in your selected theme)\modules\blocksearch\blocksearch.js

return "<img height='40px' src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + value+ "<b>(" +parseFloat(data.price).toFixed(2)+")</b>";

classes\search.php

SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image,price1.price, pl.name pname, cl.name cname,

cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'

FROM '._DB_PREFIX_.'product p

INNER JOIN '._DB_PREFIX_.'product_lang pl ON (

p.id_product = pl.id_product

AND pl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'

)

'.Shop::addSqlAssociation('product', 'p').'

INNER JOIN '._DB_PREFIX_.'category_lang cl ON (

product_shop.id_category_default = cl.id_category

AND cl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'

)

LEFT JOIN '._DB_PREFIX_.'image im ON (p.id_product = im.id_product AND cover = 1)

LEFT JOIN '._DB_PREFIX_.'product_attribute_shop price1 ON (p.id_product = price1.id_product)

WHERE p.`id_product` '.$product_pool.'

ORDER BY position DESC LIMIT 20

Run this in version 1.6.0.9 ?

ZikmaSolutions · November 11, 2016

here you get image and price ..

blocksearch.js(in your selected theme)\modules\blocksearch\blocksearch.js

return "<img height='40px' src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + value+ "<b>(" +parseFloat(data.price).toFixed(2)+")</b>";

classes\search.php

SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image,price1.price, pl.name pname, cl.name cname,

cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'

FROM '._DB_PREFIX_.'product p

INNER JOIN '._DB_PREFIX_.'product_lang pl ON (

p.id_product = pl.id_product

AND pl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'

)

'.Shop::addSqlAssociation('product', 'p').'

INNER JOIN '._DB_PREFIX_.'category_lang cl ON (

product_shop.id_category_default = cl.id_category

AND cl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'

)

LEFT JOIN '._DB_PREFIX_.'image im ON (p.id_product = im.id_product AND cover = 1)

LEFT JOIN '._DB_PREFIX_.'product_attribute_shop price1 ON (p.id_product = price1.id_product)

WHERE p.`id_product` '.$product_pool.'

ORDER BY position DESC LIMIT 20

This not work for me... Anyone? PrestaShop™ 1.6.0.6

Tatort · November 18, 2016

Working perfect thank you, anyone now about adding description?

I think i have to add: pl.`description_short` or that pl.description_short ?

classes\search.php

SELECT DISTINCT p.id_product id_product, pl.`description_short`, p.reference preference,im.id_image image,price1.price, pl.name pname, cl.name cname,

cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'

FROM '._DB_PREFIX_.'product p

INNER JOIN '._DB_PREFIX_.'product_lang pl ON (

p.id_product = pl.id_product

AND pl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'

)

but after ? it's a mysterie for me

that maybe ?

LEFT JOIN '._DB_PREFIX_.'product_attribute_shop pl ON (p.id_product = pl.id_product)

And after in js ? no idea ?

Someon can help me plz ?

Thanks

Tatort · November 18, 2016

This not work for me... Anyone? PrestaShop™ 1.6.0.6

Did you erase your cache and class_index.php on cache ?

Tatort · December 2, 2016

nobody has idea for adding the short text ?

Tatort · December 2, 2016

Hello so little transformation....

I have now only the picture, the title, and a description for product... It's not clean but it's working:

in blocksearch.js(in your selected theme)\modules\blocksearch\blocksearch.js:

if (typeof ajaxsearch != 'undefined' && ajaxsearch) {
		$input.autocomplete(
			search_url,
			{
				minChars: 3,
				max: 10,
				width: (width_ac_results > 0 ? width_ac_results : 500),
				selectFirst: false,
				scroll: false,
				dataType: "json",
				formatItem: function(data, i, max, value, term) {
				return "<div class='title'>"+ data.pname + "</div>" +  "<div class='desc'>" + "<div class='img-search' style=\"float:left;\"><img height='80px' src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" /></div>" + "<div class='inline-block'>"+data.description_short+ "</div>"+"</div>";

				},
				parse: function(data) {
					var mytab = [];
					for (var i = 0; i < data.length; i++)
						mytab[mytab.length] = { data: data[i], value: data[i].cname + ' > ' + data[i].pname };
					return mytab;
				},
				extraParams: {
					ajaxSearch: 1,
					id_lang: id_lang
				}
			}
		)

and in classes\search.php:

if ($ajax) {
            $sql = 'SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image,price1.price, pl.name pname, cl.name cname, pl.description_short,	cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'
					FROM '._DB_PREFIX_.'product p
					INNER JOIN '._DB_PREFIX_.'product_lang pl ON (
					p.id_product = pl.id_product
					AND pl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'
					)
					'.Shop::addSqlAssociation('product', 'p').'
					INNER JOIN '._DB_PREFIX_.'category_lang cl ON (
					product_shop.id_category_default = cl.id_category
					AND cl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'
					)
					LEFT JOIN '._DB_PREFIX_.'image im ON (p.id_product = im.id_product AND cover = 1)
					LEFT JOIN '._DB_PREFIX_.'product_attribute_shop price1 ON (p.id_product = price1.id_product) // if you want the price


					WHERE p.`id_product` '.$product_pool.'
					ORDER BY position DESC LIMIT 20';
            return $db->executeS($sql, true, false);
        }

My CSS:

/* ---------- Instant result search
========================================================================== */

.ac_results {
	/*min-width: 200px;
	display: table;
	width: auto!important;*/
	min-width: 460px;
	max-width: 460px;
	margin-top: 5px;
}
.ac_results li {
	cursor: default;
	display: block;
	font-size: 12px;
	line-height: 16px;
	margin: 10px 0;
	overflow: hidden;
	padding: 2px 10px;
	width: 100%;
}
.ac_results li span img {
	border: 1px solid #eee;
}
.ac_results li span {
	display: inline-block;
	height: auto;
	/*line-height: 36px;*/
	padding: 2px;
	vertical-align: top;
}
.ac_results li span:first-child {
	margin-right: 10px;
}
.ac_results {
	z-index: 5002;
}

.ac_results .desc {
  margin-top: 10px;
}

.ac_results .desc .img-search, .ac_results .desc .inline-block {
}
.ac_results .desc .img-search  {
  width: 28%;
}
.ac_results .desc .inline-block {
  width: 72%;
}

And now it's working ... i'm sure a better way is possible

Edited December 2, 2016 by Tatort (see edit history)

Tatort · December 2, 2016

The other point i want is...
When you have a production with some variations...

When i search one variation with SKU, and when i click on the link i don't go on the good product but on the default variation. Someone has the same problem ?

Tatort · May 3, 2017

Up

Tatort · May 8, 2017

The other point i want is...

When you have a production with some variations...

When i search one variation with SKU, and when i click on the link i don't go on the good product but on the default variation. Someone has the same problem ?

Seriously nobodies know.... How sad....

Edited May 8, 2017 by Tatort (see edit history)

vkmaxx · October 19, 2017

artur0588 You should create an override for Search.php instead of editing core files - It will be better when updating prestashop. This is my solution - Paste this file into yourdomain.com/override/classes/

After that go to yourdomain.com/cache and delete cache_index.php to refresh override index.

Anyway - thanks for Your work!

Confirmed working on 1.6.1.17, all problems were solved by deleting cache_index.php

Best formating of images + descrpition for me is:

return "<img src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-cart_default.jpg\" alt=\"" + value + "\" />" + " <div style=\"display: inline-block;width: 65%; padding-top: 20px\">"+ value + "</div>";

Aumanz · March 25, 2018

Any way to show product price? I mean, product default attribute price..

Because following tips on this post im getting price, but it shows 0 (zero) if product has attributes.

Ive got

'product_attribute` pa ON (p.`id_product` = pa.`id_product` AND default_on = 1)

but i dont know how to use it, or if it helps..

Please, some help. Thanks.

Edited March 25, 2018 by Aumanz (see edit history)

airjohn · April 24, 2018

On 22/8/2016 at 3:08 PM, sumit19911991 said:

here you get image and price ..

blocksearch.js(in your selected theme)\modules\blocksearch\blocksearch.js

return "<img height='40px' src=\"" + baseDir + "img/p/" + data.image.split('').join('/')+"/" + data.image+ "-small_default.jpg\" alt=\"" + value + "\" />" + value+ "<b>(" +parseFloat(data.price).toFixed(2)+")</b>";

classes\search.php

SELECT DISTINCT p.id_product id_product,p.reference preference,im.id_image image,price1.price, pl.name pname, cl.name cname,

cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.'

FROM '._DB_PREFIX_.'product p

INNER JOIN '._DB_PREFIX_.'product_lang pl ON (

p.id_product = pl.id_product

AND pl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('pl').'

)

'.Shop::addSqlAssociation('product', 'p').'

INNER JOIN '._DB_PREFIX_.'category_lang cl ON (

product_shop.id_category_default = cl.id_category

AND cl.id_lang = '.(int)$id_lang.Shop::addSqlRestrictionOnLang('cl').'

)

LEFT JOIN '._DB_PREFIX_.'image im ON (p.id_product = im.id_product AND cover = 1)

LEFT JOIN '._DB_PREFIX_.'product_attribute_shop price1 ON (p.id_product = price1.id_product)

WHERE p.`id_product` '.$product_pool.'

ORDER BY position DESC LIMIT 20

Works fine for me: 1.6.1.14

But instead of the price I get "(Nan)" at the end of each search result.

Any help please?

Aumanz · April 24, 2018

It should have currency at end, but i dont know how to get it.. normally function to get prices, format to complete info..

Maybe a $id_currency can help you, but dont know if is declared right now.. i need to ask you if this shows prices with products having attributes... is its yes, maybe i will try in few days and can help you more then, ive lost many time trying, and now have a stable version running on my web.

Edit: try adding a line in extraParams

id_currency: {$cookie->id_currency},

Hope it helps..

Edited April 24, 2018 by Aumanz (see edit history)

airjohn · April 25, 2018

11 hours ago, Aumanz said:
It should have currency at end, but i dont know how to get it.. normally function to get prices, format to complete info..

Maybe a $id_currency can help you, but dont know if is declared right now.. i need to ask you if this shows prices with products having attributes... is its yes, maybe i will try in few days and can help you more then, ive lost many time trying, and now have a stable version running on my web.

Edit: try adding a line in extraParams
id_currency: {$cookie->id_currency},
Hope it helps..

I can't get price at all, no matter if products have attributes or not.

(" +parseFloat(data.price).toFixed(2)+") returns (NaN)

airjohn · April 25, 2018

I think I get it work.

Prices were null since ps_product_attribute_shop table had no records. So, as you said no product had attributes.

I changed :

LEFT JOIN '._DB_PREFIX_.'product_attribute_shop price1 ON (p.id_product = price1.id_product)

to

LEFT JOIN '._DB_PREFIX_.'product price1 ON (p.id_product = price1.id_product)

so that prices are red from ps_product table. It looks that it work now. Of course they are net prices.

Aumanz · April 25, 2018

take a look there, sorry about confusion..

https://www.prestashop.com/forums/topic/260934-zdjęcie-produktu-w-wyszukiwarce-moje-rozwiązanie/?page=2

airjohn · April 25, 2018

1 hour ago, Aumanz said:

take a look there, sorry about confusion..

https://www.prestashop.com/forums/topic/260934-zdjęcie-produktu-w-wyszukiwarce-moje-rozwiązanie/?page=2

aha, thanks for your time!

Aumanz · April 25, 2018

done? grats,

..hmm.. with attributes?

DARKF3D3 · July 15, 2018

Anyone know how to do this on Prestashop 1.7?

zorro22 · May 13, 2019

still no news for 1.7.5? :) , i've tried 2 modules but still no luck , thanks

patrmich · November 21, 2019

Hello,

In the instant search small window, are displayed the links to the searched results, as breadcrumbs :

Category Name > Product Name

How would it be possible to display only the Product Name ? (and not the Category name)

Thank you in advance for any reply.

Patrick

Add an image on instant search

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

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