Ajout Des Images Dans La Barre De Recherche Prestashop (V. 1.6.1.4)

trenyture · March 7, 2016

Bonjour à tous,

Étant novice je ne sais pas trop où poster cela car ce n'est pas une question, mais une solution

Je cherchais un moyen de rajouter les images dans la barre de recherche de Prestashop, pour avoir l'image ainsi que le nom du produit avec la recherche Ajax en marche.
Il se trouve que j'ai parcouru des centaines (bon j'éxagère un peu) de pages de forum (espagnol, anglais, francais, polska...) et rien ne marchait.
J'ai trouvé une solution qui fonctionne et je voulais la partager avec vous au cas où certains chercheraient également!

Pour cela il faut modifier deux fichier : la classe Search.php ainsi que blocksearch.js

1/ Dans le fichier /classes/Search.php

A la ligne 286 (approximativement) il faut remplacer :

if ($ajax) {
            $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').'
                    )
                    WHERE p.`id_product` '.$product_pool.'
                    ORDER BY position DESC LIMIT 10';
            return $db->executeS($sql, true, false);
        }

par cela :

        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)$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').'
					)
                    INNER JOIN `'._DB_PREFIX_.'image` pi ON (
                        p.`id_product` = pi.`id_product`
                        AND position = 1
                    )
					WHERE p.`id_product` '.$product_pool.'
					ORDER BY position DESC LIMIT 10';
            return $db->executeS($sql, true, false);
        }

// Explication : dans la requête SQL on rajoute un paramêtre pour rechercher l'image. On prend l'id du produit, et grâce à celui-ci on cherche l'image correspondante dans la table ps_image on prend seulement l'image a la position 1. Le tout encapsulé dans une variable pimg

2/ Dans le fichier /themes/monTheme/modules/blocksearch/blocksearch.js

Il vous faut rajouter l'image dans le data en ajax à la ligne 51

Remplacer :

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;
},

par cela :

parse: function(data) {
  var mytab = new Array();
  for (var i = 0; i < data.length; i++){
    mytab[mytab.length] = { data: data[i], value: '<img src="http://monpresta.com/img/p/' + data[i].pimg + '-small_default.jpg" /> ' + data[i].pname};
  }
  return mytab;
},

//Explication : Une fois que nous avons l'id de notre image dans la variable pimg il nous faut l'insérer dans le parse qui renvoie les données. N'oubliez pas que les images sont contenus dans le dossier racine /img/p/ et comme nous voulons une petite image je lui ai ajouté la caractéristique -small_default.jpg pour ne pas que le chargement soit trop long!

Si vous avez des questions ou des remarques n'hésitez pas.

Simon

Eric72 · March 27, 2016

Bonjour Trenyture,

Merci beaucoup pour ce partage !

Je suis en PS 1.6.1.4 et pour moi les photos ne s’affiche pas je comprend pas trop d'ou cela peu venir ?

Cordialement

Eric

Edited March 27, 2016 by Eric72 (see edit history)

trenyture · March 30, 2016

Bonjour. Bizarre... Euh aurais tu une url pour voir tpn site? Si tu fais un analyser l'element qu'elle adresse/source a l'image?

March 30, 2016

Bonjour Trenyture,

Merci beaucoup pour ce partage !

Je suis en PS 1.6.1.4 et pour moi les photos ne s’affiche pas je comprend pas trop d'ou cela peu venir ?

Cordialement

Eric

pourrais-ton voir au moins l'url de la boutique en production afin de pouvoir donner une piste pour que vous puissiez régler votre souci ?

EDIT : doublon.. trenyture l'avait demandé juste avant.. dsl

Edited March 30, 2016 by Guest (see edit history)

Eric72 · March 30, 2016

Bonjour. Bizarre... Euh aurais tu une url pour voir tpn site? Si tu fais un analyser l'element qu'elle adresse/source a l'image?

C'est bon j'ai trouvé j'avais pas rentré L'URL de mon site dans la ligne : "http://monpresta.com/img/p/'

j'avais laissé "monprestra"

donc au final ça fonctionne parfaitement

un grand merci pour ce partage

Edited March 30, 2016 by Eric72 (see edit history)

trenyture · March 30, 2016

Ah ah pas de soucis Tweb plus on est de fous plus on rit.

Content d'avoir pu te dépanner Eric. Bonne continuation à vous!

March 30, 2016

Afin d'améliorer encore la recherche il est possible de rajouter le prix après le titre du produit comme ça :

toujours dans le fichier /monsite/themes/montheme/js/modules/blocksearch :

parse: function(data) {
			var mytab = new Array();
			for (var i = 0; i < data.length; i++)				
			   mytab[mytab.length] = { data: data[i], value:  ' <img src="'+ data[i].pthumb + '" alt="'  + data[i].pname + '" /><span class="ac_product_name">'  + truncate(data[i].pname)	+ ' </span> <span class="ac_product_price">'  + Number((data[i].pprice)*1.20).toFixed(2)+ ' € ' + ' </span>'};
			return mytab;
},

si on veut montrer un prix avec TVA de 20% bien sûr.

pour celà j'ai aussi modifié la classe "Search" en prenant soit de vérifier dans la requête si une réduction est active sur le produit.

if ($ajax)
		{
			$sql = 'SELECT DISTINCT p.id_product, IFNULL(p.price*(1-sp.reduction),p.price) pprice, 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_.'specific_price` sp ON (
						sp.`id_product` = pl.`id_product`
						AND sp.`from` < DATE_SUB(NOW(), INTERVAL 1 MINUTE)
						AND sp.`to` > DATE_SUB(NOW(), INTERVAL 1 MINUTE)
					)
					
					WHERE p.`id_product` '.$product_pool.'
					ORDER BY position DESC LIMIT 10';
			return $db->executeS($sql);
		}

trenyture · March 30, 2016

Effectivement Tweb. On peut également ajouter le fabricant (comme je l'ai posté dans la version anglaise de ce post...)

Voici la démarche :

Search.php

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, pm.name mname
		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').'
		)
        INNER JOIN `'._DB_PREFIX_.'image` pi ON (
            p.`id_product` = pi.`id_product`
            AND position = 1
        )
        INNER JOIN `'._DB_PREFIX_.'manufacturer` pm ON (
            p.id_manufacturer = pm.id_manufacturer
        )
		WHERE p.`id_product` '.$product_pool.'
		ORDER BY position DESC LIMIT 10';
    return $db->executeS($sql, true, false);
}

et blocksearch.js :

parse: function(data) {
  var mytab = new Array();
  for (var i = 0; i < data.length; i++){
     mytab[mytab.length] = { data: data[i], value: '<img class="search-result-img" src="http://staging.lux.mx/tienda/img/p/' + data[i].pimg + '-small_default.jpg" /><p class="search-result-title">' + data[i].mname + '>' + data[i].pname + '</p>'};
  }
  return mytab;
},

En fait on peut vraiment customiser la recherche à souhait (vaut mieux avoir des connaissances en Base de donnée quand même ) Ce serait cool suivant ceci de faire un module (mais je sais pas faire désolé les gars ah ah)

Bonne continuation!

Edited March 30, 2016 by trenyture (see edit history)

trenyture · March 30, 2016

Pardon je me suis mal exprimé,

Quand je disais qu'il serait intéressant de faire un module sur ce principe là c'est ce que je voulais dire, un module que l'on puisse customizer depuis le back office (du style, je veux les images, le prix, les reducs....) mais je n'ai pas les compétences pour le faire...

Si quelqu'un ayant une âme charitable se sent capable de le faire, c'est avec plaisir que je ferais tout pour l'aider.

Il existe déjà un module de ce style mais il est payant, sauf que c'est quand même toujours mieux d'économiser un maximum d'argent non?

March 30, 2016

le module "existe" déjà en fait.. c'est blocksearch !

Il "suffit" de le recopier, renommer et de le modifier pour en faire un module à part entière.. avec l'override qui va bien sur la classe, à l'installation du module l'override ira s'installer tranquillement à sa place, ça c'est chouette !

mais pour que ce soit un module intéressant il faudrait pouvoir le configurer depuis le back office.. et ça demande encore un peu plus de travail.. si quelqu'un à le courage !

Eric72 · March 31, 2016

Pardon je me suis mal exprimé,

Quand je disais qu'il serait intéressant de faire un module sur ce principe là c'est ce que je voulais dire, un module que l'on puisse customizer depuis le back office (du style, je veux les images, le prix, les reducs....) mais je n'ai pas les compétences pour le faire...

Si quelqu'un ayant une âme charitable se sent capable de le faire, c'est avec plaisir que je ferais tout pour l'aider.

Il existe déjà un module de ce style mais il est payant, sauf que c'est quand même toujours mieux d'économiser un maximum d'argent non?

Ha ouiiii ce serait bien ça comme module

dommage moi non plus j'ai pas e compétence dans ce domaine

en tout cas votre partage est déjà très bien, c'est impec

Edited March 31, 2016 by Eric72 (see edit history)

davmems · December 19, 2016

Merci beaucoup !

mbphotographe · November 9, 2017

Bonjour,

Tout fonctionne impeccable ! Merci.

Par contre j'ai une petite question... Sur mon presta les photos ne sont pas dans le dossier /img/p mais dans le dossier par exemple : /img/p/1/5/2/3/monimage.jpg

Comment modifier le fichier pour prendre ceci en considération?

Merci

mbphotographe · November 9, 2017

Réponse à moi meme ^^

J'ai mis ça en place pour faire une autre version de l'affichage des images si on prend en compte les dossier et sous dossiers ou elles sont classées.

var monimg = data[i].pimg;
    var monimg1 = monimg.substring(0,1);
    var monimg2 = monimg.substring(1,2);
    var monimg3 = monimg.substring(2,3);
    var monimg4 = monimg.substring(3,4);
    
    mytab[mytab.length] = { data: data[i], value: '<br/><img src="https://www.norilak.com/img/p/' + monimg1 + '/' + monimg2 +  '/' + monimg3 + '/' + monimg4 + '/' + data[i].pimg +  '-small_default.jpg" style="height:29px;" /> ' + data[i].pname} ;

amelec · April 13, 2018

C'est exactement ce que je cherchais et ça fonctionne super bien, merci beaucoup pour le partage ! (presta 1.6.1.6)

Manu-41 · July 25, 2019

bonjour,

intéressé par la solution,

je suis avec presta 1.6.1.11, j'ai appliqué la solution, mais aucune image ne s'affichent.

Le fichier blocksearch.js est vide, mais le code se trouve dans le fichier blocksearch-instantsearch.tpl dans cette version.

Merci encore pour votre aide 😉

Asu34 · February 5, 2020

Bonjour à tous, merci pour ces solutions.

Je confirme que ça fonctionne toujours sur un ps 1.6.1.24.

Par contre pour le prix j'ai un problème ça ne m'affiche pas le prix remisé (pour les produits qui ont en un). J'ai bien appliqué les 2 modifs sur le .js et .php cité ci-dessus....

Si vous auriez une idée d'où cela pourrait venir ?

J'ai tenté également d'afficher des images plus petites que celle par defaut (cart_default pour les plus petites). J'en ai donc créé une nouvelle avec mes dimensions, régénéré les images, mais impossible d'utiliser ce nouveau format. Tous ceux par défaut fonctionne en revanche... c'est bizarre

Asu34 · February 7, 2020

On 2/5/2020 at 5:26 PM, Ric34 said:

Par contre pour le prix j'ai un problème ça ne m'affiche pas le prix remisé (pour les produits qui ont en un). J'ai bien appliqué les 2 modifs sur le .js et .php cité ci-dessus....

J'ai trouvé, ça venait de la condition dans la jointure de xx_specific_price :

AND sp.`from` < DATE_SUB(NOW(), INTERVAL 1 MINUTE)
AND sp.`to` > DATE_SUB(NOW(), INTERVAL 1 MINUTE)

En effet les réductions qui n'ont pas de période défini ont 00.00.0000 00:00:00 en base de donnée...

J'ai donc fait cette modification :

AND (sp.`from` < DATE_SUB(NOW(), INTERVAL 1 MINUTE)
OR  sp.`from` = 0000-00-00)
AND (sp.`to` > DATE_SUB(NOW(), INTERVAL 1 MINUTE)
OR  sp.`to` = 0000-00-00)

Pour les images j'ai utilisé le format cart_default qui me convient.

Merci à tous

Edited February 7, 2020 by Ric34 (see edit history)

Asu34 · February 17, 2020

J'ai constaté un petit problème avec les réductions.

En effet quand il y a deux règles, une catalogue et une autre par dessus (créée sur la fiche produit) ça affiche dans la recherche le même produit mais avec une ligne pour chacune des règles de prix (soit des prix différents pour le même produit...).

Également un autre problème, quand la règle a le prix de base modifié ça ne fait pas le calcul du prix sur ce dernier.

Vous auriez une idée comment solutionner cela ?

Merci

Edited February 20, 2020 by Ric34 (see edit history)

Asu34 · February 20, 2020

J'ai l'impression avoir solutionné les problème avec l'ajout de :

Pour les doublons :

GROUP BY p.id_product

Pour les prix spécifique quand le prix de base a été modifié :

SELECT DISTINCT p.id_product,
CASE
    WHEN sp.price > -1 THEN IFNULL(sp.price*(1-sp.reduction),sp.price)
    ELSE IFNULL(p.price*(1-sp.reduction),p.price)
END AS pprice,

Edited February 20, 2020 by Ric34 (see edit history)

Asu34 · April 4, 2023

Bonjour, je me permets de remonter ce topic. Je viens de me rendre compte que j'avais un problème avec l'affichage du prix lorsque la réduction était un montant et non un pourcentage.
Je pense qu'il faudrait que je modifie cette partie :

CASE
    WHEN sp.price > -1 THEN IFNULL(sp.price*(1-sp.reduction),sp.price)
    ELSE IFNULL(p.price*(1-sp.reduction),p.price)
END AS pprice

En y ajoutant la condition dans ps_specific_price avec reduction_type = percentage par exemple. Mais je n'arrive pas à l'intégrer à ma précédente requête. Vous auriez une idée ?

Merci par avance

Ajout Des Images Dans La Barre De Recherche Prestashop (V. 1.6.1.4)

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Guest

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

Create an account or sign in to comment

Create an account

Sign in