Jump to content

[Astuce] Liste Des Produits En Liste Ou Grille

julien51

By julien51
in Modules et thèmes gratuits

 Share

Recommended Posts

julien51 Newbie

julien51

Posted
Posted (edited)

Bonjour à tous !

Voici une astuce pour créer une liste de produits

avec la possibilité de changer l'affichage de la liste

en grille et vice versa en utilisant jQuery et le plugin jQuerry Cookie.

 

Pour cette astuce, nous allons modifier plusieurs fichiers de notre thème Prestashop.

Je travail sur le template Prestashop 1.5.3, donc cette astuce est 100% fonctionnel sous presta 1.5.

 

Les fichiers du thème à modifier sont :

 

Fichiers tpl :

 

product-sort.tpl

product_list.tpl

footer.tpl

 

Fichier css :

 

product_list.css

 

 

Commençons par modifier le fichier product-sort.tpl .

 

Au début du fichier avant {if isset($orderby) AND isset($orderway)} placer ce code suivant :

 

<div id="navigation" class="button_nav">
	<a href="#" id="list">Liste</a>
	<a href="#" id="grid">Grille</a>
</div>

 

 

Maintenant il faut modifier le fichier footer.tpl.

Le code est à placer avant la balise </body> et {/if} :

 

<script src="{$js_dir}cookie.js" type="text/javascript"></script>
<script src="{$js_dir}core.js" type="text/javascript"></script>

 

 

Dans le fichier product-list.tpl, ajoutez après la balise </ul> :

 

<br clear="all" />

 

 

Dans le fichier product_list.css, ajoutez ces lignes :

 


/** buttons **/

.button_nav {
float: right;
margin-top: -6px;
padding-left: 15px;
padding-top: 11px;

}
.button_nav a {
color: #FFFFFF;
}


/** grid view **/

ul#product_list.grid {
list-style: none outside none;
margin: 0 auto;
}

#product_list.grid li {
float: left;
margin-left: 59px;
width: 35%;
}

#product_list.grid li .left_block {
float:left;
padding-top:58px;
width:15px  
}

#product_list.grid li .center_block {
border-right: 0 none;
margin: 0 auto;
width: 130px;
}

#product_list.grid li .right_block {
width:auto;

}

#product_list.grid a.product_img_link {
overflow: hidden;
position: relative;
float: left;
display: block;
margin-right: 0px;
border: 1px solid #CCC;
}

 

Le code css n’est pas finalisé, c'est celui qui me sert pour mon theme,

donc je vous laisse le modifier.

 

 

Télécharger le dossier liste ou grille.zip Il contient deux fichiers javascript qui est à mettre dans le dossier js de votre theme.

 

J’espère aider certaine personne :)

 

liste ou grille.zip

Edited by julien51 (see edit history)
  • Like 5
Link to comment
Share on other sites
julien51 Newbie

julien51

Posted
  • Author
Posted

Merci pour le commentaire.

Ce soir ou demain je vais changé le post pour rendre l'astuce plus simple encore et je vais mettre un cookie en js pour permettre de garder l'affiche du client quand la page est rafraîchie.

Si j'ai beaucoup de retours je pense faire un module gratuit.

Cordialement,

Julien.

Link to comment
Share on other sites
jolvil Newbie

jolvil

Posted
Posted (edited)

Un module liste ou grille fonctionnant avec jQuery avait été fait par Doekia pour PS 1.3 / 1.4, avec cookie pour garder la session, possibilité d'afficher en grille par défaut, auto installable:

http://www.prestasho...-ps13-and-ps14/

 

Seul problemes, ne fonctionne pas avec la navigation à facette, ni PS 1.5

Si cela peut vous inspirer.

Edited by jolvil (see edit history)
  • Like 1
Link to comment
Share on other sites
julien51 Newbie

julien51

Posted
  • Author
Posted (edited)

Merci pour votre commentaire mais c'est précisé a la fin du topic regardez.

J'ai finis la nouvelle astuce qui remplace celle la je la mais ce soir.

Je vais bientôt mettre une nouvelle astuce un breadcrumb jquery avec un qr code .

Si il y a des personnes qui veulent bien mettre leurs lien de leur site pour une demo :)

Cordialement,

Julien.

Edited by julien51 (see edit history)
Link to comment
Share on other sites
jlancel62 Newbie

jlancel62

Posted
Posted

Bonjour,

 

J'ai essayé le module de Franck Rouannet "Liste ou grille v 3.5" mais ce dernier n'a pas fonctionné sur mon site.

Je remercie au passage son implication.

Pensez vous que cette astuce puisse fonctionner sur mon site? Merci

Je souhaite afficher les produits des catégories en liste. (Le site : www.cosmelyne.fr)

Link to comment
Share on other sites
  • 3 weeks later...
  • 4 weeks later...
  • 3 weeks later...
  • 3 weeks later...
elmmle Newbie

elmmle

Posted
Posted

Bonjour,

je me rends compte que seuls les boutons de la barre de tri du haut fonctionnent, ceux de la barre du bas ne fonctionnent pas, ils me renvoient bien en haut mais ils ne changent pas la disposition. Suis je la seule?

Link to comment
Share on other sites
egerix Newbie

egerix

Posted
Posted

Salut tous le monde, j'ai bien suivi à la lettre toutes infos ! ça fonctionne pour moi sur la 1.5.3.1, parcontre j'aimerai afficher 3 bloc l'un à coté de l'autre (3x3)

 

ton aide me serai d'une grande aide ... :)

 

en tous cas super boulot ! ça fait plaiz de voir des gens pationné qui savent codé ...

 

tchous

 

www.egerix.fr

Link to comment
Share on other sites
egerix Newbie

egerix

Posted
Posted (edited)

Bonjour,

je me rends compte que seuls les boutons de la barre de tri du haut fonctionnent, ceux de la barre du bas ne fonctionnent pas, ils me renvoient bien en haut mais ils ne changent pas la disposition. Suis je la seule?

 

ton problème viens de ton fichier footer.tpl

 

Le code est à placer avant la balise </body> et {/if} si tu n'a pas de balise </body> il faut la rajouter en bas juste avant </html>

 

ce qui doit te donner :

 

{/if}

.

le script à placer ici

.

</body>

</html>

 

si parcontre après ça tu n'a toujours pas de modif, regarde que tu as bien ajouter les deux fichier jquery dans le dossier js

Edited by egerix (see edit history)
Link to comment
Share on other sites
elmmle Newbie

elmmle

Posted
Posted

Merci Egerix d'avoir essayé de m'aider. Le code est bien placé à la fin de mon footer.tpl, ainsi:

 

 

<script src="{$js_dir}cookie.js" type="text/javascript"></script>

<script src="{$js_dir}core.js" type="text/javascript"></script>

{/if}

</body>

</html>

 

J'ai également essayé comme tu le dis, entre if et body, mais cela n'a rien changé. Mes deux fichiers sont bien dans le dossier JS et si ils n'y étaient pas, les boutons du haut ne marcheraient pas non plus. Seuls les boutons du bas ne marchent pas.

Link to comment
Share on other sites
  • 2 weeks later...
Superbegood31 Newbie

Superbegood31

Posted
Posted (edited)

Bonjour à tous,

 

Encore merci pour cette astuce bien sympathique !

 

J'ai mis en œuvre cette astuce (avec quelques adaptations JS et CSS) mais comme elmmle les boutons du bas ne fonctionnent pas.

 

Je précise que tout est à sa place...

 

Merci pour vos retours.

 

PS : pour le moment je test cela en local...

Edited by SWITCHBOARD (see edit history)
Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
Posted (edited)

2) Juste une petite idée de modification :

Ne pas mettre du texte Liste Grille mais des icones à la place, je pense que c'est plus agréable visuellement.

 

Donc j'ai ajouter mes icones (category-list-icon.png & category-grid-icon.png) dans img/icon.

Ensuite j'ai modifié dans product-sort.tpl :

<div id="navigation" class="button_nav">
<a href="#" id="list"><img scr="../img/icon/category-list-icon.png" alt="Liste" width="32px" height="32px"></a>
<a href="#" id="grid"><img scr="../img/icon/category-grid-icon.png" alt="Grille" width="32px" height="32px"></a>
</div>

Sauf que coté Firefox j'ai uniquement le texte qui s'affiche, sous Android ainsi que sous iE j'ai des cubes qui s'affichent.

 

3) Concernant l'affichage sur 3 colonnes je ne voit pas comment faire. Je pensais qu'en modifiant comme suit dans product-list.tpl cela ferait l'affaire mais pas de changements :

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

remplacé par

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} {if $smarty.foreach.products.index % 3 == 0}first_item_line{/if} {if ($smarty.foreach.products.index + 1) % 3 == 0}last_item_line{/if} clearfix">

Edited by lordbdp (see edit history)
Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted (edited)

Cela modifie quoi ce div ? Et doit-on le faire dans tous les .tpl qui appellent cette div ?

Cette "Div" se trouve dans le fichier category.tpl de votre thème. Et pour la "Div" du bas, elle sert à l'affichage (ou non si commentée) de :

- le tri

- le choix du nombre de produit par page

- la comparaison

 

Il s'agit d'une solution radicale vu que la fonction liste/grille ne focntionne pas sur les boutons du bas ...

Edited by SWITCHBOARD (see edit history)
Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
Posted

2) Juste une petite idée de modification :

Ne pas mettre du texte Liste Grille mais des icones à la place, je pense que c'est plus agréable visuellement.

 

Donc j'ai ajouter mes icones (category-list-icon.png & category-grid-icon.png) dans img/icon.

Ensuite j'ai modifié dans product-sort.tpl :

<div id="navigation" class="button_nav">
<a href="#" id="list"><img scr="../img/icon/category-list-icon.png" alt="Liste" width="32px" height="32px"></a>
<a href="#" id="grid"><img scr="../img/icon/category-grid-icon.png" alt="Grille" width="32px" height="32px"></a>
</div>

Sauf que coté Firefox j'ai uniquement le texte qui s'affiche, sous Android ainsi que sous iE j'ai des cubes qui s'affichent.

 

3) Concernant l'affichage sur 3 colonnes je ne voit pas comment faire. Je pensais qu'en modifiant comme suit dans product-list.tpl cela ferait l'affaire mais pas de changements :

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">

remplacé par

<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} {if $smarty.foreach.products.index % 3 == 0}first_item_line{/if} {if ($smarty.foreach.products.index + 1) % 3 == 0}last_item_line{/if} clearfix">

 

Up !

Link to comment
Share on other sites
lordbdp Newbie

lordbdp

Posted
Posted (edited)

1) Je voudrais savoir comment modifier l'affichage pour le .discount car en liste tout est propre mais en grille il me met le texte sur 2 lignes (visible sur mon site en test). Voir même comment remplacer le texte "PRIX RÉDUIT" par le montant % de la réduction.

 

2) Je voudrais aussi savoir où ajouter 

{assign var='liHeight' value=250}
  {assign var='nbItemsPerLine' value=4}

afin d'avoir 4 produits d'aligner au lieu de 2 actuellement en mode grille.

 

Merci d'avance.

Edited by lordbdp (see edit history)
Link to comment
Share on other sites
  • 1 month later...
bretweb Newbie

bretweb

Posted
Posted (edited)

Bonjour

Je viens de tester pour mettre les produits en grille.... sur Prestashop 1.5.41

 

mais les cookies ne sont pas pris en charge ...

 

j'ai aussi un probleme css pour gerer les grilles : je cherche a mettre 4 produits sur une ligne ... mais j'ai toujours un tout seul sur la ligne en dessous ???

 

si quelqu'un aurait une idée ... merci d'avance

Edited by bretweb (see edit history)
Link to comment
Share on other sites
  • 3 weeks later...
lordbdp Newbie

lordbdp

Posted
Posted

Bonjour à tous

 

@lordbdp un petit soucis sur ton site ??

 

Amitiés

 

Impossible de payer donc je refait un site propre avec un minimum d'extensions et un maximum d'overrides et hooks pour être plus tranquile.... Le nouveau site sera prochainement mis en ligne ;)

Link to comment
Share on other sites
  • 4 weeks later...
Prestapascher Newbie

Prestapascher

Posted
Posted

Bonjour et merci pour cette astuce qui m'a servit précédemment pour un test.

 

En revanche j'ai acheté un thème Tracy chez Leotheme j'aimerais faire en sorte de mettre l'affichage en liste par défaut au lieu d'en grille mais impossible de trouver le code correspondant, aucun list or grid sur aucun des .tpl produit.

 

Quelqu'un à t il déjà eu un thème chez lui ou sait il comment cela fonctionne?

Link to comment
Share on other sites
  • 4 weeks later...
  • 2 weeks later...
dar1987 Newbie

dar1987

Posted
Posted (edited)

Finalement, j'ai bidouillé "product_list.css", pour avoir 3 produits par ligne : 

/** buttons **/

.button_nav {
	float: right;
	margin-top: -6px;
	padding-left: 15px;
	padding-top: 11px;
	
}
.button_nav a {
	color: #FFFFFF;
}


/** grid view **/

ul#product_list.grid {
	list-style: none outside none;
	margin: 0 auto;
}

#product_list.grid li {
	float: left;
	margin-left: 10px;
	width: 28%;
}

#product_list.grid li .left_block {
	float:left;
	padding-top:58px;
	width:15px  
}

#product_list.grid li .center_block {
	border-right: 0 none;
	margin: 0 auto;
	width: 130px;
}

#product_list.grid li .right_block {
	width:auto;
  
}

#product_list.grid a.product_img_link {
	overflow: hidden;
	position: relative;
	float: left;
	
	margin-right: 0px;
	border: 1px solid #CCC;
}

Merci à l'auteur du tuto!!! Testé sur PS 1.5.4, je vais voir sur mon vrai support : 1.5.3, mais ça devrait pas poser de soucis.

Edited by dar1987 (see edit history)
Link to comment
Share on other sites
dar1987 Newbie

dar1987

Posted
Posted

Je n'ai pas compris votre post jacqueline, bref!

J'essaie sous prestashop 1.5.4, mais un gros problème : lorsque ma grille est sélectionnée, j'ai bien la première, voire deuxième ligne, mais ensuite, j'ai un produit sur la 3e ligne... Je n'arrive pas à voir avec le css pour résoudre le problème.

Link to comment
Share on other sites
  • 5 months later...
mel67 Newbie

mel67

Posted
Posted

même question de Dar1987, je souhaiterais avoir que l'affichage en grille ou tout du moins, si ce n'est pas possible; l'avoir en affichage par défaut.

Je suis sur prestahop 1.5.2 et l'astuc fonctionne nickel ! Merci Julien51 !

Link to comment
Share on other sites
  • 1 month later...
Rmas Newbie

Rmas

Posted
Posted

Bonjour,

 

Merci pour ce topic, par contre moi j'aimerais que le client n'ai pas le choix. Je souhaiterais que les produits s'affichent en grilles au lieu de s'afficher en listes. Donc quels fichiers dois-je modifier ? En sachant que je souhaite pouvoir revenir en arrière en cas de problème (compatibilité, bugs ect.)

 

Merci d'avance.

Link to comment
Share on other sites
fayelpossi Newbie

fayelpossi

Posted
Posted

Merci pour cette astuce très pratique. J'ai un petit problème: les noms de mes produits sont parfois composés de 2 ou 3 mots et chacun de ces mots prend une ligne

Ex: "Bukhra Ikat" est écrit sur deux lignes:

"Bukhara

Ikat"

 

Ce qui décale le bas de chacun des blocks produit.
 

Qual'qu'un aurait-il une solution? Je sèche!!!

Link to comment
Share on other sites
fayelpossi Newbie

fayelpossi

Posted
Posted (edited)

le thème par défaut

en  fait je suis reparti de la base, c'est à nouveau bien, mais cet fois le nom du produit est trop collé à l'image, j'aimerai le descendre un peu...

j'aimerai également que mon image, le titre et le block de prix (que j'ai descendu) soit tous centrés...

Edited by fayelpossi (see edit history)
Link to comment
Share on other sites
  • 1 month later...
  • 3 months later...
  • 2 months later...
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...