Pied de page avis clients rotatifs

{%- comment -%} NAHNAH AI · Pied de page avis clients rotatifs {%- endcomment -%}
<footer class="nn-footers-avis-rotatifs" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" data-nn-delai="{{ section.settings.delai }}">
  <p class="nn-footers-avis-rotatifs__note"><span aria-hidden="true">★★★★★</span> {{ section.settings.note | escape }}</p>
  <div class="nn-footers-avis-rotatifs__scene" aria-live="polite">
    {%- for block in section.blocks -%}
      <figure class="nn-footers-avis-rotatifs__avis{% if forloop.first %} is-actif{% endif %}" {{ block.shopify_attributes }}>
        <blockquote>« {{ block.settings.texte | escape }} »</blockquote>
        <figcaption>{{ block.settings.auteur | escape }}</figcaption>
      </figure>
    {%- endfor -%}
  </div>
  <nav aria-label="{{ section.settings.menu.title | default: 'Pied de page' | escape }}"><ul role="list" class="nn-footers-avis-rotatifs__menu">{%- for link in section.settings.menu.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}</ul></nav>
  <p class="nn-footers-avis-rotatifs__copy">© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
</footer>

{% schema %}
{
  "name": "Footer avis rotatifs",
  "tag": "section",
  "class": "nn-section-footers-avis-rotatifs",
  "max_blocks": 8,
  "settings": [
    { "type": "text", "id": "note", "label": "Note globale", "default": "4,9/5 sur plus de 1 200 avis" },
    { "type": "range", "id": "delai", "label": "Durée par avis", "min": 3, "max": 12, "step": 1, "unit": "s", "default": 5 },
    { "type": "link_list", "id": "menu", "label": "Menu", "default": "footer" },
    { "type": "header", "content": "Couleurs" },
    { "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#1A1625" },
    { "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#F3F0FA" },
    { "type": "color", "id": "couleur_accent", "label": "Accent (étoiles)", "default": "#FBBF24" },
    { "type": "header", "content": "Espacement" },
    { "type": "range", "id": "marge_haut", "label": "Marge haute", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 56 },
    { "type": "range", "id": "marge_bas", "label": "Marge basse", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 24 }
  ],
  "blocks": [
    { "type": "avis", "name": "Avis", "settings": [
      { "type": "textarea", "id": "texte", "label": "Avis", "default": "Commande reçue en deux jours, qualité au rendez-vous. Je recommande !" },
      { "type": "text", "id": "auteur", "label": "Auteur", "default": "Camille, Lyon" } ] }
  ],
  "presets": [
    { "name": "Footer avis rotatifs", "blocks": [
      { "type": "avis" },
      { "type": "avis", "settings": { "texte": "Service client très réactif, un vrai plaisir.", "auteur": "Yanis, Marseille" } },
      { "type": "avis", "settings": { "texte": "Emballage soigné et produit conforme aux photos.", "auteur": "Inès, Lille" } } ] }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-footers-avis-rotatifs { display: block; padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); text-align: center; }
.nn-footers-avis-rotatifs__note { margin: 0 0 18px; font-size: 14px; font-weight: 700; }
.nn-footers-avis-rotatifs__note span { color: var(--nn-accent); letter-spacing: 2px; }
.nn-footers-avis-rotatifs__scene { display: grid; max-width: 760px; margin: 0 auto; }
.nn-footers-avis-rotatifs__avis { grid-area: 1 / 1; margin: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.6s, transform 0.6s; pointer-events: none; }
.nn-footers-avis-rotatifs__avis.is-actif { opacity: 1; transform: none; pointer-events: auto; }
.nn-footers-avis-rotatifs blockquote { margin: 0 0 10px; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.4; font-weight: 600; }
.nn-footers-avis-rotatifs figcaption { font-size: 14px; opacity: 0.7; }
.nn-footers-avis-rotatifs__menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 36px 0 0; padding: 0; list-style: none; }
.nn-footers-avis-rotatifs a { color: inherit; text-decoration: none; }
.nn-footers-avis-rotatifs a:hover { color: var(--nn-accent); }
.nn-footers-avis-rotatifs a:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
.nn-footers-avis-rotatifs__copy { margin: 18px 0 0; font-size: 12px; opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .nn-footers-avis-rotatifs__avis { transition: none !important; transform: none !important; } }
{% endstylesheet %}

{% javascript %}
(function () {
  // Fait tourner les avis en fondu, pause au survol, arrêt si mouvement réduit
  var reduit = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    var avis = racine.querySelectorAll(".nn-footers-avis-rotatifs__avis");
    if (avis.length < 2 || reduit) return;
    var i = 0, pause = false, delai = (parseInt(racine.getAttribute("data-nn-delai"), 10) || 5) * 1000;
    racine.addEventListener("mouseenter", function () { pause = true; });
    racine.addEventListener("mouseleave", function () { pause = false; });
    setInterval(function () {
      if (pause) return;
      avis[i].classList.remove("is-actif");
      i = (i + 1) % avis.length;
      avis[i].classList.add("is-actif");
    }, delai);
  }
  function tout() { document.querySelectorAll(".nn-footers-avis-rotatifs").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}