Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.


[SOLVED] Add images to ajax search (override)

Recommended Posts

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:


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


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


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


  • Like 1

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...