Affichage des catégories et sous-catégories

f.ca · May 5, 2020

Bonjour,

version 1.7.6.1 / thème de base

Je souhaite afficher les catégories sur la page d’accueil avec affichage de miniature et lorsqu'on clique sur une catégorie que les sous-catégories s'affichent avec miniature également.

Savez-vous comment faire?

Est-ce possible depuis le BO?

Merci pour votre aide.

Divine · May 5, 2020

Hello,

Pour les catégories sur la page d'accueil, soit avec un peu d'huile de coude en utilisant le module "Bloc de texte personnalisé" par exemple (donc en créant une structure HTML adéquate + un peu de CSS custom), soit avec un module approprié (rechercher par exemple sur Prestashop Addons).

Pour les sous-catégories, le thème par défaut de Prestashop sur la version 1.7 n'intègre pas cela. Donc là encore, soit il faut mettre les mains dans le cambouis au niveau du thème par défaut, soit chercher un thème plus adapté à ce que tu souhaites obtenir.

f.ca · May 6, 2020

Hello,

C'est bien ce que je craignais !

J'ai vu plein de tutos pour le faire en touchant le code en effet.

Je n'ai pas trouvé de module qui permette de le faire. Les modules permettent souvent de les afficher sur la page d’accueil seulement et non aussi quand on clique sur les catégories.

Pour un autre thème, peux-tu me confirmer si c'est la même choses pour tous les thèmes Prestashop comme Lifestyle ou Minimal n'est-ce pas?

kerlin · May 6, 2020

bonjour

que voulez-vous exactement ? que cela s'affiche aussi sur des pages de catégories ? donc ailleurs que sur la home ?

Divine · May 6, 2020

En fait ça dépend du thème. Normalement pour chaque thème tu as une démo en ligne sur laquelle tu peux vérifier si ce dont tu as besoin est bien présent.

f.ca · May 6, 2020

Merci pour vos réponses.

@kerlin exactement

Ce que je veux :

1-Avoir les catégories affichées en homepage.

2-Lorsqu'on clique sur une catégories (soit sur le point 1 ci-dessus, soit dans le menu en haut ) qu'au dessus de l'ensemble des produits s'affiche les sous-catégories.

@Divine Oui, je regarde bien les démos. Mais comme ce n'est pas évident dessus et que tu sembles bien connaitre les thèmes Prestashop.... bah... Dans le doute mieux vaut demander que de se planter !

Donc aucun thème "brut" de Prestashop ne le propose et aucun module ne permet le point 2 ?

kerlin · May 6, 2020

Alors pour le point 1, il y a des modules pour afficher les catégories sur la home. Certains thèmes le proposent mais pas le thème de base qui, par définition, est basique 😉

Pour le point 2, si on clique sur une catégorie affichée par le module, je n'en connais pas qui afficherait les sous-catégories en-dessous.

Pour le menu en haut, si on clique sur un lien de catégorie, il peut afficher les sous-catégories en sous-menu. Le menu de base le fait, en affichant juste une liste. Des modules de menu peuvent être plus étoffés en affichant les images des catégories dans le sous-menu.
Quand on clique sur une catégorie parente, on se rend sur sa page et en haut de page on peut afficher les sous-catégories avant la liste des produits.

f.ca · May 6, 2020

Oui pour le point 1, il existe des modules mais en effet, ils ne font que le point 1.

Tu écris "Quand on clique sur une catégorie parente, on se rend sur sa page et en haut de page on peut afficher les sous-catégories avant la liste des produits"
Peux tu me dire comment ça peut se faire?

kerlin · May 6, 2020

il faut modifier le fichier themes/classic/templates/catalog/listing/category.tpl de cette façon :

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
 
//ajout pour afficher les sous-catégories

   	<div id="subcategories">
		<ul class="clearfix">
    	 {foreach from=$subcategories item=subcategory}
   			 <li>
      		  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
         	  <img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
       		  </a>
       		  <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
        	 
   			</li>
   		{/foreach}
   		</ul>
    </div>
{/block}

la balise h5 est à modifier en fonction du balisage du site

C'est une modif faite sur 1.7.5.2. A tester pour voir si ça fonctionne sur 1.7.6

Edited May 6, 2020 by kerlin (see edit history)

Divine · May 6, 2020

Ou plus simplement utiliser le partial "category" inutilement inclus de base dans le thème par défaut de Prestashop :

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
    <div id="subcategories">
        {foreach from=$subcategories item=subcategory}
            {include file='catalog/_partials/miniatures/category.tpl' category=$subcategory}
        {/foreach}
    </div>
{/block}

Un fichier inutile de rentabilisé comme ça Bien sûr il faudra styliser tout ça avec un peu de CSS.

PS : @kerlin dans la version 1.7 de Prestashop, les "escapes" ne sont plus utiles, les variables smarty sont automatiquement échappées.

Edited May 6, 2020 by Divine (see edit history)

kerlin · May 6, 2020

je ne l'avais même pas vu celui-là :-)

Faudra aussi modifier le balisage Hn car il est h1. Comme les sous-catégories seront affichées sur la page de la catégorie principale, cela fera trop de h1

Merci pour le PS, je prends bonne note 😉

f.ca · May 6, 2020

OK, donc je n'ai pas d'autre choix que de toucher au code.

Donc je vais créer un thème enfant mettre ce code.

Si je comprends bien le code, de @Divine les sous-catégories devraient s'afficher en tête des produits contenus dans la catégorie avec une miniature format miniature de catégorie.

C'est bien ça?

Encore merci !

kerlin · May 6, 2020

oui, le code de Divine appelle un tpl, le mien ajoute le code directement dans le tpl du fichier qui gère cette partie des pages de catégories, le résultat est le même, il affichera une miniature et le nom des sous-catégories dans la partie au-dessus de la liste de produits

f.ca · May 6, 2020

Ok ! Merci ! Je vais tester de toucher au code donc...

Mais avant et pour aller au bout de mon besoin.
Est-ce que ça affichera également de la même manière les sous-catégories des sous-catégories ?

kerlin · May 6, 2020

Juste p our info au cas où : si vous modifiez un fichier tpl, n'oubliez pas de régler Forcer la recompilation dans Paramètres avancés, Performances. Sinon vous ne verrez pas vos changements. Et gardez toujours le fichier original quelque part (par exemple en le renommant) afin de pouvoir revenir facilement en arrière si besoin.

Pour répondre à votre question : non, sur une page de catégorie, cela affichera ses sous-catégories directes. Mais en cliquant sur l'une d'elle, la nouvelle page affichera ses sous-catégories à elle.

Par contre, votre menu en haut devrait afficher les sous-catégories et les niveaux en dessous. Pour pouvoir améliorer la présentation, il faudra peut-être vous tourner vers un module payant

f.ca · May 8, 2020

On 5/6/2020 at 6:04 PM, Divine said:

utiliser le partial "category" inutilement inclus de base dans le thème par défaut de Prestashop

@DivineJe suis en train d'essayer de rajouter le bout de code mais je ne trouve pas le fichier partial "category". Est-ce que tu peux me préciser son emplacement?

On 5/6/2020 at 11:53 PM, kerlin said:

Pour répondre à votre question : non, sur une page de catégorie, cela affichera ses sous-catégories directes. Mais en cliquant sur l'une d'elle, la nouvelle page affichera ses sous-catégories à elle.

Oui, à chaque clic on avance dans l'arborescence des catégories.

Divine · May 8, 2020

Dans le dossier templates/catalog/_partials/miniatures de ton thème.

f.ca · May 8, 2020

En fait category n'est pas dans un dossier _partials : j'ai trouvé là : emplates\catalog\listing

J'ai réussi à faire apparaître les sous-catégories ! en mettant directement le code de @Divine dans category.tpl
Mais en effet... ce n'est pas très beau...
Merci !

@kerlin Il existe un réglage de la compilation : "recompile template only if the files have been updated"
Ça accélère nettement le chargement après le 1er suivant la mise à jour.

Pour l'affichage des catégories en homepage, je pense en effet qu'un bon module fera l'affaire.

Divine · May 8, 2020

il y a 5 minutes, f.ca a dit :

En fait category n'est pas dans un dossier _partials : j'ai trouvé là : emplates\catalog\listing

Il y a plusieurs fichiers nommés "category.tpl". Celui que je t'ai indiqué est bien dans le dossier _partials et correspond aux différents blocs de catégories. Celui qui se trouve dans le dossier listing est le "conteneur" des blocs de catégories et c'est celui que tu dois modifier pour y intégrer le fichier qui est dans le dossier _partials.

f.ca · May 12, 2020

Bon, je pense avoir avancé !

Que pensez-vous de ça ?

dans le category.tpl (pas le partials ici) : (ça ressemble beaucoup à la proposition de @kerlin)

{extends file='catalog/listing/product-list.tpl'}
 {block name='product_list_header'}
    <div class="block-category card card-block hidden-sm-down">
        <h1 class="h1">{$category.name}</h1>
        {if $category.description}
            <div id="category-description" class="text-muted">{$category.description nofilter}</div>
            <div class="category-cover">
                <img src="{$category.image.large.url}" alt="{$category.image.legend}">
            </div>
        {/if}
    </div>
    <div class="text-xs-center hidden-md-up">
        <h1 class="h1">{$category.name}</h1>    
    </div> 
    <div id="subcategories">
        <ul class="clearfix">
         {foreach from=$subcategories item=subcategory} 
                <li>
                <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
               <img class="replace-2x" src="{$urls.base_url}img/c/{$subcategory.id_category}.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"  />
                 </a>
             <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
               </li>
           {/foreach}
           </ul> 
    </div>
 {/block}

dans le custom.css du thème enfant (affiche 4 catégories par ligne pour les tablettes par exemple, à adapter pour les différents formats) :

@media(min-width:701px) and (max-width:1024px){ 
   #subcategories ul li {
  float: left;
  width: 25%;
  text-align: center;
}

Edited May 12, 2020 by f.ca
forme (see edit history)

Divine · May 12, 2020

Qu'est-ce qu'on est supposés en penser ? On t'a donné deux solutions différentes en t'expliquant le pourquoi du comment donc maintenant c'est à toi de jouer hein.

En l'occurrence, tu as repris le premier code sans tenir compte de nos commentaires et ta version de Prestashop ne semble pas être celle que tu as indiqué dans ton 1er message (en tout cas au niveau de ton thème).

vode11 · March 1, 2021

Bonjour

J'aimerais affiche aussi les sous catégorie sur mon prestashop 1.7.6.7.

J'ai appliqué plusieurs tutos sans pouvoir arriver a les afficher.

J'utilise un thème acheté "Modez"

ci dessous le code de themes/modez/templates/catalog/listing/category.tpl

{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
{if isset($roythemes.nc_cat) && $roythemes.nc_cat == "1"}
<div class="block-category card card-block hidden-sm-down">
{if $category.image.large.url}
<div class="category-cover">
<img src="{$category.image.large.url}" alt="{$category.image.legend}">
</div>
{/if}
<h1 class="h1">{$category.name}</h1>
{if $category.description}
<div id="category-description" class="text-muted">{$category.description nofilter}</div>
{/if}
</div>
<div class="text-sm-center hidden-md-up">
<h1 class="h1">{$category.name}</h1>
</div>
{/if}

{if isset($roythemes.nc_subcat) && $roythemes.nc_subcat == "1"}
{if isset($subcategories)}

<div id="subcategories">
<ul class="clearfix">
{foreach from=$subcategories item=subcategory}
<li>
<div class="sub_cont">
<div class="subcategory-image">
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
{if $subcategory.id_image}
<img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt="{$subcategory.name|escape:'html':'UTF-8'}"/>
{else}
<img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name|escape:'html':'UTF-8'}"/>
{/if}
</a>
</div>
<h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'}</a></h5>
</div>
</li>
{/foreach}
</ul>
</div>
{/if}
{/if}

{/block}

Voilà le code sans modification de mon fichier category.tpl

Comment puis je le modifier pour afficher les sous catégorie svp.

Merci beaucoup pour votre reponse

1063171_1508430768 · November 8, 2021

On 5/6/2020 at 6:04 PM, Divine said:
Ou plus simplement utiliser le partial "category" inutilement inclus de base dans le thème par défaut de Prestashop :
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
    <div id="subcategories">
        {foreach from=$subcategories item=subcategory}
            {include file='catalog/_partials/miniatures/category.tpl' category=$subcategory}
        {/foreach}
    </div>
{/block}
Un fichier inutile de rentabilisé comme ça Bien sûr il faudra styliser tout ça avec un peu de CSS.

PS : @kerlin dans la version 1.7 de Prestashop, les "escapes" ne sont plus utiles, les variables smarty sont automatiquement échappées.

Bonjour Divine,

Je me suis perdu et ai crée un double module de sous catégorie sur ma page en modifiant le category.tpl ( je crois ) ...

Comment puis je éliminer la première inutile sans perdre la seconde ?

En te remerciant par avance de ton aide

Kristos

Coco954 · March 16, 2023

Bonjour,

version 1.7.8.7 / thème de base

Pourriez vous m'aider , j'aimerais que mes articles apparaisses dans la catégorie principal ainsi que dans la sous catégories , lors de la création j'ai bien coché la catégorie , ainsi que la sous catégorie, cependant ils ne s'affiche que dans la sous catégorie

je vous met ci dessous les captures d'écran de la catégorie de base et des sous catégories

merci pour votre aide

Affichage des catégories et sous-catégories

Recommended Posts

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

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