30 Avr 2024
Créer un modèle de page catégorie

Personnaliser des pages catégories dans Creative Element

Il s’est écoulé 11 mois entre la dernière mise à jour du module Creative Element et la précédente. Cette attente prolongée est due à un développement particulièrement complexe, mais très attendu par la communauté ! Grâce à cette mise à jour de Creative Element, vous aurez désormais la possibilité d’éditer intégralement vos pages catégories !

Pourquoi la mise à jour du module était longue ?

Il y a plusieurs facteurs qui influent sur la durée du développement des nouvelles fonctionnalités du module.

Premièrement, la modification de la page catégorie est en préparation depuis longtemps, mais cela n’est pas si simple. En effet, sur PrestaShop, on utilise souvent un module de recherche, la navigation à facettes, pour la gestion des filtres. S’adapter à tout cela n’est pas une mince affaire… D’autant plus que les développeurs n’ont pas seulement introduit cette option dans la nouvelle version, j’en parle plus en détail plus loin dans l’article.

Depuis début 2023, PrestaShop a accéléré le lancement des versions 8, avec de nombreuses versions mineures à la clé. Cela a contraint les développeurs à ajuster leurs modules pour les adapter aux dernières versions. Je pense que la nouvelle politique de sécurité a eu un impact sur le développement. Il va également falloir s’adapter à PrestaShop 9, qui est prévu pour la fin de l’année 2024.

La liste des modifications pour Creative Element en 2024

Cet article est fait pour parler principalement de l’édition de la page catégorie mais d’autres fonctionnalités on été ajouté. Il y a eu aussi 73 corrections dans le module… pour permettre encore une meilleure stabilité du builder Prestashop.

Voici en tout cas en français la liste des nouveautés de la version 2.10 :

  • Nouveau : Introduction du constructeur de modèles pour les pages Catégorie, Fabricant, Listing et Aucun Résultat.
  • Nouveau : Widgets Grille de Catégories, Liste de Catégories, Image de Catégorie, Nom de Catégorie, Nom de Marque, Nom de Listing, Image de Listing, Filtres, Filtres Actifs, Description de Catégorie, Description Additionnelle, Description de Marque, Description Courte, Description de Listing, Tri, Produits, Pagination, Info de Listing, Bloc de Listing, Template de Listing, Personnalisation de Produit & Templates.
  • Nouveau : Widgets Galerie d’Images, Fil d’Ariane & Arbre de Catégories remaniés.
  • Nouveau : Info de Listing, URL pour Effacer les Filtres & Tags dynamiques bascule ajoutés.
  • Nouveau : Support de PrestaShop 8.1.x.
  • Nouveau : Support du label “En Vente !”.
  • Nouveau : Fonctionnalité d’affichage de l’image du produit ajoutée au widget Variants de Produit.
  • Nouveau : Fonctionnalité de Filtre d’Arrière-plan ajoutée aux arrière-plans des éléments.
  • Nouveau : Fonctionnalité de Scrollbar & Roulette de Souris ajoutée aux vignettes du widget Images de Produit.
  • Nouveau : Fonctionnalité de groupe Lightbox ajoutée aux widgets Carousel d’Images, Galerie d’Images & Images.
  • Nouveau : Option d’étirement ajoutée à l’Alignement Vertical dans la mise en page de Colonne.
  • Nouveau : Support de Vidéo Choix ajouté au widget Vidéo.
  • Nouveau : Option de Catégorie Personnalisée ajoutée aux widgets Menu de Navigation & Arbre de Catégories.
  • Nouveau : Fonctionnalité d’URL Incorporée ajoutée au tag dynamique Lightbox.
  • Nouveau : Ajout du hook displayCEShoppingCartFooter au widget Panier d’Achat.
  • Nouveau : Contrôle d’affichage des Vignettes de Menu de Catégorie ajouté au widget Menu de Navigation.
  • Nouveau : Réductions ajoutées aux Sous-totaux du widget Panier d’Achat.
  • Nouveau : Support de PrestaBlog ajouté au widget Menu de Navigation.
  • Nouveau : État de Commande Arrière ajouté au widget Stock de Produit.
  • Nouveau : Option de Quantité de Produit ajoutée aux tags dynamiques Ajouter au Panier & Acheter Maintenant.
  • Nouveau : Option d’affichage du Prix Unitaire ajoutée au widget Prix de Produit.
  • Nouveau : Gestion des sessions expirées de Backoffice par l’éditeur.
  • Nouveau : Paramètre Avancé – Priorité CSS & JS.
  • Nouveau : Paramètre Avancé – Charger la bibliothèque Animate.css.
  • Nouveau : Paramètre Expérimental – Désactiver les Polices Google.
  • Nouveau : Icône X-twitter ajoutée aux widgets Icônes Sociales & Partage de Produit.

Une formation Prestashop pour créer sa boutique seul

Comment modifier les catégories de produit avec Creative Element ?

C’est désormais possible avec cette version, et pas seulement pour les catégories. Un espace de listage est disponible au niveau des modèles de page pour permettre de créer des modèles différents pour les catégories, les marques, les promotions, les nouveaux produits, les meilleures ventes, la page sans résultats et la page de recherche.

Vous allez pouvoir optimiser des pages natives qui avaient jusqu’ici seulement des produits, comme les promotions… Enfin !

Listage modèle Creative Element
Toutes les nouvelles entrées pour créer un modèle de page

À partir de là, le processus est le même : vous personnalisez un modèle de page et une fois prêt, vous pouvez l’associer à une page en particulier. Mais pour ces pages-là, Creative Element embarque 20 nouveaux widgets !

16 nouveaux widgets pour vos catégories

Pour pouvoir créer des modèles pour des pages particulières, il vous faut de nouvelles fonctions. Pas moins de 20 widgets sont ajoutés au module, dont 16 uniquement pour la page catégorie. Ils vont permettre de créer des pages catégories comme on n’en a jamais vu jusqu’à présent. Je suis assez impressionné !

Nouveaux widgets catégorie de creative element
Les widgets pour la page catégorie

En suivant le changelog mentionné plus haut, certains widgets que nous avions auparavant ont également été retravaillés pour de meilleures performances ou pour s’adapter au listage.

Personnalisez vos filtres de recherche avec Creative Element

Une des principales nouveautés est l’affichage des filtres de produits pour la recherche dans les pages de catégories. Les widgets s’appuient sur le module natif de navigation à facette. Vous pouvez configurer les types de filtres que vous souhaitez (par taille, prix, etc.) directement dans le module PrestaShop. Creative Element ajoute une importante couche graphique et fonctionnelle.

widgets page builder
Les possibilités dans les catégories avec les nouveaux widgets

Vous pouvez placer les filtres sur votre colonne de gauche ou de manière horizontale. Un widget permet également d’afficher les filtres une fois sélectionnés. De plus, le bouton de filtre en version mobile a été spécialement conçu pour s’adapter à toutes les situations envisageables avec les filtres.

Le filtrage adaptatif des vignettes, basé sur les variations, permet, une fois un tri effectué, d’adapter l’image du produit pour afficher la version correspondante à la déclinaison choisie.

En termes d’apparence, vous disposez de nombreux choix, avec la possibilité de personnaliser le curseur des prix et de décider si les filtres sont déroulés ou non. Les possibilités sont sans limites !

Placez votre pagination, description, sous-catégories…

Grâce à tous les autres widgets, vous pourrez personnaliser vos catégories avec les informations qui leur sont dédiées. Placez votre description avant ou après les produits. Le titre peut être mis sur un fond de couleur en pleine largeur. Pour les sous-catégories, deux widgets sont disponibles : en grille ou en liste, avec ou sans défilement. Activez une pagination classique ou un défilement infini.

Page custom catégorie PrestaShop
Un exemple de ce qu’on peut faire, rien à voir avec le thème Classic de base

Nouveaux réglages et des nouvelles fonctions à venir

Cette mise à jour inclut d’autres options. Dans les réglages, il y a des fonctions expérimentales susceptibles d’être intégrées dans les prochaines versions, comme cela a déjà été le cas.

L’une des options permet de désactiver les Google Fonts, ce qui contribue notamment à réduire les scripts externes. Cependant, il vous faudra importer vos propres typographies via le menu des polices et des icônes.

Dans l’onglet avancé, toujours dans les réglages et pour optimiser la performance, vous pouvez par exemple désactiver animate.css. Cela est également possible pour swiper, mais attention, ces éléments permettent certaines animations dans Creative Element. Désactivez-les uniquement si vous n’en avez pas besoin.

La nouvelle option ‘Priorité CSS et JS’ peut être utile en cas de conflit avec d’autres modules PrestaShop. Elle permet de modifier l’ordre de chargement des scripts sur une page.

Mettre à jour Creative Element sur Prestashop 8.1

Cette nouvelle version est adaptée aux dernières versions de PrestaShop 8, mais elle reste compatible avec la version 1.7.

Vous pouvez télécharger la dernière version et l’importer dans votre back-office, cela ne devrait pas poser de problème. Cependant, je recommande fortement de réaliser une sauvegarde de votre boutique avant de procéder. Ce n’est pas une mise à jour mineure et elle pourrait engendrer des conflits selon vos modules ou thèmes existants.

D’ailleurs, j’ai cours sur la mise à jour du module dans ma formation en ligne.

772424 un hébergement Prestashop