Suggestion de pays et devise

{%- comment -%} NAHNAH AI · Suggestion de pays et devise {%- endcomment -%}
{%- if localization.available_countries.size > 1 or localization.available_languages.size > 1 -%}
<div class="nn-popups-suggestion-pays" data-pays-actuel="{{ localization.country.iso_code }}" data-langue-actuelle="{{ localization.language.iso_code }}" hidden
  style="--nn-fond:{{ section.settings.fond }};--nn-texte:{{ section.settings.texte_couleur }};--nn-accent:{{ section.settings.accent }};">
  <div class="nn-popups-suggestion-pays__boite" role="dialog" aria-labelledby="nn-sp-t-{{ section.id }}">
    <button type="button" class="nn-popups-suggestion-pays__x" data-fermer aria-label="Fermer">×</button>
    <p id="nn-sp-t-{{ section.id }}" class="nn-popups-suggestion-pays__titre">{{ section.settings.titre }}</p>
    {%- form 'localization', class: 'nn-popups-suggestion-pays__form' -%}
      <label>{{ section.settings.libelle_pays }}
        <select name="country_code">
          {%- for c in localization.available_countries -%}
            <option value="{{ c.iso_code }}" {% if c.iso_code == localization.country.iso_code %}selected{% endif %}>{{ c.name }} ({{ c.currency.iso_code }} {{ c.currency.symbol }})</option>
          {%- endfor -%}
        </select>
      </label>
      {%- if localization.available_languages.size > 1 -%}
      <label>{{ section.settings.libelle_langue }}
        <select name="language_code">
          {%- for l in localization.available_languages -%}
            <option value="{{ l.iso_code }}" {% if l.iso_code == localization.language.iso_code %}selected{% endif %}>{{ l.endonym_name | capitalize }}</option>
          {%- endfor -%}
        </select>
      </label>
      {%- endif -%}
      <input type="hidden" name="return_to" value="{{ request.path }}">
      <div class="nn-popups-suggestion-pays__actions">
        <button type="button" data-fermer>{{ section.settings.libelle_rester }}</button>
        <button type="submit" class="nn-popups-suggestion-pays__ok">{{ section.settings.libelle_valider }}</button>
      </div>
    {%- endform -%}
  </div>
</div>
{%- endif -%}
{% schema %}
{"name":"Suggestion de pays","settings":[
{"type":"text","id":"titre","label":"Titre","default":"Tu visites depuis un autre pays ? 🌍 Choisis ta devise et ta langue."},
{"type":"text","id":"libelle_pays","label":"Libellé pays","default":"Pays / devise"},
{"type":"text","id":"libelle_langue","label":"Libellé langue","default":"Langue"},
{"type":"text","id":"libelle_rester","label":"Bouton rester","default":"Rester ici"},
{"type":"text","id":"libelle_valider","label":"Bouton valider","default":"Mettre à jour"},
{"type":"color","id":"fond","label":"Fond","default":"#ffffff"},
{"type":"color","id":"texte_couleur","label":"Texte","default":"#0f172a"},
{"type":"color","id":"accent","label":"Accent","default":"#0ea5e9"}],
"presets":[{"name":"Suggestion de pays"}]}
{% endschema %}

{% stylesheet %}
.nn-popups-suggestion-pays{position:fixed;top:16px;right:16px;left:16px;z-index:9998;display:flex;justify-content:flex-end;pointer-events:none}
.nn-popups-suggestion-pays[hidden]{display:none}
.nn-popups-suggestion-pays__boite{pointer-events:auto;position:relative;width:min(360px,100%);padding:18px;border-radius:18px;background:var(--nn-fond);color:var(--nn-texte);box-shadow:0 18px 50px rgba(0,0,0,.18);animation:nn-sp-in .4s ease-out}
.nn-popups-suggestion-pays__x{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;background:none;color:inherit;font-size:22px;cursor:pointer}
.nn-popups-suggestion-pays__titre{margin:0 28px 12px 0;font-weight:600;font-size:15px}
.nn-popups-suggestion-pays__form{display:grid;gap:10px}
.nn-popups-suggestion-pays__form label{display:grid;gap:4px;font-size:13px;font-weight:600}
.nn-popups-suggestion-pays__form select{padding:10px;border:1.5px solid rgba(0,0,0,.15);border-radius:10px;font-size:15px;background:#fff;color:#111}
.nn-popups-suggestion-pays__actions{display:flex;gap:8px}
.nn-popups-suggestion-pays__actions button{flex:1;min-height:44px;border:1.5px solid var(--nn-accent);border-radius:12px;background:none;color:inherit;font-weight:600;cursor:pointer}
.nn-popups-suggestion-pays__actions .nn-popups-suggestion-pays__ok{background:var(--nn-accent);color:#fff}
.nn-popups-suggestion-pays button:focus-visible,.nn-popups-suggestion-pays select:focus-visible{outline:3px solid var(--nn-accent);outline-offset:2px}
@keyframes nn-sp-in{from{transform:translateY(-16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.nn-popups-suggestion-pays__boite{animation:none}}
{% endstylesheet %}

{% javascript %}
// Suggestion de pays NAHNAH : s'affiche seulement si la langue du navigateur diffère, Échap pour fermer
(function(){
  var p=document.querySelector('.nn-popups-suggestion-pays');if(!p)return;
  try{if(localStorage.getItem('nn-pays-choisi'))return;}catch(e){}
  // Compare la langue du navigateur (ex. "de-CH") avec la langue et le pays de la boutique
  var nav=(navigator.language||'').split('-'),langueNav=(nav[0]||'').toLowerCase(),paysNav=(nav[1]||'').toUpperCase();
  var differe=langueNav&&langueNav!==p.dataset.langueActuelle.toLowerCase().split('-')[0]||paysNav&&paysNav!==p.dataset.paysActuel;
  if(!differe)return;
  // Pré-sélectionne le pays détecté s'il est proposé
  var sel=p.querySelector('select[name=country_code]');if(paysNav&&sel.querySelector('option[value="'+paysNav+'"]'))sel.value=paysNav;
  var selL=p.querySelector('select[name=language_code]');if(selL&&selL.querySelector('option[value="'+langueNav+'"]'))selL.value=langueNav;
  function memoriser(){try{localStorage.setItem('nn-pays-choisi',1);}catch(e){}}
  function fermer(){p.hidden=true;memoriser();}
  setTimeout(function(){p.hidden=false;},1500);
  p.addEventListener('click',function(e){if(e.target.closest('[data-fermer]'))fermer();});
  p.querySelector('form').addEventListener('submit',memoriser);
  document.addEventListener('keydown',function(e){if(e.key==='Escape'&&!p.hidden)fermer();});
})();
{% endjavascript %}