[SOLVED] Add images to ajax search (override)

[Wartin]

Hello. A month ago I saw a store that showed thumbnails of the products listed as you type. I tried to do it, and found this:

https://www.prestashop.com/forums/topic/511807-add-images-in-search-bar/

After changing some variable and fields names I managed to make it work, but changing /classes/Search.php. Now I know how to make overrides, here is the explanation for Niara theme. Again if there are changes to make it work better just tell me.

First we change one query and then the js code to show the products with the image.

1) copy classes/Search.php to override/classes/

2) edit override/classes/Search.php, change this line:

class SearchCore

to

class Search extends SearchCore

3) go to this
 

        if ($ajax) {

            ...

         }

and change the whole block to:

        if ($ajax) {
            $sql = 'SELECT DISTINCT p.id_product, pl.name pname, cl.name cname,
                                                cl.link_rewrite crewrite, pl.link_rewrite prewrite '.$score.', pi.id_image pimg
                                        FROM '._DB_PREFIX_.'product p
                                        INNER JOIN `'._DB_PREFIX_.'product_lang` pl ON (
                                                p.`id_product` = pl.`id_product`
                                                AND pl.`id_lang` = '.(int) $idLang.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) $idLang.Shop::addSqlRestrictionOnLang('cl').'
                                        )
                                            INNER JOIN `'._DB_PREFIX_.'image` pi ON (
                                                p.`id_product` = pi.`id_product`
                                                AND position = 1
                                            )
                                        WHERE p.`id_product` '.$productPool.'
                                        ORDER BY position DESC LIMIT 10';

            return $db->executeS($sql, true, false);
        }

Delete every function but the one we changed. At the bottom don't forget to leave a '}' to close the class definition.

In order to make TB take the override, delete /cache/class_index.php

We've made the query that now contains our product's image. Now we have to show it.

Edit /themes/niara/js/modules/blocksearch/blocksearch.js

And change this:

        parse: function(data) {
          return data.map(function(product) {
            return {
              data: product,
              value: product.cname + ' > ' + product.pname
            };
          });
        },

with:

        parse: function(data) {
          return data.map(function(product) {
            return {
              data: product,
              value: '<img src="https://YOUR-STORE/img/p/4/2/' + product.pimg  + '-Niara_small.jpg" /> ' + product.cname + ' > ' + product.pname
            };
          });
        },

 

Now just type something it the search bar, wait a second and look all the products appear with its images :)

Search.php