Informations au survol du produit

[MishoO]

Bonjour,

 

Je suis actuellement en plein développement d'une petite fonctionnalité. Il s'agit d'afficher un petit span lors du survol de l'image d'un produit, avec à l'intérieur, sa collection, ses attributs, ses déclinaisons disponibles par exemples.

 

À titre d'exemple, vous pouvez voir ceci sur www.glisshop.com dans une page produit. J'ai trouvé l'effet intéressant et je me suis lancé dans le dev de celui-ci.

 

Pour se qui est du jQuery aucuns soucis, je fais apparaître/disparaître le span parfaitement.

Par contre pour afficher les déclinaisons disponibles ou au moins les tailles disponibles... La je ne vois pas comment m'y prendre.

 

J'ai pensé à faire un gros tableau associatif mais je m'y perd !

 

De l'aide serait bienvenue, je demande pas l'algo complet mais juste une piste pour me lancer dedans, mon expérience de prestashop est encore récente.

 

Je précise que pour le moment, j'ai développé cette fonctionnalité uniquement sur le module Produit-Phares. J'aimerai l'intégré une fois finis sur tout les produits

 

Merci d'avance pour votre aide !

[Sbizz]

Salut.

 

En fait, je sais pas trop comment tu réfléchis sur ton problème alors je t'expose mon idée :

 

Concernant le design, tu vas garder la structure normal. Normalement, la structure c'est un peu :

 

<div conteneur>
  <p>Titre</p>
  <img src="Photo" />
  <p>Description</p>
</div>

 

 

Ceci est un exemple, bien sûr. Il va falloir passer la <div> conteneur en "position: relative". Ensuite, il te suffira de rajouter une <div> informations, contenant les informations que tu vas vouloir faire apparaitre.

 

<div conteneur>
  <div information></div>
  <p>Titre</p>
  <img src="Photo" />
  <p>Description</p>
</div>

 

Ta div sera en "position: absolute", en "top: 0px" et "left: 0px;" (d'où l'importance de mettre la <div> conteneur en "position: relative").

 

Ensuite, en JQuery il te faudra juste mettre sur le mouseover un toggle de la <div> informations. Par contre ne surtout pas passer par de l'AJAX. Ça va faire pas mal d'appel de requête pour rien.

 

Après pour récupérer les informations, ça dépend ce que tu veux récupérer exactement, je pense pas que ce soit trop difficile. Il faut aller toucher au Category.php je pense.

[MishoO]

Bonsoir ! Tout d'abord merci de ta réponse

 

Mais comme je l'avais énoncé, j'ai déja fait la partie design, jQuery, HTMl etc.. Tout marche bien, la div cachée se déroule grâce à slideDown().

Plus précisément, mon vrai problème c'est comment aller chercher les groupe d'attributs + déclinaison disponible et les mètre dans la div cachée.

 

Par exemple :

 

<div id="conteneur"> <!-- absolute -->

<div id="informations"> <!-- top: 0 ; left: 0; -->

Tailles disponibles : Taille 1 - Taille 3 ...

</div>

<img src="photo"/>

<p> Description </p>

 

En gros, il me faut pour chaque produits, le groupe d'attribut Taille et les déclinaisons disponible en stock pour cet exemple.

Comment aller les chercher ??

 

Merci d'avance

[MishoO]

up

[Sbizz]

Comme je te l'ai dit, je pense qu'il faut aller dans le controller Category.php.

 

Dans la fonction preProcess, le tableau de produit se trouve dans la variable $this-cat_product.

 

Faudrait à mon avis faire une boucle foreach (en regardant plus en détail le code, c'est assez chiant de faire +/- proprement, enfin si t'as le temps, why not) et récupérer toutes les informations peut être en passant par la classe Product.

 

Moi j'ai pas le temps de le faire, trop de taff et là je suis à la bourre.

[MishoO]

Bonjour, j'ai vraiment essayé de comprendre comment faire, mais je m'y perd...

ça fait 2 jour que je suis dessus, quelqu'un pourrait m'indiquer comment faire ?

Si j'ai bien compris, il y a une méthode dans la class produit getAttributeCombinations() /*Get all available product attributes combinaisons*/

Il me faudrait donc parcourir un tableau d'objet produit, executer cette methode sur chaque objet, et mettre le résultat en smarty.

 

Or il ya un problème, le tableau que tu me donne cat_products n'est pas un tableau d'objet produit car il à était transformé par la fonction getProductsProperties() de la classe Category qui ne retiens que les caractéristiques...

 

J'ai bien essayé de surcharger cette méthode pour qu'elle me renvoie un tableau d'objet mais rien n'y fait, je m'y perd.

 

Help please !

[Sbizz]

Je vois ça demain matin. Là je suis chez moi, je passe mes jours sur Prestashop, donc need du repos

[Sbizz]

En fait, c'est plus simple que ça, dans un sens. Tu as deux solutions :

- La lourde : tu parcours comme on l'a dit le tableau $this->cat_products, et à chaque entrée, tu récupères l'ID du produit et tu instancies la class Product comme ceci :

 

$myproduct = new Product($id_product);

 

Tu as donc un objet et tu peux utiliser la méthode plus haute.

 

- Légère mais longue : tu crées un module, qui se met sur le hook "productListAssign" et c'est toi même qui crée $this->cat_products (en fait, le paramètre catProducts, que tu peux voir à la ligne 163 de CategoryController.php, c'est une référence (&) à $this->cat_products. Donc si tu modifies la variable à l'intérieur du hook, elle est aussi modifiée dans CategoryController). C'est, normalement, ce hook qui permet de modifier l'affichage (l'ordre ou la façon de procéder) des produits dans les catégories.

[MishoO]

J'ai compris pour la première méthode ( ce que je pensais faire au départ ) mais en faire un module serait vraiment génial !

 

Hélas, je n'ai pas tout compris à ton explication vu que je suis encore dans la phase d ' apprentissage de prestashop si je puis dire lol.

Donc je dois créer un module et l'accrocher a ProductListAssign mais à quoi sert exactement ce hook ? Et comment mettre en place celui-ci grossomodo afin qu'il fasse se dont on a parlé.

 

Merci encore pour ton aide

[Sbizz]

En fait, productListAssign permet de modifier la variable $this->cat_product. C'est clairement son but premier. En français, ça veut juste dire "Assigne une liste de produit". Du coup, l'ordre dans lequel apparaitra tes produits et les produits qui apparaitront seront à désigner ici-même à l'aide d'une requête allant chercher les informations.

 

Alors les paramètres exactes sont :

 

$params['nbProducts'] => Nombre de produit.

$params['catProducts'] => Les produits à afficher dans la catégorie

$params['hookExecuted'] => Mettre à true si on passe par un module, pour dire qu'un module à pris le relai (sinon, Prestashop passe par son système de base).

 

Il faut savoir que TOUTES ces variables, si tu les modifies dans ton module via la fonction appropriée (hookProductListAssign), vont modifiée les variables "coeurs". Exemple :

 

Ceci apparait dans le fichier coeur :

 

Module::hookExec('productListAssign', array('nbProducts' => &$this->nbProducts, 'catProducts' => &$this->cat_products, 'hookExecuted' => &$hookExecuted));

 

Tu ne connais peut être pas mais & symbolise, en gros, une référence (une adresse) à une variable. Quand tu envoies une variable en paramètre, tu n'envoies que sa valeur. Ce symbole sert à dire "J'envoie carrément la variable complète". Donc si tu la modifie dans ta fonction, elle sera modifiée en dehors (a contrario d'une variable envoyé sans ce symbole).

C'est du grossomodo !

 

public function hookProductListAssign($params)
{
$params['nbProducts'] = 50.
}

 

Au final tu obtiendras un truc du style :

 

$this->nbProducts = 2;
echo $this->nbProducts; // renverra '2'.
Module::hookExec('productListAssign', array('nbProducts' => &$this->nbProducts, 'catProducts' => &$this->cat_products, 'hookExecuted' => &$hookExecuted));
echo $this->nbProducts; // renverra '50'.

 

Bon, je pense avoir assez détaillé. Il faut surtout que tu mettes le résultat d'une requête dans catProduct (un tableau de tableau de produit).