[Résolu][PS 8.0.5] Thème Classic : afficher puces des listes et leur hierarchie (cascade ?)

[couillaler]

Coucou à tous,

Difficile de trouver cette réponse, ici (?) comme ailleurs.

J'utilise le thème Classic (PS 8.0.5), je l'ai déjà un peu personnalisé (affichage description produit sur la largeur de la page plutôt que sur une colonne par exemple) mais me pose une question sur la mise en page des listes à puces.

Voici un exemple de ce que j'aimerais, une liste à puces avec une hierarchie visible.

Mais, avec le thème Classic de Prestashop, voici ce que j'obtiens

Pas de puces, ni de cascade (ou hierarchie, on dit comment ?)

J'ai tenté d'ajouter au fichier custom.css ( situé dans ../themes/classic/assets/css/ ) le code suivant

/* Ajout des puces sur la page produit */
#products_tabs ul { list-style: disc; }
#products_tabs li { list-style-position: inside; }

mais j'obtiens ceci :

Des puces, oui, mais pas la hierarchie, il doit me manquer un bout de code.

J'ajoute qu'en plus, sont apparus sur le titre des onglets "Description" et "Détails du produit" des puces, également. J'imagine que mon #products_tabs n'est pas le plus indiqué alors ?

Sauriez-vous quelle serait la bonne formule pour avoir des puces visibles, comme ici, mais avec une hierarchie visible aussi et pour ne pas inclure les noms des onglets en prime ? 🤪

J'ai trouvé beaucoup d'articles et de sites indiquant comment personnaliser les listes à puces, mais ça concernait surtout les puces elle-mêmes, et pas les points cherchés ici.

Merci beaucoup !

Antoine

[solsol69]

Bonjour

Avez vous essayé avec ce type de code html

<p>Exemple</p>
<ul style="list-style-type: disc;">
<li>Exemple</li>
<li>Exemple</li>
<li>Exemple</li>
</ul>

 

[Mediacom87]

Bonjour,

Pour avoir la hiérarchie, il faut encore qu'elle existe.

<ul>
  <li>Types de papiers
    <ul>
      <li>Papier ordinaire</li>
      <li>Papier Photo Pro Platinum (PT-101)</li>
      <li>Papier Photo Pro Lustré (LU-101)</li>
      <li>Papier Photo Glacé Extra II (PP-201)</li>
    </ul>
  </li>
</ul>

 

[couillaler]

Hello,

Oui, en effet, et voici le code de la page en question...

<ul style="text-align: justify;">
<li>Types de papiers
<ul>
<li>Papier ordinaire</li>
<li>Papier Photo Pro Platinum (PT-101)</li>
<li>Papier Photo Pro Lustré (LU-101)</li>
<li>Papier Photo Glacé Extra II (PP-201)</li>
[...]

Elle existe, et s'affiche bien d'ailleurs sur le champ Description de mon BO. Première copie d'écran.

C'est juste que sur ma page de la boutique, seconde copie d'écran, elle est pas comme je le voudrais.

[couillaler]

Coucou,

Finalement, ne trouvant pas l'info sur internet, j'ai été questionner un des futurs boss, ChatGPT, module HTML CSS Builder. Tant qu'à faire, autant aller voir le cyberspécialiste.

Je lui ai posé la même question (copier-coller, avec lien html pour les copies d'écran) que mon post original. Je cliquais à peine sur entrée, qu'il me donnait déjà la solution, la voici telle quelle, par un autre habile copier-coller. Enjoy pour ceux qui, comme moi, veulent modifier l'apparence des listes à puces du thème Classic de Prestashop !

==================

 

Pour obtenir une liste à puces hiérarchique correctement formatée dans le thème Classic de Prestashop, il semble que nous devons affiner votre CSS et cibler plus précisément les éléments de la liste pour éviter que les puces n'apparaissent sur les titres des onglets. Voici une solution possible :

1. **Cibler les listes à puces dans la description du produit sans affecter les titres des onglets.**
2. **Utiliser des styles CSS appropriés pour afficher la hiérarchie des listes.**

### Étape 1: Identifier et cibler les bons éléments

Vérifiez d'abord la structure HTML de la section des descriptions de produits pour trouver des classes ou des identifiants spécifiques que vous pouvez utiliser pour cibler uniquement les listes à puces dans cette section. Supposons que la section des descriptions de produits soit encapsulée dans un élément avec la classe `product-description`.

### Étape 2: Appliquer le CSS

Voici un exemple de CSS que vous pourriez ajouter à votre fichier `custom.css`:

/* Ajout des puces uniquement dans la description des produits */
.product-description ul {
    list-style-type: disc;
    margin-left: 20px;
}

.product-description ul ul {
    list-style-type: circle;
    margin-left: 20px;
}

.product-description ul ul ul {
    list-style-type: square;
    margin-left: 20px;
}

/* Empêcher les puces sur les titres des onglets */
#products_tabs .nav-item {
    list-style-type: none;
}

 

### Explications du CSS:

1. **Sélecteurs de listes à puces hiérarchiques:**
    - `.product-description ul` applique des puces de type disque (`disc`) pour le premier niveau.
    - `.product-description ul ul` applique des puces de type cercle (`circle`) pour le deuxième niveau.
    - `.product-description ul ul ul` applique des puces de type carré (`square`) pour le troisième niveau.

2. **Gestion des marges pour l'indentation:**
    - `margin-left: 20px;` ajoute une marge à gauche pour indenter les sous-listes.

3. **Empêcher les puces sur les titres des onglets:**
    - `#products_tabs .nav-item { list-style-type: none; }` désactive les puces pour les éléments de navigation des onglets.

### Étape 3: Tester et ajuster

Après avoir ajouté ce CSS, testez votre site pour voir si les puces et la hiérarchie s'affichent correctement dans la section des descriptions de produits et que les puces ne s'affichent pas sur les titres des onglets. Vous devrez peut-être ajuster les sélecteurs CSS en fonction de la structure HTML spécifique de votre thème.

Si vous avez des problèmes pour cibler correctement les éléments, vous pouvez utiliser l'outil de développement de votre navigateur (Inspecteur) pour vérifier les classes et les identifiants exacts des éléments HTML concernés.

==================

Alors je ne sais pas si le code est parfait, mais le résultat convient à mes attentes, et comme je n'y connais pas grand-chose en CSS, cela m'aide bien. Et j'espère que certains d'entre vous aussi. 😋

Maintenant, la réponse à la question existe aussi sur le net, merci à l'outil utilisé.

Moins d'une seconde la réponse... Y en a qu'ont des soucis à se faire quand même... 🫢

Voici le résultat d'ailleurs, après un vidage du cache dans l'onglet performance.

Merci à tous, je passe le sujet en résolu.

Antoine