Aller au contenu

🛒 PanierGratuit · 0 NahnahPar NAHNAH AI

Récapitulatif du panier

Section pour la page panier : articles avec photo, variante, quantité modifiable et suppression, sous-total, puis « Mettre à jour » et « Passer commande » (formulaire natif Shopify).

Voir le codeModifier avec l’IA · 1 Nahnah

Aperçu en direct

Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.

Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).

Code à copier

Fichier complet sections/nahnah-panier-recapitulatif.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Récapitulatif du panier (bibliothèque Sections & effets) {%- endcomment -%}
<nn-panier-recapitulatif class="nn-panier-recapitulatif" style="--nn-mh: {{ section.settings.marge_haut }}px; --nn-mb: {{ section.settings.marge_bas }}px; --nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }}; --nn-bouton: {{ section.settings.couleur_bouton }}; --nn-texte-bouton: {{ section.settings.couleur_texte_bouton }};">
<div class="nn-panier-recapitulatif__contenu">
  <h2 class="nn-panier-recapitulatif__titre">{{ section.settings.titre }}{% if cart.item_count > 0 %} <span class="nn-panier-recapitulatif__nombre">({{ cart.item_count }})</span>{%- endif -%}</h2>
  {%- if cart.item_count > 0 -%}
    <form action="{{ routes.cart_url }}" method="post" class="nn-panier-recapitulatif__formulaire" novalidate>
      <ul class="nn-panier-recapitulatif__lignes" role="list">
        {%- for item in cart.items -%}
          <li class="nn-panier-recapitulatif__ligne">
            <a class="nn-panier-recapitulatif__media" href="{{ item.url }}" tabindex="-1" aria-hidden="true">
              {%- if item.image != blank -%}
                {{ item.image | image_url: width: 200 | image_tag: loading: 'lazy', class: 'nn-panier-recapitulatif__image', alt: '' }}
              {%- endif -%}
            </a>
            <div class="nn-panier-recapitulatif__infos">
              <a class="nn-panier-recapitulatif__nom" href="{{ item.url }}">{{ item.product.title | escape }}</a>
              {%- unless item.product.has_only_default_variant -%}
                <p class="nn-panier-recapitulatif__variante">{{ item.variant.title | escape }}</p>
              {%- endunless -%}
              <p class="nn-panier-recapitulatif__unitaire">{{ item.final_price | money }}</p>
            </div>
            <div class="nn-panier-recapitulatif__quantite">
              <label class="nn-panier-recapitulatif__cache" for="nn-qte-{{ section.id }}-{{ forloop.index }}">Quantité de {{ item.product.title | escape }}</label>
              <button type="button" class="nn-panier-recapitulatif__pas" data-pas="-1" aria-label="Retirer un {{ item.product.title | escape }}"><svg class="nn-panier-recapitulatif__icone" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg></button>
              <input class="nn-panier-recapitulatif__champ" id="nn-qte-{{ section.id }}-{{ forloop.index }}" type="number" name="updates[]" value="{{ item.quantity }}" min="0" inputmode="numeric">
              <button type="button" class="nn-panier-recapitulatif__pas" data-pas="1" aria-label="Ajouter un {{ item.product.title | escape }}"><svg class="nn-panier-recapitulatif__icone" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></button>
            </div>
            <p class="nn-panier-recapitulatif__total-ligne">{{ item.final_line_price | money }}</p>
            <a class="nn-panier-recapitulatif__retirer" href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" aria-label="Retirer {{ item.product.title | escape }} du panier"><svg class="nn-panier-recapitulatif__icone" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg></a>
          </li>
        {%- endfor -%}
      </ul>
      <div class="nn-panier-recapitulatif__pied">
        <p class="nn-panier-recapitulatif__sous-total"><span>{{ section.settings.libelle_sous_total | escape }}</span> <strong>{{ cart.total_price | money }}</strong></p>
        {%- if section.settings.mention != blank -%}
          <p class="nn-panier-recapitulatif__mention">{{ section.settings.mention | escape }}</p>
        {%- endif -%}
        <div class="nn-panier-recapitulatif__actions">
          <button type="submit" name="update" class="nn-panier-recapitulatif__secondaire" data-mettre-a-jour>{{ section.settings.texte_mise_a_jour | escape }}</button>
          <button type="submit" name="checkout" class="nn-panier-recapitulatif__principal"><svg class="nn-panier-recapitulatif__icone" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="10" rx="2"/><path d="M8 10.5v-3a4 4 0 0 1 8 0v3"/><path d="M12 14.5V17"/></svg>{{ section.settings.texte_commande | escape }}</button>
        </div>
      </div>
    </form>
  {%- else -%}
    <div class="nn-panier-recapitulatif__vide">
      <p>{{ section.settings.texte_vide | escape }}</p>
      <a class="nn-panier-recapitulatif__principal" href="{{ routes.all_products_collection_url }}">{{ section.settings.texte_continuer | escape }}</a>
    </div>
  {%- endif -%}
</div>
</nn-panier-recapitulatif>

{% schema %}
{
  "name": "Récapitulatif du panier",
  "tag": "section",
  "class": "nn-section-panier-recapitulatif",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "titre",
      "label": "Titre",
      "default": "Ton panier"
    },
    {
      "type": "text",
      "id": "libelle_sous_total",
      "label": "Libellé du sous-total",
      "default": "Sous-total"
    },
    {
      "type": "text",
      "id": "mention",
      "label": "Mention sous le total",
      "default": "Taxes incluses. Frais de livraison calculés à l’étape du paiement."
    },
    {
      "type": "text",
      "id": "texte_mise_a_jour",
      "label": "Bouton de mise à jour",
      "default": "Mettre à jour"
    },
    {
      "type": "text",
      "id": "texte_commande",
      "label": "Bouton de commande",
      "default": "Passer commande"
    },
    {
      "type": "text",
      "id": "texte_vide",
      "label": "Texte panier vide",
      "default": "Ton panier est vide pour le moment."
    },
    {
      "type": "text",
      "id": "texte_continuer",
      "label": "Bouton panier vide",
      "default": "Continuer mes achats"
    },
    {
      "type": "paragraph",
      "content": "À placer dans le modèle « Panier » (Personnaliser → Panier) à la place de la section des articles."
    },
    {
      "type": "header",
      "content": "Couleurs"
    },
    {
      "type": "color",
      "id": "couleur_fond",
      "label": "Fond",
      "default": "#FFFFFF"
    },
    {
      "type": "color",
      "id": "couleur_texte",
      "label": "Texte",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "couleur_accent",
      "label": "Accent",
      "default": "#2EE6A8"
    },
    {
      "type": "color",
      "id": "couleur_bouton",
      "label": "Bouton",
      "default": "#111111"
    },
    {
      "type": "color",
      "id": "couleur_texte_bouton",
      "label": "Texte du bouton",
      "default": "#FFFFFF"
    },
    {
      "type": "header",
      "content": "Espacement"
    },
    {
      "type": "range",
      "id": "marge_haut",
      "label": "Marge haute",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 40
    },
    {
      "type": "range",
      "id": "marge_bas",
      "label": "Marge basse",
      "min": 0,
      "max": 120,
      "step": 4,
      "unit": "px",
      "default": 40
    }
  ],
  "presets": [
    {
      "name": "Récapitulatif du panier"
    }
  ]
}
{% endschema %}

{% stylesheet %}
.nn-panier-recapitulatif {
  display: block;
  padding: var(--nn-mh, 0px) 16px var(--nn-mb, 0px);
  background: var(--nn-fond);
  color: var(--nn-texte);
}
.nn-panier-recapitulatif[hidden], .nn-panier-recapitulatif [hidden] { display: none !important; }
.nn-panier-recapitulatif *, .nn-panier-recapitulatif *::before, .nn-panier-recapitulatif *::after { box-sizing: border-box; }
.nn-panier-recapitulatif :focus-visible { outline: 3px solid var(--nn-accent); outline-offset: 3px; }
.nn-panier-recapitulatif__editeur { margin: 0; padding: 16px; font-size: 14px; text-align: center; border: 1px dashed currentColor; opacity: 0.7; }
.nn-panier-recapitulatif__contenu { max-width: 960px; margin: 0 auto; }
.nn-panier-recapitulatif__titre { margin: 0 0 20px; font-size: clamp(24px, 4vw, 34px); line-height: 1.15; }
.nn-panier-recapitulatif__nombre { font-size: 0.6em; font-weight: 600; opacity: 0.6; }
.nn-panier-recapitulatif__lignes { margin: 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--nn-texte) 12%, transparent); }
.nn-panier-recapitulatif__ligne {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas: "media infos retirer" "media quantite total";
  gap: 8px 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--nn-texte) 12%, transparent);
}
@media (min-width: 750px) {
  .nn-panier-recapitulatif__ligne { grid-template-columns: 96px minmax(0, 1fr) auto 110px 44px; grid-template-areas: "media infos quantite total retirer"; gap: 20px; }
}
.nn-panier-recapitulatif__media { grid-area: media; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 12px; background: color-mix(in srgb, var(--nn-texte) 6%, transparent); }
.nn-panier-recapitulatif__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.nn-panier-recapitulatif__infos { grid-area: infos; min-width: 0; }
.nn-panier-recapitulatif__nom { color: inherit; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) { .nn-panier-recapitulatif__nom:hover { text-decoration: underline; text-underline-offset: 3px; } }
.nn-panier-recapitulatif__variante, .nn-panier-recapitulatif__unitaire { margin: 2px 0 0; font-size: 13px; opacity: 0.7; }
.nn-panier-recapitulatif__quantite { grid-area: quantite; display: inline-flex; align-items: center; justify-self: start; border: 1px solid color-mix(in srgb, var(--nn-texte) 20%, transparent); border-radius: 999px; }
.nn-panier-recapitulatif__pas { display: grid; place-items: center; width: 40px; height: 44px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.nn-panier-recapitulatif:not(:defined) .nn-panier-recapitulatif__pas { display: none; }
.nn-panier-recapitulatif__champ { width: 44px; min-height: 44px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.nn-panier-recapitulatif__champ::-webkit-inner-spin-button, .nn-panier-recapitulatif__champ::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nn-panier-recapitulatif__total-ligne { grid-area: total; margin: 0; font-weight: 700; text-align: end; }
.nn-panier-recapitulatif__retirer { grid-area: retirer; display: grid; place-items: center; justify-self: end; width: 44px; height: 44px; border-radius: 50%; color: inherit; opacity: 0.6; transition: opacity 0.2s ease, background-color 0.2s ease; }
@media (hover: hover) { .nn-panier-recapitulatif__retirer:hover { opacity: 1; background: color-mix(in srgb, var(--nn-texte) 8%, transparent); } }
.nn-panier-recapitulatif__icone { width: 18px; height: 18px; flex: none; }
.nn-panier-recapitulatif__pied { display: grid; justify-items: end; gap: 8px; margin-top: 20px; text-align: end; }
.nn-panier-recapitulatif__sous-total { display: flex; gap: 16px; align-items: baseline; margin: 0; font-size: 18px; }
.nn-panier-recapitulatif__sous-total strong { font-size: 22px; }
.nn-panier-recapitulatif__mention { margin: 0; font-size: 13px; opacity: 0.7; }
.nn-panier-recapitulatif__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 8px; }
@media (max-width: 749px) { .nn-panier-recapitulatif__actions, .nn-panier-recapitulatif__actions > * { width: 100%; } }
.nn-panier-recapitulatif.est-modifie .nn-panier-recapitulatif__secondaire { border-color: var(--nn-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nn-accent) 30%, transparent); }
.nn-panier-recapitulatif__secondaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 20px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
@media (hover: hover) { .nn-panier-recapitulatif__secondaire:hover { background: color-mix(in srgb, var(--nn-texte) 8%, transparent); } }
.nn-panier-recapitulatif__principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--nn-bouton);
  color: var(--nn-texte-bouton);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) { .nn-panier-recapitulatif__principal:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--nn-bouton) 35%, transparent); } }
.nn-panier-recapitulatif__principal:active { transform: scale(0.97); }
.nn-panier-recapitulatif__vide { padding: 32px 0; text-align: center; }
.nn-panier-recapitulatif__cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .nn-panier-recapitulatif, .nn-panier-recapitulatif *, .nn-panier-recapitulatif *::before, .nn-panier-recapitulatif *::after {
    animation: none !important;
    transition: none !important;
  }
}
{% endstylesheet %}

{% javascript %}
if (!customElements.get("nn-panier-recapitulatif")) {
  customElements.define("nn-panier-recapitulatif", class extends HTMLElement {
    connectedCallback() {
      if (this.dataset.nnPret) return;
      this.dataset.nnPret = "1";
      var soi = this;
      // Boutons - / + : modifient le champ (le panier est enregistré par « Mettre à jour », formulaire natif)
      this.addEventListener("click", function (e) {
        var pas = e.target.closest && e.target.closest("[data-pas]");
        if (!pas) return;
        var champ = pas.parentNode.querySelector("input");
        if (!champ) return;
        champ.value = Math.max(0, (parseInt(champ.value, 10) || 0) + Number(pas.dataset.pas));
        soi.classList.add("est-modifie");
      });
      this.addEventListener("input", function () { soi.classList.add("est-modifie"); });
    }
  });
}
{% endjavascript %}
Télécharger le fichier .liquid

Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.

Prompt à copier

À coller dans Claude ou ChatGPT avec le fichier téléchargé (ou le code copié) : l’assistant t’aide à l’installer et à l’adapter à ta marque.

Tu es un expert des thèmes Shopify Online Store 2.0. Aide-moi à installer puis à adapter à ma marque cet élément gratuit de la bibliothèque NAHNAH AI.

Élément : « Récapitulatif du panier » (Panier)
Description : Section pour la page panier : articles avec photo, variante, quantité modifiable et suppression, sous-total, puis « Mettre à jour » et « Passer commande » (formulaire natif Shopify).
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/panier-recapitulatif
Fichier : nahnah-panier-recapitulatif.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-panier-recapitulatif.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).

Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-panier-recapitulatif ».
3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Ce que j’attends de toi :
- Guide-moi pas à pas dans Shopify : Boutique en ligne → Thèmes → « … » → Modifier le code → dossier sections → Ajouter une section, puis Personnaliser → Ajouter une section.
- Propose-moi d’adapter les couleurs, les textes et les liens à ma marque : demande d’abord mes couleurs (codes hexadécimaux), mon ton et mes liens.
- Garde le bloc {% schema %} et tous ses réglages (identifiants, types, presets) : je dois pouvoir tout régler ensuite dans l’éditeur de thème.
- Rends-moi le fichier complet modifié, prêt à coller, sans faux avis, fausse urgence ni chiffre inventé.

Si tu as le connecteur NAHNAH AI (MCP), récupère directement le code exact avec l’outil obtenir_code_element (id : panier-recapitulatif).

Installer dans ma boutique

En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).

Chargement de tes boutiques…

Installer dans Shopify

  1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
  2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-panier-recapitulatif ».
  3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
  4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Installer via le MCP

Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément panier-recapitulatif de la bibliothèque NAHNAH AI et les étapes pour l’installer ». L’assistant récupère le code et les étapes (outil obtenir_code_element), gratuitement.

Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element).

Connecter le MCP

Dans la même catégorie