Implémenter un ScrollSpy sur vos fiches produits PrestaShop

Pourquoi ajouter un ScrollSpy sur vos fiches produits

Sur une fiche produit PrestaShop riche — caractéristiques techniques, description longue, avis clients, produits associés — l'utilisateur se retrouve vite à scroller sans repère. Le ScrollSpy résout ce problème en affichant une barre de navigation contextuelle qui met en surbrillance la section actuellement visible à l'écran.

Ce patron UX, popularisé par Bootstrap, améliore significativement l'expérience utilisateur sur les pages longues. Amazon, Cdiscount et la plupart des grandes marketplaces l'utilisent sur leurs fiches produits.

Le principe du ScrollSpy

Le ScrollSpy repose sur trois mécanismes :

1. **Une navbar fixe** contenant des ancres vers chaque section de la page
2. **Un listener JavaScript** qui détecte quelle section est visible dans le viewport
3. **Une classe CSS active** appliquée dynamiquement au lien correspondant

Bootstrap intègre nativement ce composant — et PrestaShop embarque Bootstrap, ce qui simplifie considérablement l'implémentation.

Implémentation sur PrestaShop 1.6 (Bootstrap 3)

PrestaShop 1.6 utilise Bootstrap 3, qui inclut le plugin ScrollSpy en natif. L'intégration est donc directe.

Étape 1 : Préparer le CSS

Ajoutez ces styles dans votre fichier product.css (préférable à global.css pour ne charger le code que sur les fiches produits) :

/* Navigation ScrollSpy produit */
.product-scrollspy-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 20px;
}

.product-scrollspy-nav .nav > li > a {
  padding: 12px 18px;
  color: #666;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: all 0.2s ease;
}

.product-scrollspy-nav .nav > li.active > a,
.product-scrollspy-nav .nav > li > a:hover {
  color: #333;
  background: transparent;
  border-bottom-color: #2fb5d2;
}

/* Offset pour compenser la navbar fixe */
.product-section {
  scroll-margin-top: 60px;
}

Étape 2 : Ajouter la navbar dans product.tpl

Insérez ce bloc dans votre fichier themes/votre-theme/product.tpl, juste avant la zone de contenu principal :

<nav id="product-navbar" class="product-scrollspy-nav navbar navbar-default navbar-static">
  <div class="container">
    <ul class="nav navbar-nav">
      <li><a href="#product-description">{l s='Description'}</a></li>
      {if isset($features) && $features}
        <li><a href="#product-features">{l s='Caractéristiques'}</a></li>
      {/if}
      {if isset($attachments) && $attachments}
        <li><a href="#product-attachments">{l s='Téléchargements'}</a></li>
      {/if}
      {if $HOOK_PRODUCT_TAB}
        <li><a href="#product-reviews">{l s='Avis'}</a></li>
      {/if}
    </ul>
  </div>
</nav>

Étape 3 : Ajouter les ancres sur chaque section

Chaque section de votre fiche produit doit porter un id correspondant aux liens de la navbar. Voici l'exemple pour le bloc caractéristiques :

{if isset($features) && $features}
  <section id="product-features" class="product-section page-product-box">
    <h3 class="page-product-heading">{l s='Fiche technique'}</h3>
    <table class="table-data-sheet">
      {foreach from=$features item=feature}
        <tr class="{cycle values='odd,even'}">
          {if isset($feature.value)}
            <td>{$feature.name|escape:'html':'UTF-8'}</td>
            <td>{$feature.value|escape:'html':'UTF-8'}</td>
          {/if}
        </tr>
      {/foreach}
    </table>
  </section>
{/if}

Étape 4 : Activer le ScrollSpy

Ajoutez l'attribut data-spy sur le de votre page, ou initialisez-le via JavaScript pour plus de contrôle :

$(document).ready(function() {
  $('body').scrollspy({
    target: '#product-navbar',
    offset: 80 // Hauteur de la navbar + marge
  });
});

Implémentation moderne pour PrestaShop 8.x

PrestaShop 8.x n'embarque plus Bootstrap de la même manière. Le thème par défaut utilise Bootstrap 4, et de nombreux thèmes custom s'en affranchissent totalement. Voici une approche sans dépendance Bootstrap, utilisant l'API native IntersectionObserver.

Le JavaScript natif

Créez un fichier scrollspy-product.js dans les assets de votre thème :

document.addEventListener('DOMContentLoaded', function() {
  const sections = document.querySelectorAll('.product-section[id]');
  const navLinks = document.querySelectorAll('.product-scrollspy-nav a[href^="#"]');

  if (!sections.length || !navLinks.length) return;

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          navLinks.forEach((link) => link.classList.remove('active'));
          const activeLink = document.querySelector(
            `.product-scrollspy-nav a[href="#${entry.target.id}"]`
          );
          if (activeLink) activeLink.classList.add('active');
        }
      });
    },
    {
      rootMargin: '-20% 0px -70% 0px',
      threshold: 0
    }
  );

  sections.forEach((section) => observer.observe(section));

  // Smooth scroll au clic
  navLinks.forEach((link) => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    });
  });
});

Le CSS moderne

.product-scrollspy-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eee;
  padding: 0 1rem;
  display: flex;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-scrollspy-nav a {
  display: inline-block;
  padding: 14px 20px;
  color: #666;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.product-scrollspy-nav a.active,
.product-scrollspy-nav a:hover {
  color: #232323;
  border-bottom-color: var(--product-accent, #2fb5d2);
}

.product-section {
  scroll-margin-top: 60px;
}

Intégration Smarty (PrestaShop 8.x)

Dans votre template catalog/product.tpl :

<nav class="product-scrollspy-nav">
  <a href="#product-description">{l s='Description' d='Shop.Theme.Catalog'}</a>
  {if $product.features}
    <a href="#product-features">{l s='Détails du produit' d='Shop.Theme.Catalog'}</a>
  {/if}
  {if $product.attachments}
    <a href="#product-attachments">{l s='Pièces jointes' d='Shop.Theme.Catalog'}</a>
  {/if}
  <a href="#product-reviews">{l s='Avis' d='Shop.Theme.Catalog'}</a>
</nav>

Point important : Sur PrestaShop 8.x, les traductions utilisent le système de domaines (d='Shop.Theme.Catalog'). N'oubliez pas de les inclure pour que vos chaînes soient traduisibles.

Bonnes pratiques et pièges à éviter

Le piège de la navbar fixe

Si votre thème possède déjà un header sticky, la navbar ScrollSpy viendra se superposer. Deux solutions :

• Ajustez le `top` en CSS pour positionner le ScrollSpy sous le header
• Utilisez un `scroll-margin-top` suffisant sur vos sections pour que l'ancrage ne soit pas masqué

Performance sur mobile

Sur mobile, la barre ScrollSpy doit être scrollable horizontalement. Le CSS proposé gère déjà ce cas avec overflow-x: auto. Vérifiez que les libellés restent lisibles et que la zone de tap est suffisante (minimum 44px de hauteur).

Intégrer les modules tiers

Les modules d'avis (Avis Vérifiés, Google Reviews, etc.) injectent leur contenu via des hooks. Pour les inclure dans votre ScrollSpy, encapsulez le hook dans une div avec un id :

<div id="product-reviews" class="product-section">
  {hook h='displayProductTabContent'}
</div>

Lazy loading et recalcul

Si certaines sections chargent du contenu en AJAX (avis, produits associés), l'IntersectionObserver s'adapte automatiquement car il surveille en continu. Avec le ScrollSpy Bootstrap classique, il faut appeler $('body').scrollspy('refresh') après chaque chargement dynamique.

Aller plus loin : ScrollSpy + tabs

Une variante élégante consiste à combiner le ScrollSpy avec un système d'onglets : au-dessus du fold, les sections s'affichent en onglets ; en dessous, le ScrollSpy prend le relais. C'est le pattern utilisé par les fiches produits Amazon. Cette approche nécessite un JavaScript plus élaboré mais offre la meilleure expérience utilisateur sur les fiches produits complexes.