Le thème Hyvä a profondément changé la façon de développer des interfaces Magento 2 : exit RequireJS et Knockout.js, place à Alpine.js et Tailwind CSS. Mais qui dit nouvel écosystème, dit aussi repenser de zéro certains composants UI classiques. Voici le retour d’expérience complet sur le développement du widget Hyvä Tabbed Category Product Listing — un slider de produits par catégorie avec chargement dynamique via AJAX — développé par l’équipe Pixellescence.
Contexte et besoin fonctionnel
Sur un site e-commerce Magento 2 propulsé par Hyvä, https://www.elumeen.com/, le client souhaitait afficher en page d’accueil un bloc de mise en avant des produits organisé par catégorie, avec une expérience utilisateur fluide et moderne :
- Des onglets (tabs) cliquables, un par catégorie configurée dans le widget
- Un slider de produits associé à chaque catégorie
- Un switch de catégorie sans rechargement de page — chargement AJAX uniquement lors du premier clic sur un onglet – ce qui allège grandement les lourdeurs de la page.
- Une intégration 100 % compatible Hyvä : pas de jQuery, pas de RequireJS, pas de Knockout
- Configurable entièrement depuis l’interface CMS de Magento (Page Builder ou insertion de widget classique)
Performances et bonnes pratiques Hyvä
| Point d’attention | Approche retenue | Impact |
|---|---|---|
| Rendu initial | Première catégorie chargée en SSR (PHP) | LCP optimisé, pas de flash de contenu vide |
| Appels AJAX | Cache client-side dans Alpine.js (this.cache) | Zéro requête redondante, navigation ultra-fluide |
| Images produits | Attribut loading="lazy" + dimensions explicites | Réduit le CLS, accélère le chargement hors-viewport |
| JavaScript | Fonction Alpine inline dans le template, pas de bundle externe | Pas d’import JS supplémentaire, compatible Hyvä CSP |
| CSS | Classes Tailwind uniquement, purgées à la compilation | Zéro CSS superflu en production |
| Responsive | Détection viewport dans Alpine (handleResize) | 1 slide mobile / 2 tablette / N desktop, sans breakpoint CSS |
| Accessibilité | role="tab", aria-selected, aria-label sur les flèches | Navigation clavier et lecteurs d’écran fonctionnels |
La règle d’or d’un Magento performant : augmenter au maximum les performances serveur en allégeant au maximum chaque bloc de la page.
— Équipe développement Pixellescence, Caen
Résultat et cas d’usage
Le widget est développé pour toute la communauté Hyva ici : https://gitlab.hyva.io/tweetyx/magento-2-hyva-widgets-multi-categories. Il est gratuit et réutilisable pour tout nouveau projet. Le monde de l’open source permet d’avoir accès à de nouveaux modules gratuitement et ainsi réduire le temps de développement et donc de chiffrage pour de nouveaux projets clients ! D’autres widgets ont été développé gratuitement par l’équipe Jajuma : https://github.com/JaJuMa-GmbH/hyva-faq-widget. Il est essentiel d’être passionné et ainsi fouiller dans tous ce que nos confrères font pour ainsi pouvoir répondre au mieux, rapidement, efficiemment pour tout nouveau projet !
Le widget Tabbed Category Product Listing est un exemple concret de section souvent demandée par les clients. Grâce à Hyvä, nous le développons de façon rapide et maîtrisée, tout en leur offrant une interface back-office intuitive pour mettre à jour les catégories et les labels en totale autonomie.
Ce que permet l’écosystème Hyvä lorsqu’on le maîtrise : une interface riche, performante, maintenable et configurable sans toucher au code. Les bénéfices clés en terme technique et SEO :
- Compatible natif Hyvä — zéro RequireJS, zéro Knockout, zéro jQuery
- Expérience UX premium — switch de catégorie instantané grâce au cache Alpine.js
- SEO-friendly — rendu SSR de la première catégorie pour les crawlers et le LCP
- Configurable CMS — ajout/retrait de catégories et de labels sans déploiement
- Accessible — attributs ARIA, navigation clavier, labels explicites
- Responsive by design — adaptation automatique du nombre de slides par breakpoint
Cas d’usage typiques
- Page d’accueil e-commerce : « Nouveautés », « Best-sellers », « Promotions », « Coups de cœur »
- Landing pages saisonnières avec rotation de catégories thématiques
- Pages catégorie parent avec mise en avant des sous-catégories
- Blocs CMS éditoriaux dans des campagnes marketing récurrentes
Un projet Magento / Hyvä à Caen ou à distance ?
Développement de modules sur-mesure, intégration Hyvä, optimisation performances, SEO e-commerce — parlons de votre projet.
Autre synonyme de ce module : Tabbed Category Product Listing – Tabbed Product Carousel – Product Carousel with Tabs – Tabbed Slider – Ajax Product Tabs – Category Tabs Slider