Mot personnel pour la commande

{%- comment -%} NAHNAH AI · Mot personnel pour la commande {%- endcomment -%}
<section class="nn-panier-mot-personnel" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <div class="nn-panier-mot-personnel__carte">
    <label for="nn-panier-mot-personnel-{{ section.id }}">{{ section.settings.titre | escape }}</label>
    <div class="nn-panier-mot-personnel__suggestions">
      {%- for block in section.blocks -%}
      <button type="button" {{ block.shopify_attributes }} data-texte="{{ block.settings.texte | escape }}">{{ block.settings.texte | escape }}</button>
      {%- endfor -%}
    </div>
    <textarea id="nn-panier-mot-personnel-{{ section.id }}" maxlength="{{ section.settings.limite }}" rows="3" placeholder="{{ section.settings.placeholder | escape }}">{{ cart.note }}</textarea>
    <div class="nn-panier-mot-personnel__pied"><span class="nn-panier-mot-personnel__etat" aria-live="polite"></span><span class="nn-panier-mot-personnel__compteur">0/{{ section.settings.limite }}</span></div>
  </div>
</section>
{% schema %}
{"name":"Mot personnel","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Un petit mot à nous laisser ?"},
{"type":"text","id":"placeholder","label":"Texte d'exemple","default":"Écris ton message ici…"},
{"type":"range","id":"limite","label":"Nombre de caractères maximum","min":50,"max":500,"step":10,"default":200},
{"type":"color","id":"couleur_fond","label":"Fond","default":"#FDF2F8"},
{"type":"color","id":"couleur_texte","label":"Texte","default":"#1A1A1A"},
{"type":"color","id":"couleur_accent","label":"Accent","default":"#DB2777"}],
"blocks":[{"type":"suggestion","name":"Suggestion","settings":[{"type":"text","id":"texte","label":"Texte","default":"Joyeux anniversaire !"}]}],
"presets":[{"name":"Mot personnel pour la commande","blocks":[{"type":"suggestion","settings":{"texte":"Joyeux anniversaire !"}},{"type":"suggestion","settings":{"texte":"Merci pour tout"}},{"type":"suggestion","settings":{"texte":"Ne pas mettre la facture dans le colis"}}]}]}
{% endschema %}

{% stylesheet %}
/* Champ de note avec pastilles de suggestions */
.nn-panier-mot-personnel{color:var(--nn-texte);padding:12px 16px}
.nn-panier-mot-personnel__carte{max-width:560px;margin:0 auto;background:var(--nn-fond);border-radius:18px;padding:18px;display:grid;gap:10px}
.nn-panier-mot-personnel label{font-weight:700}
.nn-panier-mot-personnel__suggestions{display:flex;flex-wrap:wrap;gap:8px}
.nn-panier-mot-personnel__suggestions button{border:1px solid color-mix(in srgb,var(--nn-accent) 40%,transparent);background:#fff;color:var(--nn-accent);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;transition:transform .2s}
.nn-panier-mot-personnel__suggestions button:hover{transform:translateY(-2px)}
.nn-panier-mot-personnel textarea{width:100%;box-sizing:border-box;border:1.5px solid color-mix(in srgb,var(--nn-texte) 18%,transparent);border-radius:12px;padding:12px;font:inherit;resize:vertical;background:#fff;color:inherit;transition:border-color .3s,box-shadow .3s}
.nn-panier-mot-personnel textarea:focus{outline:0;border-color:var(--nn-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--nn-accent) 15%,transparent)}
.nn-panier-mot-personnel__pied{display:flex;justify-content:space-between;font-size:12px;opacity:.7}
.nn-panier-mot-personnel__compteur.est-proche{color:var(--nn-accent);font-weight:700;opacity:1}
@media (prefers-reduced-motion: reduce){.nn-panier-mot-personnel__suggestions button,.nn-panier-mot-personnel textarea{transition:none}.nn-panier-mot-personnel__suggestions button:hover{transform:none}}
{% endstylesheet %}

{% javascript %}
// Compteur de caractères et enregistrement automatique dans la note du panier
(function () {
  document.querySelectorAll('.nn-panier-mot-personnel').forEach(function (bloc) {
    var champ = bloc.querySelector('textarea');
    var compteur = bloc.querySelector('.nn-panier-mot-personnel__compteur');
    var etat = bloc.querySelector('.nn-panier-mot-personnel__etat');
    var limite = parseInt(champ.getAttribute('maxlength'), 10), attente;
    function maj() {
      compteur.textContent = champ.value.length + '/' + limite;
      compteur.classList.toggle('est-proche', champ.value.length > limite * 0.9);
    }
    function enregistrer() {
      clearTimeout(attente);
      attente = setTimeout(function () {
        etat.textContent = 'Enregistrement…';
        fetch('/cart/update.js', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ note: champ.value }) })
          .then(function () { etat.textContent = 'Enregistré ✓'; })
          .catch(function () { etat.textContent = ''; });
      }, 600);
    }
    champ.addEventListener('input', function () { maj(); enregistrer(); });
    // Une suggestion remplace le texte actuel
    bloc.querySelectorAll('[data-texte]').forEach(function (b) {
      b.addEventListener('click', function () { champ.value = b.dataset.texte.slice(0, limite); maj(); enregistrer(); champ.focus(); });
    });
    maj();
  });
})();
{% endjavascript %}