Expédié aujourd’hui si tu commandes vite

{%- comment -%} NAHNAH AI · Expédié aujourd’hui si tu commandes vite {%- endcomment -%}
<div class="nn-fiches-produit-expedition-aujourdhui" 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-heure="{{ section.settings.heure_limite }}" data-nn-weekend="{{ section.settings.weekend }}">
  <div class="nn-fiches-produit-expedition-aujourdhui__carte">
    <span class="nn-fiches-produit-expedition-aujourdhui__point" aria-hidden="true"></span>
    <p class="nn-fiches-produit-expedition-aujourdhui__texte">
      <span data-nn-avant>{{ section.settings.texte_avant | escape }}</span>
      <strong class="nn-fiches-produit-expedition-aujourdhui__chrono" data-nn-chrono>--:--:--</strong>
      <span data-nn-apres>{{ section.settings.texte_aujourdhui | escape }}</span>
    </p>
  </div>
  <template data-nn-demain>{{ section.settings.texte_demain | escape }}</template>
</div>

{% schema %}
{
  "name": "Expédition du jour",
  "tag": "section",
  "class": "nn-section-fiches-produit-expedition-aujourdhui",
  "settings": [
    { "type": "range", "id": "heure_limite", "label": "Heure limite d’expédition", "min": 8, "max": 22, "step": 1, "unit": "h", "default": 14 },
    { "type": "checkbox", "id": "weekend", "label": "Expédier aussi le week-end", "default": false },
    { "type": "text", "id": "texte_avant", "label": "Texte avant le chrono", "default": "Commande dans" },
    { "type": "text", "id": "texte_aujourdhui", "label": "Texte après (jour même)", "default": "et ton colis part aujourd’hui." },
    { "type": "text", "id": "texte_demain", "label": "Texte après (jour suivant)", "default": "et ton colis part au prochain jour ouvré." },
    { "type": "header", "content": "Couleurs" },
    { "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#ECFDF5" },
    { "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#064E3B" },
    { "type": "color", "id": "couleur_accent", "label": "Accent", "default": "#10B981" },
    { "type": "header", "content": "Espacement" },
    { "type": "range", "id": "marge_haut", "label": "Marge haute", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 16 },
    { "type": "range", "id": "marge_bas", "label": "Marge basse", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 16 }
  ],
  "presets": [ { "name": "Expédition du jour" } ]
}
{% endschema %}

{% stylesheet %}
.nn-fiches-produit-expedition-aujourdhui { padding: var(--nn-mh) 16px var(--nn-mb); }
.nn-fiches-produit-expedition-aujourdhui__carte { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: var(--nn-fond); color: var(--nn-texte); border: 1px solid color-mix(in srgb, var(--nn-accent) 35%, transparent); }
.nn-fiches-produit-expedition-aujourdhui__point { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--nn-accent); }
.nn-fiches-produit-expedition-aujourdhui__point::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--nn-accent); animation: nn-fiches-produit-expedition-aujourdhui-pulse 1.6s ease-out infinite; }
.nn-fiches-produit-expedition-aujourdhui__texte { margin: 0; font-size: 15px; line-height: 1.5; }
.nn-fiches-produit-expedition-aujourdhui__chrono { font-variant-numeric: tabular-nums; color: var(--nn-accent); font-weight: 800; }
@keyframes nn-fiches-produit-expedition-aujourdhui-pulse { to { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nn-fiches-produit-expedition-aujourdhui__point::after { animation: none !important; display: none; }
}
{% endstylesheet %}

{% javascript %}
(function () {
  // Calcule la prochaine heure limite d'expédition et met le chrono à jour chaque seconde
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    var heure = +racine.getAttribute("data-nn-heure") || 14, weekend = racine.getAttribute("data-nn-weekend") === "true";
    var chrono = racine.querySelector("[data-nn-chrono]"), apres = racine.querySelector("[data-nn-apres]");
    var texteJour = apres.textContent, tpl = racine.querySelector("[data-nn-demain]"), texteDemain = tpl ? tpl.innerHTML.trim() : texteJour;
    function ouvre(d) { var j = d.getDay(); return weekend || (j !== 0 && j !== 6); }
    function prochaineLimite(now) {
      var d = new Date(now); d.setHours(heure, 0, 0, 0);
      var memeJour = ouvre(now) && now < d;
      while (!memeJour && (d <= now || !ouvre(d))) { d.setDate(d.getDate() + 1); d.setHours(heure, 0, 0, 0); }
      return { date: d, aujourdhui: memeJour };
    }
    function deux(n) { return ("0" + n).slice(-2); }
    function maj() {
      var now = new Date(), l = prochaineLimite(now), s = Math.max(0, Math.floor((l.date - now) / 1000));
      var h = Math.floor(s / 3600), m = Math.floor(s % 3600 / 60);
      chrono.textContent = h > 23 ? Math.floor(h / 24) + " j " + deux(h % 24) + " h" : deux(h) + ":" + deux(m) + ":" + deux(s % 60);
      apres.textContent = l.aujourdhui ? texteJour : texteDemain;
    }
    maj();
    setInterval(maj, 1000);
  }
  function tout() { document.querySelectorAll(".nn-fiches-produit-expedition-aujourdhui").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}