Shopping Cart

[reef python]

Hi @raven briar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Bien sûr ! Voici comment créer un panier simple dans Astro en utilisant les Actions et la Session. L’utilisateur pourra ajouter et supprimer un produit du panier. Les calculs de quantité et de prix unitaire seront faits lors de l’affichage du panier.

1. Définir les Actions

Crée un fichier src/actions/cart.ts pour gérer l’ajout et la suppression d’articles dans le panier :

import { defineAction } from 'astro:actions';
import { z } from 'astro:schema';

export const server = {
addToCart: defineAction({
input: z.object({
productId: z.string(),
variation: z.string().optional(),
}),
handler: async (input, context) => {
// Récupère le panier ou initialise-le
const cart = (await context.session?.get('cart')) || [];
// Cherche si le produit (et variation) existe déjà
const index = cart.findIndex(
(item) =>
item.productId === input.productId &&
item.variation === input.variation
);
if (index !== -1) {
cart[index].quantity += 1;
} else {
cart.push({
productId: input.productId,
variation: input.variation,
quantity: 1,
});
}
await context.session?.set('cart', cart);
return cart;
},
}),
removeFromCart: defineAction({
input: z.object({
productId: z.string(),
variation: z.string().optional(),
}),
handler: async (input, context) => {
const cart = (await context.session?.get('cart')) || [];
const index = cart.findIndex(
(item) =>
item.productId === input.productId &&
item.variation === input.variation
);
if (index !== -1) {
cart.splice(index, 1);
}
await context.session?.set('cart', cart);
return cart;
},
}),
};

> Cette structure suit l’exemple officiel pour manipuler le panier avec la session et les actions [Interacting with session data](<https://docs.astro.build/en/guides/sessions/#interacting-with-session-data>).

---

### 2. Utiliser les Actions dans la page produit

Dans ta page produit (par exemple `src/pages/products/[slug].astro`), tu peux utiliser un formulaire pour ajouter au panier :

---
import { actions } from 'astro:actions';
const result = Astro.getActionResult(actions.addToCart);
const product = /* Charger le produit depuis Content Collection */;
---

<form method="post" action={actions.addToCart}>
  <input type="hidden" name="productId" value={product.id} />
  <!-- Si tu as des variations -->
  <select name="variation">
    {product.variations[0].value.map((v) => (
      <option value={v}>{v}</option>
    ))}
  </select>
  <button type="submit">Ajouter au panier</button>
</form>

{result && !result.error && (
  <p class="success">Ajouté au panier !</p>
)}

Utilisation de Astro.getActionResult() pour afficher un message de succès Update the UI with a form action result.

---

3. Afficher et gérer le panier

Dans une page panier (ex: src/pages/cart.astro), récupère le panier depuis la session et affiche les quantités et prix :

---
export const prerender = false;
const cart = await Astro.session?.get('cart') || [];
// Charger les infos produits depuis Content Collection selon les productId du panier
const products = /* ... */;
function getProductInfo(productId) {
  return products.find((p) => p.id === productId);
}
---

<h1>Votre panier</h1>
<ul>
{cart.map((item) => {
const product = getProductInfo(item.productId);
return (
<li>
<img src={product.image} alt={product.name} width="50" />
<strong>{product.name}</strong> ({item.variation})<br />
Quantité: {item.quantity}<br />
Prix unitaire: {product.price} €<br />
<form method="post" action={actions.removeFromCart}>
<input type="hidden" name="productId" value={item.productId} />
<input type="hidden" name="variation" value={item.variation} />
<button type="submit">Supprimer</button>
</form>
</li>
);
})}
</ul>
<p>
Total: {cart.reduce((sum, item) => {
const product = getProductInfo(item.productId);
return sum + product.price * item.quantity;
}, 0).toFixed(2)} €
</p>

---

### 4. Configuration Session

Assure-toi que la session est bien configurée dans `astro.config.mjs` selon ton adapter ([voir la doc](<https://docs.astro.build/en/guides/sessions/#_top>)).

---

**Résumé** :  
- Les actions gèrent l’ajout/suppression dans le panier via la session.
- Le panier est stocké côté serveur, pas de limite de taille, pas de JS obligatoire côté client.
- Les calculs de quantité/prix sont faits lors de l’affichage du panier.

N’hésite pas à demander si tu veux un exemple plus détaillé ou adapté à un framework JS particulier !
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------