Total du panier qui défile

{%- comment -%} NAHNAH AI · Total du panier qui défile {%- endcomment -%}
<section class="nn-panier-total-compteur" data-total="{{ cart.total_price }}" data-devise="{{ cart.currency.iso_code }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <div class="nn-panier-total-compteur__boite">
    <span class="nn-panier-total-compteur__libelle">{{ section.settings.libelle | escape }}</span>
    <span class="nn-panier-total-compteur__montant" aria-live="polite">{{ cart.total_price | money }}</span>
    <span class="nn-panier-total-compteur__note">{{ cart.item_count }} {{ section.settings.texte_articles | escape }} · {{ section.settings.note | escape }}</span>
  </div>
</section>
{% schema %}
{"name":"Total animé","settings":[
{"type":"text","id":"libelle","label":"Libellé","default":"Total de ton panier"},
{"type":"text","id":"texte_articles","label":"Mot après le nombre d'articles","default":"article(s)"},
{"type":"text","id":"note","label":"Note","default":"Taxes incluses, livraison calculée au paiement"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#0F172A"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#F8FAFC"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#34D399"}],
"presets":[{"name":"Total du panier qui défile"}]}
{% endschema %}

{% stylesheet %}
/* Grand total façon compteur */
.nn-panier-total-compteur{padding:12px 16px}
.nn-panier-total-compteur__boite{max-width:520px;margin:0 auto;background:var(--nn-fond);color:var(--nn-texte);border-radius:20px;padding:22px;text-align:center;display:grid;gap:6px}
.nn-panier-total-compteur__libelle{font-size:13px;text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.nn-panier-total-compteur__montant{font-size:clamp(34px,8vw,52px);font-weight:800;color:var(--nn-accent);font-variant-numeric:tabular-nums;transition:filter .3s}
.nn-panier-total-compteur__montant.est-anime{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--nn-accent) 60%,transparent))}
.nn-panier-total-compteur__note{font-size:13px;opacity:.65}
@media (prefers-reduced-motion: reduce){.nn-panier-total-compteur__montant{transition:none}}
{% endstylesheet %}

{% javascript %}
// Anime le total quand le panier change (écoute les requêtes /cart/ du thème)
(function () {
  var reduit = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  document.querySelectorAll('.nn-panier-total-compteur').forEach(function (bloc) {
    var montant = bloc.querySelector('.nn-panier-total-compteur__montant');
    var actuel = parseInt(bloc.dataset.total, 10) || 0;
    var format = new Intl.NumberFormat(document.documentElement.lang || 'fr-FR', { style: 'currency', currency: bloc.dataset.devise || 'EUR' });
    function animer(cible) {
      if (reduit) { actuel = cible; montant.textContent = format.format(cible / 100); return; }
      var depart = actuel, debut = performance.now();
      montant.classList.add('est-anime');
      (function pas(t) {
        var p = Math.min(1, (t - debut) / 700), e = 1 - Math.pow(1 - p, 3);
        montant.textContent = format.format((depart + (cible - depart) * e) / 100);
        if (p < 1) { requestAnimationFrame(pas); } else { actuel = cible; montant.classList.remove('est-anime'); }
      })(debut);
    }
    // Interception légère de fetch pour détecter les modifications du panier
    var origine = window.fetch;
    window.fetch = function () {
      var url = String(arguments[0] && arguments[0].url || arguments[0]);
      return origine.apply(this, arguments).then(function (r) {
        if (/\/cart\/(add|change|update|clear)/.test(url)) {
          origine('/cart.js').then(function (x) { return x.json(); }).then(function (c) { animer(c.total_price); });
        }
        return r;
      });
    };
  });
})();
{% endjavascript %}