Affichage des produits

Permet l'affichage de présentation des produits

1. Localisation du fichier

Le fichier product.tpl est situé dans le thème utilisé de PrestaShop :

/themes/<nom_du_theme>/product-list.tpl

Ce fichier est responsable de l'affichage des produits sur différentes pages comme l'accueil, les pages catégories et les pages produits. Il gère également le nombre de colonnes selon les conditions définies.

---

2. Fonctionnement général

Le code utilise des conditions Smarty pour appliquer des classes CSS Bootstrap (ou similaires) afin d'ajuster le nombre de colonnes. Cela permet de créer un affichage flexible des produits selon :

1. Le type de page (accueil, produit, catégorie).

2. L'ID de la catégorie.

---

3. Détails du code

Voici le code complet du bloc :

{if $page_name == 'index' || $page_name == 'product'}
    col-xs-12 col-sm-6 col-md-3
{else}
    {if in_array($category->id, [60, 61, 132, 118, 42, 203, 199])}
        col-xs-6 col-sm-4 col-md-3
    {elseif in_array($category->id, [20, 17, 63, 328, 325, 333, 327, 329, 331, 1004, 338, 337, 336, 335, 333, 331, 329, 328, 327, 325, 319, 148, 130, 78, 122, 92, 125, 136, 134, 157, 158, 151, 161, 159, 163, 264, 274, 306, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 321, 322, 323, 324, 334])}
        col-xs-6 col-sm-4 col-md-2
    {else}
        col-xs-12 col-sm-6 col-md-3
    {/if}
{/if}

---

4. Explication du code

4.1 Gestion selon le type de page

Le premier if vérifie si la page actuelle est :

• index (page d'accueil).

• product (page produit).

Dans ces cas, les produits s'affichent sur 4 colonnes en utilisant la classe CSS :

col-xs-12 col-sm-6 col-md-3

• col-xs-12 : Pleine largeur pour les petits écrans (mobile).

• col-sm-6 : 2 colonnes pour les écrans moyens (tablette).

• col-md-3 : 4 colonnes pour les écrans larges (desktop).

---

4.2 Gestion par catégorie

Pour les autres pages, une condition vérifie si la catégorie appartient à un groupe d'IDs spécifiques :

Catégories avec 3 colonnes

Si l'ID de la catégorie est dans cette liste : [60, 61, 132, 118, 42, 203, 199]

Les produits s'affichent sur 3 colonnes :

col-xs-6 col-sm-4 col-md-3

• col-xs-6 : 2 colonnes pour mobile.

• col-sm-4 : 3 colonnes pour tablette.

• col-md-3 : 4 colonnes pour desktop.

---

Catégories avec 6 colonnes

Si l'ID de la catégorie est dans cette longue liste : [20, 17, 63, ..., 334]

Les produits s'affichent sur 6 colonnes :

col-xs-6 col-sm-4 col-md-2

• col-xs-6 : 2 colonnes pour mobile.

• col-sm-4 : 3 colonnes pour tablette.

• col-md-2 : 6 colonnes pour desktop.

---

Par défaut

Si aucune condition précédente n'est remplie, les produits s'affichent sur 4 colonnes, comme pour la page d'accueil et produit :

col-xs-12 col-sm-6 col-md-3

---

5. Personnalisation

5.1 Modifier le nombre de colonnes

Pour changer le nombre de colonnes, modifie les classes CSS Bootstrap :

• col-xs-* : Pour les écrans < 768px.

• col-sm-* : Pour les écrans ≥ 768px.

• col-md-* : Pour les écrans ≥ 992px.

Exemple : Changer les catégories à 5 colonnes pour desktop :

smartyCopy code{elseif in_array($category->id, [20, 17, 63])}
    col-xs-6 col-sm-4 col-md-2-4

---

5.2 Ajouter une nouvelle catégorie

Pour appliquer un style différent à une nouvelle catégorie :

1. Trouve l'ID de la catégorie dans le back-office PrestaShop.

2. Ajoute cet ID dans le tableau correspondant :

smartyCopy code{if in_array($category->id, [60, 61, 132, 999])}

---

6. Exemple pratique d'affichage

Page d'accueil (index)

Les produits s'affichent sur 4 colonnes :

htmlCopy code<div class="col-xs-12 col-sm-6 col-md-3">Produit</div>

Catégorie avec 3 colonnes

Pour la catégorie ID 60 :

htmlCopy code<div class="col-xs-6 col-sm-4 col-md-3">Produit</div>

Catégorie avec 6 colonnes

Pour la catégorie ID 20 :

htmlCopy code<div class="col-xs-6 col-sm-4 col-md-2">Produit</div>

---

7. Résumé des classes CSS

Type de page ou catégorie	Classes appliquées	Nombre de colonnes (desktop)
Page d'accueil (index)	col-xs-12 col-sm-6 col-md-3	4 colonnes
Page produit (product)	col-xs-12 col-sm-6 col-md-3	4 colonnes
Catégories [60, 61, ...]	col-xs-6 col-sm-4 col-md-3	3 colonnes
Catégories [20, 17, ...]	col-xs-6 col-sm-4 col-md-2	6 colonnes
Autres catégories	col-xs-12 col-sm-6 col-md-3	4 colonnes

---

8. Points importants pour la reprise

1. Structure du fichier : Le code se base sur des conditions Smarty pour appliquer les classes dynamiquement.

2. IDs des catégories : Les ID des catégories sont ajoutés manuellement dans les tableaux in_array.

3. CSS responsive : Les classes CSS utilisées sont celles de Bootstrap pour garantir un affichage adaptatif.

4. Maintenance :

   • Ajouter de nouvelles catégories : Modifier les tableaux dans le fichier .tpl.

   • Modifier le nombre de colonnes : Changer les classes Bootstrap.