Pop-up produit du moment

{%- comment -%} NAHNAH AI · Pop-up produit du moment (vrai produit de la collection) {%- endcomment -%}
{%- assign p = section.settings.collection.products.first -%}
{%- if p -%}
<div class="nn-popup-produit-du-moment" data-delai="{{ section.settings.delai }}" hidden style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};" role="dialog" aria-label="{{ section.settings.titre | escape }}">
  <button type="button" class="nn-popup-produit-du-moment__fermer" aria-label="Fermer">×</button>
  <a href="{{ p.url }}" class="nn-popup-produit-du-moment__photo">{%- if p.featured_image -%}{{ p.featured_image | image_url: width: 300 | image_tag: alt: p.title }}{%- endif -%}</a>
  <div><small>{{ section.settings.titre | escape }}</small><a href="{{ p.url }}" class="nn-popup-produit-du-moment__nom">{{ p.title | escape }}</a><strong>{{ p.price | money }}</strong><a href="{{ p.url }}" class="nn-popup-produit-du-moment__bouton">Voir le produit</a></div>
</div>
{%- endif -%}
{% schema %}
{"name":"Produit du moment","settings":[
{"type":"collection","id":"collection","label":"Collection (le premier produit est affiché)"},
{"type":"range","id":"delai","label":"Apparition après (secondes)","min":3,"max":90,"step":1,"default":15},
{"type":"text","id":"titre","label":"Petit titre","default":"Notre coup de cœur"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FFFFFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#141414"},
{"type":"color","id":"couleur_accent","label":"Bouton","default":"#F97316"}],
"presets":[{"name":"Pop-up produit du moment"}]}
{% endschema %}

{% stylesheet %}
/* Carte qui glisse depuis le bas à gauche */
.nn-popup-produit-du-moment{position:fixed;left:16px;bottom:16px;z-index:70;width:min(340px,calc(100vw - 32px));box-sizing:border-box;display:grid;grid-template-columns:92px 1fr;gap:12px;align-items:center;padding:12px;border-radius:18px;background:var(--nn-fond);color:var(--nn-texte);box-shadow:0 18px 40px rgba(0,0,0,.22);animation:nn-popup-produit-du-moment-glisse .55s cubic-bezier(.2,1.2,.4,1)}
.nn-popup-produit-du-moment[hidden]{display:none}
.nn-popup-produit-du-moment__photo img{width:92px;height:92px;object-fit:cover;border-radius:12px;display:block}
.nn-popup-produit-du-moment div{display:flex;flex-direction:column;gap:3px;min-width:0}
.nn-popup-produit-du-moment small{color:var(--nn-accent);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.nn-popup-produit-du-moment__nom{color:inherit;text-decoration:none;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nn-popup-produit-du-moment__bouton{margin-top:4px;align-self:flex-start;background:var(--nn-accent);color:#fff;text-decoration:none;font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px}
.nn-popup-produit-du-moment__fermer{position:absolute;top:4px;right:8px;border:0;background:transparent;font-size:20px;cursor:pointer;color:inherit}
@keyframes nn-popup-produit-du-moment-glisse{from{opacity:0;transform:translateY(40px)}}
@media (prefers-reduced-motion: reduce){.nn-popup-produit-du-moment{animation:none}}
{% endstylesheet %}

{% javascript %}
// Affiche la carte après le délai, une fois par visite
document.querySelectorAll('.nn-popup-produit-du-moment').forEach(function (carte) {
  var cle = 'nn-popup-produit-du-moment-vu';
  try { if (sessionStorage.getItem(cle)) { return; } } catch (e) {}
  var delai = (parseInt(carte.getAttribute('data-delai'), 10) || 15) * 1000;
  setTimeout(function () { carte.hidden = false; try { sessionStorage.setItem(cle, '1'); } catch (e) {} }, delai);
  carte.querySelector('.nn-popup-produit-du-moment__fermer').addEventListener('click', function () { carte.hidden = true; });
});
{% endjavascript %}