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
Challenges
- 01.Reprendre un projet en cours sur un environnement inconnu (mission de renfort)
- 02.Contourner les limitations du Page Builder Magento pour des mises en page éditoriales riches
- 03.Intégrer des composants interactifs (carousel, FAQ) dans un CMS non prévu pour du JS custom
- 04.Assurer une cohérence visuelle sur 6 pages aux contenus hétérogènes (blogs, guides)
Solutions
- 01.Prise en main rapide de l'environnement Magento et des conventions du projet
- 02.Utilisation des blocs HTML natifs du Page Builder comme points d'injection pour le JS custom
- 03.Carousel morpho en JS vanilla avec filtres par silhouette et navigation tactile en popup
- 04.FAQ accordéon en JS vanilla : toggle exclusif, fermeture automatique des autres items
Carousel morpho — navigation + filtres par silhouettejavascript
1const slides = document.querySelectorAll('.slide');2const filterButtons = document.querySelectorAll('.filter-button');3let currentIndex = 0;45function 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}1213document.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});
→ SuiteAutres projets