Mettre de côté pour plus tard

{%- comment -%} NAHNAH AI · Mettre de côté pour plus tard {%- endcomment -%}
<section class="nn-panier-mettre-de-cote" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <div class="nn-panier-mettre-de-cote__conteneur">
    {%- if cart.item_count > 0 -%}
    <ul class="nn-panier-mettre-de-cote__liste">
      {%- for item in cart.items -%}
      <li data-cle="{{ item.key }}" data-variante="{{ item.variant_id }}" data-quantite="{{ item.quantity }}" data-titre="{{ item.product.title | escape }}" data-image="{{ item.image | image_url: width: 120 }}" data-prix="{{ item.final_price | money | escape }}">
        {%- if item.image -%}<img src="{{ item.image | image_url: width: 120 }}" alt="{{ item.image.alt | escape }}" width="56" height="56" loading="lazy">{%- endif -%}
        <span>{{ item.product.title }}</span>
        <button type="button" class="nn-panier-mettre-de-cote__cote">{{ section.settings.bouton_cote | escape }}</button>
      </li>
      {%- endfor -%}
    </ul>
    {%- endif -%}
    <div class="nn-panier-mettre-de-cote__reserve" hidden>
      <h3>{{ section.settings.titre | escape }}</h3>
      <ul class="nn-panier-mettre-de-cote__mis"></ul>
    </div>
  </div>
  <template class="nn-panier-mettre-de-cote__modele"><li><img alt="" width="56" height="56"><span></span><button type="button">{{ section.settings.bouton_remettre | escape }}</button></li></template>
</section>
{% schema %}
{"name":"Mettre de côté","settings":[
{"type":"text","id":"titre","label":"Titre de la réserve","default":"Mis de côté pour plus tard"},
{"type":"text","id":"bouton_cote","label":"Bouton mettre de côté","default":"Mettre de côté"},
{"type":"text","id":"bouton_remettre","label":"Bouton remettre","default":"Remettre au panier"},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#F8FAFC"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1A1A1A"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#0EA5E9"}],
"presets":[{"name":"Mettre de côté pour plus tard"}]}
{% endschema %}

{% stylesheet %}
/* Liste du panier + réserve d'articles mis de côté */
.nn-panier-mettre-de-cote{color:var(--nn-texte);padding:16px}
.nn-panier-mettre-de-cote__conteneur{max-width:640px;margin:0 auto;display:grid;gap:18px}
.nn-panier-mettre-de-cote ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nn-panier-mettre-de-cote li{display:flex;align-items:center;gap:12px;background:var(--nn-fond);border-radius:14px;padding:10px 12px;animation:nn-panier-mettre-de-cote-entree .4s ease both}
.nn-panier-mettre-de-cote img{border-radius:10px;object-fit:cover;flex:none}
.nn-panier-mettre-de-cote li span{flex:1;min-width:0;font-weight:600}
.nn-panier-mettre-de-cote button{border:1.5px solid var(--nn-accent);background:transparent;color:var(--nn-accent);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.nn-panier-mettre-de-cote__reserve h3{margin:0 0 10px;font-size:16px}
.nn-panier-mettre-de-cote__mis li{border:1px dashed color-mix(in srgb,var(--nn-texte) 25%,transparent);background:transparent}
@keyframes nn-panier-mettre-de-cote-entree{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.nn-panier-mettre-de-cote li{animation:none}}
{% endstylesheet %}

{% javascript %}
// Déplace un article du panier vers une réserve mémorisée dans le navigateur
(function () {
  var CLE = 'nn-mis-de-cote';
  function lire() { try { return JSON.parse(localStorage.getItem(CLE)) || []; } catch (e) { return []; } }
  function ecrire(l) { try { localStorage.setItem(CLE, JSON.stringify(l)); } catch (e) {} }
  document.querySelectorAll('.nn-panier-mettre-de-cote').forEach(function (bloc) {
    var reserve = bloc.querySelector('.nn-panier-mettre-de-cote__reserve');
    var liste = bloc.querySelector('.nn-panier-mettre-de-cote__mis');
    var modele = bloc.querySelector('.nn-panier-mettre-de-cote__modele');
    // Affiche les articles mis de côté
    function afficher() {
      var mis = lire(); liste.innerHTML = ''; reserve.hidden = !mis.length;
      mis.forEach(function (a, i) {
        var li = modele.content.firstElementChild.cloneNode(true);
        li.querySelector('img').src = a.image; li.querySelector('span').textContent = a.titre;
        li.querySelector('button').addEventListener('click', function () {
          fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ items: [{ id: a.variante, quantity: a.quantite }] }) })
            .then(function () { var l = lire(); l.splice(i, 1); ecrire(l); window.location.reload(); });
        });
        liste.appendChild(li);
      });
    }
    bloc.querySelectorAll('.nn-panier-mettre-de-cote__cote').forEach(function (bouton) {
      bouton.addEventListener('click', function () {
        var li = bouton.closest('li'), d = li.dataset;
        fetch('/cart/change.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: d.cle, quantity: 0 }) })
          .then(function () {
            var l = lire(); l.push({ variante: d.variante, quantite: parseInt(d.quantite, 10), titre: d.titre, image: d.image }); ecrire(l);
            window.location.reload();
          });
      });
    });
    afficher();
  });
})();
{% endjavascript %}