Pied de page offre à compte à rebours

{%- comment -%} NAHNAH AI · Pied de page offre à compte à rebours {%- endcomment -%}
<footer class="nn-footers-offre-compte-rebours" 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-fin="{{ section.settings.date_fin | escape }}">
  <div class="nn-footers-offre-compte-rebours__offre" data-nn-offre>
    <p class="nn-footers-offre-compte-rebours__titre">{{ section.settings.titre | escape }}</p>
    <div class="nn-footers-offre-compte-rebours__chrono" data-nn-chrono hidden>
      <span><b data-nn-j>0</b>j</span><span><b data-nn-h>00</b>h</span><span><b data-nn-m>00</b>min</span><span><b data-nn-s>00</b>s</span>
    </div>
    {%- if section.settings.code != blank -%}
      <button type="button" class="nn-footers-offre-compte-rebours__code" data-nn-code="{{ section.settings.code | escape }}">{{ section.settings.code | escape }} <span data-nn-etiquette>Copier</span></button>
    {%- endif -%}
  </div>
  <div class="nn-footers-offre-compte-rebours__bas">
    <ul role="list">{%- for link in section.settings.menu.links -%}<li><a href="{{ link.url }}">{{ link.title | escape }}</a></li>{%- endfor -%}</ul>
    <p>© {{ 'now' | date: '%Y' }} {{ shop.name | escape }}</p>
  </div>
</footer>

{% schema %}
{
  "name": "Footer offre limitée",
  "tag": "section",
  "class": "nn-section-footers-offre-compte-rebours",
  "settings": [
    { "type": "text", "id": "titre", "label": "Texte de l’offre", "default": "-15 % sur votre première commande" },
    { "type": "text", "id": "code", "label": "Code promo", "default": "BIENVENUE15" },
    { "type": "text", "id": "date_fin", "label": "Date de fin (AAAA-MM-JJ HH:MM)", "default": "2026-12-31 23:59", "info": "Une fois la date passée, l’offre se masque automatiquement." },
    { "type": "link_list", "id": "menu", "label": "Menu", "default": "footer" },
    { "type": "header", "content": "Couleurs" },
    { "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#18120E" },
    { "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#FFF7ED" },
    { "type": "color", "id": "couleur_accent", "label": "Accent", "default": "#F97316" },
    { "type": "header", "content": "Espacement" },
    { "type": "range", "id": "marge_haut", "label": "Marge haute", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 48 },
    { "type": "range", "id": "marge_bas", "label": "Marge basse", "min": 0, "max": 120, "step": 4, "unit": "px", "default": 24 }
  ],
  "presets": [ { "name": "Footer offre limitée" } ]
}
{% endschema %}

{% stylesheet %}
.nn-footers-offre-compte-rebours { display: block; padding: var(--nn-mh) 16px var(--nn-mb); background: var(--nn-fond); color: var(--nn-texte); }
.nn-footers-offre-compte-rebours__offre { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; max-width: 1100px; margin: 0 auto; padding: 24px; border: 1px dashed var(--nn-accent); border-radius: 20px; text-align: center; }
.nn-footers-offre-compte-rebours__offre[hidden] { display: none; }
.nn-footers-offre-compte-rebours__titre { margin: 0; font-size: 22px; font-weight: 800; }
.nn-footers-offre-compte-rebours__chrono { display: flex; gap: 8px; }
.nn-footers-offre-compte-rebours__chrono[hidden] { display: none; }
.nn-footers-offre-compte-rebours__chrono span { min-width: 54px; padding: 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 11px; opacity: 0.9; }
.nn-footers-offre-compte-rebours__chrono b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--nn-accent); }
.nn-footers-offre-compte-rebours__code { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--nn-accent); color: #1C0F05; font: inherit; font-weight: 800; letter-spacing: 0.06em; cursor: pointer; transition: transform 0.2s; }
.nn-footers-offre-compte-rebours__code:hover { transform: scale(1.04); }
.nn-footers-offre-compte-rebours__code span { padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.15); font-size: 12px; letter-spacing: 0; }
.nn-footers-offre-compte-rebours__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; max-width: 1100px; margin: 28px auto 0; font-size: 13px; }
.nn-footers-offre-compte-rebours__bas ul { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
.nn-footers-offre-compte-rebours__bas p { margin: 0; opacity: 0.6; }
.nn-footers-offre-compte-rebours a { color: inherit; text-decoration: none; }
.nn-footers-offre-compte-rebours a:hover { color: var(--nn-accent); }
.nn-footers-offre-compte-rebours a:focus-visible, .nn-footers-offre-compte-rebours button:focus-visible { outline: 2px solid var(--nn-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nn-footers-offre-compte-rebours * { transition: none !important; } }
{% endstylesheet %}

{% javascript %}
(function () {
  // Compte à rebours jusqu'à la date de fin + copie du code promo
  function deux(n) { return (n < 10 ? "0" : "") + n; }
  function brancher(racine) {
    if (racine.dataset.nnPret) return;
    racine.dataset.nnPret = "1";
    var offre = racine.querySelector("[data-nn-offre]"), chrono = racine.querySelector("[data-nn-chrono]");
    var brut = (racine.getAttribute("data-nn-fin") || "").trim().replace(" ", "T");
    var fin = brut ? new Date(brut).getTime() : NaN;
    function maj() {
      if (isNaN(fin)) return;
      var reste = Math.floor((fin - Date.now()) / 1000);
      if (reste <= 0) { offre.hidden = true; clearInterval(minuteur); return; }
      chrono.hidden = false;
      racine.querySelector("[data-nn-j]").textContent = Math.floor(reste / 86400);
      racine.querySelector("[data-nn-h]").textContent = deux(Math.floor(reste % 86400 / 3600));
      racine.querySelector("[data-nn-m]").textContent = deux(Math.floor(reste % 3600 / 60));
      racine.querySelector("[data-nn-s]").textContent = deux(reste % 60);
    }
    var minuteur = setInterval(maj, 1000);
    maj();
    var bouton = racine.querySelector("[data-nn-code]");
    if (bouton) bouton.addEventListener("click", function () {
      var etiquette = bouton.querySelector("[data-nn-etiquette]");
      var code = bouton.getAttribute("data-nn-code");
      var ok = function () { etiquette.textContent = "Copié !"; setTimeout(function () { etiquette.textContent = "Copier"; }, 2000); };
      if (navigator.clipboard) navigator.clipboard.writeText(code).then(ok, ok); else ok();
    });
  }
  function tout() { document.querySelectorAll(".nn-footers-offre-compte-rebours").forEach(brancher); }
  tout();
  document.addEventListener("shopify:section:load", tout);
})();
{% endjavascript %}