Glisser pour supprimer un article

{%- comment -%} NAHNAH AI · Glisser pour supprimer un article {%- endcomment -%}
<section class="nn-panier-glisser-supprimer" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  {%- if cart.item_count > 0 -%}
  <p class="nn-panier-glisser-supprimer__astuce">{{ section.settings.astuce | escape }}</p>
  <ul class="nn-panier-glisser-supprimer__liste">
    {%- for item in cart.items -%}
    <li class="nn-panier-glisser-supprimer__ligne" data-cle="{{ item.key }}">
      <button type="button" class="nn-panier-glisser-supprimer__retirer">{{ section.settings.bouton | escape }}</button>
      <div class="nn-panier-glisser-supprimer__contenu">
        {%- 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 }} <small>× {{ item.quantity }}</small></span>
        <strong>{{ item.final_line_price | money }}</strong>
      </div>
    </li>
    {%- endfor -%}
  </ul>
  {%- endif -%}
</section>
{% schema %}
{"name":"Glisser pour supprimer","settings":[
{"type":"text","id":"astuce","label":"Astuce","default":"Astuce : fais glisser un article vers la gauche pour le retirer."},
{"type":"text","id":"bouton","label":"Bouton retirer","default":"Retirer"},
{"type":"color","id":"couleur_fond","label":"Fond des lignes","default":"#FFFFFF"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1A1A1A"},
{"type":"color","id":"couleur_accent","label":"Couleur de suppression","default":"#DC2626"}],
"presets":[{"name":"Glisser pour supprimer un article"}]}
{% endschema %}

{% stylesheet %}
/* Lignes glissables avec bouton de suppression révélé */
.nn-panier-glisser-supprimer{color:var(--nn-texte);padding:16px;max-width:640px;margin:0 auto}
.nn-panier-glisser-supprimer__astuce{font-size:13px;opacity:.6;margin:0 0 10px}
.nn-panier-glisser-supprimer__liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nn-panier-glisser-supprimer__ligne{position:relative;border-radius:14px;overflow:hidden;background:var(--nn-accent);transition:opacity .3s,max-height .35s;max-height:200px}
.nn-panier-glisser-supprimer__retirer{position:absolute;right:0;top:0;bottom:0;width:96px;border:0;background:transparent;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.nn-panier-glisser-supprimer__contenu{position:relative;display:flex;align-items:center;gap:12px;background:var(--nn-fond);padding:10px 12px;touch-action:pan-y;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nn-panier-glisser-supprimer__contenu.est-glisse{transition:none}
.nn-panier-glisser-supprimer img{border-radius:10px;object-fit:cover;flex:none}
.nn-panier-glisser-supprimer__contenu span{flex:1;min-width:0}
.nn-panier-glisser-supprimer__ligne.est-retiree{opacity:0;max-height:0}
@media (prefers-reduced-motion: reduce){.nn-panier-glisser-supprimer__ligne,.nn-panier-glisser-supprimer__contenu{transition:none}}
{% endstylesheet %}

{% javascript %}
// Gestion du glissement tactile ou souris et suppression via /cart/change.js
(function () {
  document.querySelectorAll('.nn-panier-glisser-supprimer__ligne').forEach(function (ligne) {
    var contenu = ligne.querySelector('.nn-panier-glisser-supprimer__contenu');
    var depart = null, decalage = 0, ouvert = false;
    contenu.addEventListener('pointerdown', function (e) { depart = e.clientX - (ouvert ? -96 : 0); contenu.classList.add('est-glisse'); });
    contenu.addEventListener('pointermove', function (e) {
      if (depart === null) { return; }
      decalage = Math.min(0, Math.max(-110, e.clientX - depart));
      contenu.style.transform = 'translateX(' + decalage + 'px)';
    });
    function relacher() {
      if (depart === null) { return; }
      depart = null; contenu.classList.remove('est-glisse');
      ouvert = decalage < -48;
      contenu.style.transform = ouvert ? 'translateX(-96px)' : '';
    }
    contenu.addEventListener('pointerup', relacher);
    contenu.addEventListener('pointerleave', relacher);
    ligne.querySelector('.nn-panier-glisser-supprimer__retirer').addEventListener('click', function () {
      ligne.classList.add('est-retiree');
      fetch('/cart/change.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: ligne.dataset.cle, quantity: 0 }) })
        .then(function () { setTimeout(function () { window.location.reload(); }, 350); });
    });
  });
})();
{% endjavascript %}