Damart · Voir en ligne

Landing Pages Éditoriales — Magento Page Builder

6 landing pages éditoriales livrées en autonomie sur Magento : blogs tendance, guides d'achat, carousel morpho interactif et FAQ — dans un environnement CMS contraint.

HTMLCSSJavaScriptMagento
Année
2026
Stack
HTML · CSS · JavaScript · Magento
Type
Réalisation
Rôle
Dev front + UX

Aperçu

Landing Pages Éditoriales — Magento Page Builder

Conception & réalisation

Problèmes rencontrés, décisions UX et livrables.

Problèmes identifiés

4 points
  1. 1.Reprendre un projet en cours sur un environnement inconnu (mission de renfort)
  2. 2.Contourner les limitations du Page Builder Magento pour des mises en page éditoriales riches
  3. 3.Intégrer des composants interactifs (carousel, FAQ) dans un CMS non prévu pour du JS custom
  4. 4.Assurer une cohérence visuelle sur 6 pages aux contenus hétérogènes (blogs, guides)

Actions réalisées

4 livrables
  1. 1.Prise en main rapide de l'environnement Magento et des conventions du projet
  2. 2.Utilisation des blocs HTML natifs du Page Builder comme points d'injection pour le JS custom
  3. 3.Carousel morpho en JS vanilla avec filtres par silhouette et navigation tactile en popup
  4. 4.FAQ accordéon en JS vanilla : toggle exclusif, fermeture automatique des autres items

Code

javascript
Carousel morpho — navigation + filtres par silhouette
javascript
1const slides = document.querySelectorAll('.slide');
2const filterButtons = document.querySelectorAll('.filter-button');
3let currentIndex = 0;
4

5function showSlide(index) {
6  slides.forEach(s => s.classList.remove('active'));
7  filterButtons.forEach(b => b.classList.remove('active'));
8  slides[index].classList.add('active');
9  filterButtons[index].classList.add('active');
10  currentIndex = index;
11}
12

13document.getElementById('prev').addEventListener('click', () => {
14  showSlide((currentIndex - 1 + slides.length) % slides.length);
15});
16document.getElementById('next').addEventListener('click', () => {
17  showSlide((currentIndex + 1) % slides.length);
18});
19filterButtons.forEach(btn => {
20  btn.addEventListener('click', () => showSlide(+btn.dataset.index));
21});

Suite du parcours

Accéder aux autres projets ou me contacter.

Retour aux projetsMe contacterVoir en ligne
Landing Pages Éditoriales — Magento Page Builder | Louis Rotellini