Avis avec vote « utile »

{%- comment -%} NAHNAH AI · Avis avec vote « utile » {%- endcomment -%}
<section class="nn-avis-vote-utile" style="--nn-accent: {{ section.settings.accent }};">
  <div class="nn-avis-vote-utile__entete">
    <h2>{{ section.settings.titre }}</h2>
    <button type="button" class="nn-avis-vote-utile__trier">Les plus utiles d'abord</button>
  </div>
  <div class="nn-avis-vote-utile__liste">
    {% for block in section.blocks %}
    <article class="nn-avis-vote-utile__avis" data-nn-votes="{{ block.settings.votes }}" data-nn-cle="{{ section.id }}-{{ block.id }}" {{ block.shopify_attributes }}>
      <strong>{{ block.settings.auteur }}</strong>
      <p>{{ block.settings.texte }}</p>
      <div class="nn-avis-vote-utile__vote">
        <span>Cet avis vous a-t-il aidé ?</span>
        <button type="button" data-nn-choix="oui">Oui</button>
        <button type="button" data-nn-choix="non">Non</button>
        <small><b>{{ block.settings.votes }}</b> personne(s) l'ont trouvé utile</small>
      </div>
    </article>
    {% endfor %}
  </div>
</section>
{% schema %}
{"name":"Avis vote utile","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Avis clients"},
{"type":"color","id":"accent","label":"Couleur","default":"#2563EB"}],
"blocks":[{"type":"avis","name":"Avis","settings":[
{"type":"text","id":"auteur","label":"Auteur","default":"Prénom N."},
{"type":"textarea","id":"texte","label":"Avis","default":"Remplacez par l'avis réel de votre client."},
{"type":"number","id":"votes","label":"Votes « utile » de départ","default":0}]}],
"presets":[{"name":"Avis vote utile","blocks":[{"type":"avis"},{"type":"avis"},{"type":"avis"}]}]}
{% endschema %}

{% stylesheet %}
/* Avis avec boutons Oui / Non */
.nn-avis-vote-utile{padding:60px 5vw;max-width:780px;margin:0 auto}
.nn-avis-vote-utile__entete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.nn-avis-vote-utile__trier{font:inherit;background:none;border:1px solid var(--nn-accent);color:var(--nn-accent);border-radius:99px;padding:6px 14px;cursor:pointer}
.nn-avis-vote-utile__liste{display:grid;gap:14px;margin-top:20px}
.nn-avis-vote-utile__avis{border:1px solid #e4e4e7;border-radius:14px;padding:18px;background:#fff;transition:transform .3s}
.nn-avis-vote-utile__vote{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:#52525b}
.nn-avis-vote-utile__vote button{font:inherit;border:1px solid #d4d4d8;background:#fff;border-radius:8px;padding:4px 12px;cursor:pointer}
.nn-avis-vote-utile__vote button.is-choisi{background:var(--nn-accent);border-color:var(--nn-accent);color:#fff}
.nn-avis-vote-utile__vote small{flex-basis:100%;color:#71717a}
@media (prefers-reduced-motion: reduce){.nn-avis-vote-utile__avis{transition:none}}
{% endstylesheet %}

{% javascript %}
// Vote « utile » mémorisé dans le navigateur du visiteur et tri par votes
(function () {
  function lire(k) { try { return localStorage.getItem(k); } catch (e) { return null; } }
  function ecrire(k, v) { try { localStorage.setItem(k, v); } catch (e) {} }
  document.querySelectorAll('.nn-avis-vote-utile').forEach(function (s) {
    var liste = s.querySelector('.nn-avis-vote-utile__liste');
    s.querySelectorAll('.nn-avis-vote-utile__avis').forEach(function (a) {
      var cle = 'nn-vote-' + a.dataset.nnCle, base = parseInt(a.dataset.nnVotes, 10) || 0, compteur = a.querySelector('small b');
      function afficher(choix) {
        a.querySelectorAll('[data-nn-choix]').forEach(function (b) { b.classList.toggle('is-choisi', b.dataset.nnChoix === choix); });
        var total = base + (choix === 'oui' ? 1 : 0);
        compteur.textContent = total; a.dataset.nnTotal = total;
      }
      afficher(lire(cle));
      a.addEventListener('click', function (e) {
        var b = e.target.closest('[data-nn-choix]'); if (!b) return;
        ecrire(cle, b.dataset.nnChoix); afficher(b.dataset.nnChoix);
      });
    });
    s.querySelector('.nn-avis-vote-utile__trier').addEventListener('click', function () {
      Array.prototype.slice.call(liste.children).sort(function (x, y) { return (y.dataset.nnTotal | 0) - (x.dataset.nnTotal | 0); }).forEach(function (el) { liste.appendChild(el); });
    });
  });
})();
{% endjavascript %}