Fin de l'offre : temps ou stock

{%- comment -%} NAHNAH AI · Fin de l'offre : temps ou stock {%- endcomment -%}
{%- liquid
  assign produit = section.settings.produit
  assign stock = 0
  assign suivi = false
  if produit != blank
    for v in produit.variants
      if v.inventory_management == 'shopify'
        assign suivi = true
        if v.inventory_quantity > 0
          assign stock = stock | plus: v.inventory_quantity
        endif
      endif
    endfor
  endif
-%}
<section class="nn-compte-a-rebours-stock-et-temps" data-fin="{{ section.settings.date_fin | escape }}" data-stock="{{ stock }}" data-suivi="{{ suivi }}" data-depart="{{ section.settings.stock_depart }}" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" hidden>
  <h2 class="nn-compte-a-rebours-stock-et-temps__titre">{{ section.settings.titre | escape }}</h2>
  <div class="nn-compte-a-rebours-stock-et-temps__duo">
    <div class="nn-compte-a-rebours-stock-et-temps__case"><span>{{ section.settings.label_temps | escape }}</span><b class="nn-compte-a-rebours-stock-et-temps__temps" aria-live="polite">--</b></div>
    <div class="nn-compte-a-rebours-stock-et-temps__case" data-case-stock><span>{{ section.settings.label_stock | escape }}</span><b>{{ stock }}</b><div class="nn-compte-a-rebours-stock-et-temps__jauge"><i></i></div></div>
  </div>
  <p class="nn-compte-a-rebours-stock-et-temps__note">{{ section.settings.note | escape }}</p>
  {%- if produit != blank -%}<a class="nn-compte-a-rebours-stock-et-temps__bouton" href="{{ produit.url }}">{{ section.settings.texte_bouton | escape }}</a>{%- endif -%}
</section>
{% schema %}
{"name":"Offre temps ou stock","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Édition limitée"},
{"type":"product","id":"produit","label":"Produit (stock réel lu dans Shopify)"},
{"type":"text","id":"date_fin","label":"Date de fin réelle (AAAA-MM-JJ HH:MM)"},
{"type":"number","id":"stock_depart","label":"Stock de départ (pour la jauge, facultatif)"},
{"type":"text","id":"label_temps","label":"Libellé temps","default":"Fin dans"},
{"type":"text","id":"label_stock","label":"Libellé stock","default":"Pièces restantes"},
{"type":"text","id":"note","label":"Note","default":"L'offre s'arrête à la date indiquée ou dès que le stock est épuisé."},
{"type":"text","id":"texte_bouton","label":"Bouton","default":"Voir le produit"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#111827"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#F9FAFB"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#F59E0B"}],
"presets":[{"name":"Fin de l'offre : temps ou stock"}]}
{% endschema %}

{% stylesheet %}
/* Deux cases côte à côte : temps et stock réel */
.nn-compte-a-rebours-stock-et-temps{margin:24px 16px;padding:28px 20px;border-radius:20px;background:var(--nn-fond);color:var(--nn-texte);text-align:center}
.nn-compte-a-rebours-stock-et-temps__titre{margin:0 0 18px;font-size:clamp(20px,4.5vw,30px)}
.nn-compte-a-rebours-stock-et-temps__duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:560px;margin:0 auto}
.nn-compte-a-rebours-stock-et-temps__case{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:14px;background:color-mix(in srgb,var(--nn-texte) 8%,transparent)}
.nn-compte-a-rebours-stock-et-temps__case span{font-size:13px;opacity:.7}
.nn-compte-a-rebours-stock-et-temps__case b{font-size:clamp(22px,6vw,36px);font-variant-numeric:tabular-nums;color:var(--nn-accent)}
.nn-compte-a-rebours-stock-et-temps__jauge{height:6px;border-radius:999px;background:color-mix(in srgb,var(--nn-texte) 15%,transparent);overflow:hidden}
.nn-compte-a-rebours-stock-et-temps__jauge i{display:block;height:100%;width:100%;background:var(--nn-accent);transform-origin:left;transition:transform 1s ease}
.nn-compte-a-rebours-stock-et-temps__note{margin:14px 0;font-size:13px;opacity:.7}
.nn-compte-a-rebours-stock-et-temps__bouton{display:inline-block;padding:13px 22px;border-radius:999px;background:var(--nn-accent);color:#111;font-weight:700;text-decoration:none}
@media (max-width:420px){.nn-compte-a-rebours-stock-et-temps__duo{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.nn-compte-a-rebours-stock-et-temps__jauge i{transition:none}}
{% endstylesheet %}

{% javascript %}
// Masque l'offre si la date est passée ou le stock réel épuisé ; sinon affiche temps et jauge
(function () {
  function deux(n) { return (n < 10 ? '0' : '') + n; }
  document.querySelectorAll('.nn-compte-a-rebours-stock-et-temps').forEach(function (bloc) {
    var fin = new Date((bloc.getAttribute('data-fin') || '').replace(' ', 'T')).getTime();
    var suivi = bloc.getAttribute('data-suivi') === 'true';
    var stock = parseInt(bloc.getAttribute('data-stock'), 10) || 0;
    var depart = parseInt(bloc.getAttribute('data-depart'), 10);
    if (isNaN(fin) || fin <= Date.now() || (suivi && stock <= 0)) { return; }
    var caseStock = bloc.querySelector('[data-case-stock]');
    // Stock non suivi par Shopify : on n'affiche pas de faux chiffre
    if (!suivi) { caseStock.hidden = true; }
    var jauge = bloc.querySelector('.nn-compte-a-rebours-stock-et-temps__jauge');
    if (depart > 0) { jauge.firstElementChild.style.transform = 'scaleX(' + Math.min(1, stock / depart) + ')'; } else { jauge.hidden = true; }
    var zone = bloc.querySelector('.nn-compte-a-rebours-stock-et-temps__temps');
    function maj() {
      var s = Math.floor((fin - Date.now()) / 1000);
      if (s <= 0) { bloc.hidden = true; clearInterval(t); return; }
      zone.textContent = (s >= 86400 ? Math.floor(s / 86400) + ' j ' : '') + deux(Math.floor(s / 3600) % 24) + ':' + deux(Math.floor(s / 60) % 60) + ':' + deux(s % 60);
      bloc.hidden = false;
    }
    var t = setInterval(maj, 1000);
    maj();
  });
})();
{% endjavascript %}