Prestashop 1.6 modifier l’affichage des produits en liste

Pour pouvoir modifier la présentation des produits de prestashop il faut faire quelques petites modifications dans le javascript dans un premier temps.

Pour cela il faut aller sur le fichier global.js qui se trouve dans le dossier js qui se trouve dans votre dossier thème.

A la ligne 205 du fichier global.js vous trouvez la function bindGrid()

function bindGrid()
{
        var view = $.totalStorage('display');
       
        if (!view && (typeof displayList != 'undefined') && displayList)
                view = 'list';

        if (view && view != 'grid')
                display(view);
        else
                $('.display').find('li#grid').addClass('selected');
       
        $(document).on('click', '#grid', function(e){
                e.preventDefault();
                display('grid');
        });

        $(document).on('click', '#list', function(e){
                e.preventDefault();
                display('list');
        });
}

C’est la fonction que l’on va modifier. on change cette partie de code :

if (view && view != 'grid')
                display(view);
        else
                $('.display').find('li#grid').addClass('selected');
       

par ce code :

if (view && view != 'list')
                display(view);
        else {
                $('.display').find('li#list').addClass('selected');
                display("list");
        }

Une fois les changements faits enregistrez le fichier.

Ensuite allez sur le fichier product-list.tpl qui se situe à la racine de votre thème, et modifiez la ligne 41 <ul{if isset($id) && $id} id="{$id}"{/if} class="product_list grid row{if isset($class) && $class} {$class}{/if}"> en changeant grid par list

Enregistrez le fichier actualisez et hop l’affichage dans les catégories est bien affiché en forme de list

Messages

  • Bonjour,

    Super content de trouver un tuto sur ce sujet et pour cette version.
    Par contre chez moi ça ne change rien du tout ..Et maintenant que j’ai clique sur Liste comment savoir si c’est le résultat de l’affichage par défaut

    Merci pour votre aide.

    • Bonjour,
      Contente de voir que mon tuto pour mettre en liste les produit dans prestashop 1.6 interesse. Alors je ne comprends pas bien ta question. Déjà on est bien d’accord que le code concerne uniquement le visuel des pages catégorie. De plus, as tu bien vidé le cache ? Personnellement, j’ai enlevé la possibilité de mettre les uns à coté des autres, et l’affichage des produits dans la page catégorie sont toujours en liste.

  • Bonjour,
    merci pour votre technique pour le mode liste plutôt que grille, mais je voudrais aller un peu plus loin dans cette procédure et je voudrais savoir si vous auriez une solution !

    je voudrais, en faite, afficher certaines catégories en mode liste et d’autre en mode grille,
    mais je n’arrive pas a faire des condition if dans le fichier global.js pour que, selon ma catégorie où je suis, il utilise le mode grille ou liste que j’aurais défini selon mon id de catégorie. (exemple : if $category->id == ’11’ )
    auriez vous une solution à cela SVP merci d’avance pour votre aide.

    Sébastien

  • Re-bonjour,
    j’ai trouvé une solution en modifiant le fichier product-list.tpl et header.tpl !
    Car je n’ai pas réussi en mettre une condition if dans le global.js ni le FrontController.php !

    Donc j’ai enlevé la fonction "grille liste" du global.js et j’ai créé 2 nouveaux fichier .js avec l’un une version de la fonction "grille liste" en liste et le 2eme en grille et j’ai mis mon "if category id" dans le header.tpl qui appelle selon mon id de catégorie l’un ou l’autre fichier .js et j’ai aussi rajouter un "if category id" dans le product-list.tpl.
    Et cela fonctionne très bien !

    J’aurais préféré modifier directement dans le global.js ou FrontController.php, cela aurait été plus facile, mais je n’arrive pas formuler mes "if category id" correctement pour qu’ils soient reconnu par ces genres de fichiers.
    Si quelqu’un à une meilleure solution que moi je suis preneur !

    Merci de votre réponse,
    Cordialement,
    Sébastien

  • Bonjour, je cherche exactement à faire la même chose que Sébastien, c’est à dire présenter certaines catégories en liste et d’autres en grille, je serai très intéressé pour obtenir le code du header.tpl avec l’appel aux 2 fichiers js ;
    De mon côté j’avais réussi à charger 2 fichiers category.tpl en procédant à une modification du fichier CategoryController de cette manière :
    /**
    * Initializes page content variables
    */
    public function initContent()

    parent ::initContent() ;

    if ($this->category->id == 13)

    $this->setTemplate(_PS_THEME_DIR_.’category2.tpl’) ;

    else

    $this->setTemplate(_PS_THEME_DIR_.’category.tpl’) ;


    if (!$this->customer_access)
    return ;

    peut être une solution différente à creuser ?
    merci de votre aide

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

  • Pour créer des paragraphes, laissez simplement des lignes vides.

Notre Newsletter

Nous contacter

WEBFORCOM
4, place de la Pergola
95000 CERGY
09 53 49 17 76
contact@webforcom.fr

2013-2024 Création site internet cergy-pontoise  -  Mentions légales  -  Politique de confidentialité  -  Plan du site  -  Site réalisé avec Spip