1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import { useState } from "react"
import { useProducts } from "medusa-react"
import { medusaClient } from "../lib/medusa-client"
import { ensureCart } from "../lib/storefront"
import { formatAmount } from "../lib/format"
export default function Home() {
const { products, isLoading } = useProducts()
const [status, setStatus] = useState("")
const [addingId, setAddingId] = useState(null)
const handleAddToCart = async (product) => {
const variantId = product?.variants?.[0]?.id
if (!variantId) {
setStatus("Aucune variante disponible pour ce produit.")
return
}
setAddingId(product.id)
setStatus("")
try {
const cart = await ensureCart(medusaClient)
await medusaClient.carts.lineItems.create(cart.id, {
variant_id: variantId,
quantity: 1,
})
setStatus(`${product.title} a été ajouté au panier.`)
} catch (error) {
setStatus("Impossible d'ajouter au panier pour le moment.")
} finally {
setAddingId(null)
}
}
return (
<div>
<h1>Bienvenue sur la boutique Lucien-sens-bon</h1>
{isLoading && <span>Chargement des produits...</span>}
{status && <p style={{ marginTop: "1rem" }}>{status}</p>}
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "1rem" }}>
{products && products.map((product) => (
<div key={product.id} style={{ border: "1px solid #ccc", padding: "1rem", borderRadius: "8px" }}>
<h3>{product.title}</h3>
<p>{product.description}</p>
<p style={{ fontWeight: 600 }}>
{formatAmount(
product?.variants?.[0]?.prices?.[0]?.amount,
product?.variants?.[0]?.prices?.[0]?.currency_code || "eur"
)}
</p>
<button
type="button"
onClick={() => handleAddToCart(product)}
disabled={addingId === product.id}
style={{
border: "1px solid #ccc",
background: "#fff",
borderRadius: "6px",
padding: "0.4rem 0.8rem",
cursor: "pointer",
}}
>
{addingId === product.id ? "Ajout..." : "Ajouter au panier"}
</button>
</div>
))}
</div>
{!isLoading && !products?.length && (
<p>Aucun produit trouvé. Connectez-vous à l'admin pour en ajouter !</p>
)}
</div>
)
}
|
