Editorial Landing Pages — Magento Page Builder.
6 editorial landing pages delivered independently on Magento: trend blogs, buying guides, an interactive morpho carousel and FAQ, within a constrained CMS.
htmlcssjavascriptmagento
Challenges
- 01.Pick up an in-progress project on an unfamiliar environment (reinforcement mission)
- 02.Work around Magento Page Builder limits to achieve rich editorial layouts
- 03.Embed interactive components (carousel, FAQ) in a CMS not designed for custom JS
- 04.Keep visual consistency across 6 pages with heterogeneous content (blogs, guides)
Solutions
- 01.Quickly got up to speed with the Magento environment and the project conventions
- 02.Used the Page Builder's native HTML blocks as injection points for custom JS
- 03.Morpho carousel in vanilla JS with silhouette filters and touch navigation in a popup
- 04.Accordion FAQ in vanilla JS: exclusive toggle, other items close automatically
Morpho carousel — navigation + silhouette filtersjavascript
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});
→ NextOther projects