Add thank you page and fix webhook stock update

- Create thank you page template with bilingual content (FR/EN)
- Add automatic redirect to /thanks after successful payment
- Fix webhook: move kirby()->impersonate() before product update
- Add error handling in webhook with try-catch
- Pass order token to thank you page for future enhancements
- Update thank you page styling for better UX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

assets/css/style.css

@@ -1237,21 +1237,31 @@ body.is-fullscreen {
     border-top: var(--border-light);
   }
 }
-[data-template=thanks] .p__baseline-big {
+[data-template=thanks] .thanks-page {
-  margin-top: calc(var(--spacing) * 3);
+  min-height: 60vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--spacing) * 4) var(--spacing);
+}
+[data-template=thanks] .thanks-content {
+  text-align: center;
+  max-width: 600px;
+}
+[data-template=thanks] .thanks-content h1 {
+  font-size: var(--fs-x-big);
+  margin-bottom: calc(var(--spacing) * 2);
+}
+[data-template=thanks] .thanks-content .thanks-message {
+  font-size: var(--fs-big);
   margin-bottom: calc(var(--spacing) * 3);
+  line-height: 1.6;
 }
-[data-template=thanks] .p__baseline {
+[data-template=thanks] .thanks-content .thanks-message p {
-  text-align: left;
+  margin-bottom: var(--spacing);
-  max-width: 800px;
-  margin: var(--spacing) auto;
 }
-[data-template=thanks] .p__baseline a {
+[data-template=thanks] .thanks-content .thanks-actions {
-  color: var(--color-accent);
+  margin-top: calc(var(--spacing) * 3);
-  text-decoration: none;
-}
-[data-template=thanks] .p__baseline a:hover {
-  text-decoration: underline;
 }
 [data-template=thanks] #site-footer {
   border-top: none;

assets/css/template/shop/_thanks.scss

@@ -1,29 +1,38 @@
-[data-template="thanks"]{
+[data-template="thanks"] {
-    .p__baseline-big {
+  .thanks-page {
-        margin-top: calc(var(--spacing) * 3);
+    min-height: 60vh;
-        margin-bottom: calc(var(--spacing) * 3);
+    display: flex;
-        // font-size: var(--fs-x-big);
+    align-items: center;
-    }
+    justify-content: center;
-    
+    padding: calc(var(--spacing) * 4) var(--spacing);
-    .p__baseline {
+  }
-        // font-size: var(--fs-big);
-        text-align: left;
-        max-width: 800px;
-        margin: var(--spacing) auto;
 
-        a{
+  .thanks-content {
-            color: var(--color-accent);
+    text-align: center;
-            text-decoration: none;
+    max-width: 600px;
-            &:hover{
+
-                text-decoration: underline;
+    h1 {
-            }
+      font-size: var(--fs-x-big);
-        }
+      margin-bottom: calc(var(--spacing) * 2);
     }
 
-    #site-footer{
+    .thanks-message {
-        border-top: none;
+      font-size: var(--fs-big);
-        margin-top: calc(var(--spacing) * 4);
+      margin-bottom: calc(var(--spacing) * 3);
+      line-height: 1.6;
 
+      p {
+        margin-bottom: var(--spacing);
+      }
     }
 
-}
+    .thanks-actions {
+      margin-top: calc(var(--spacing) * 3);
+    }
+  }
+
+  #site-footer {
+    border-top: none;
+    margin-top: calc(var(--spacing) * 4);
+  }
+}

assets/js/snipcart.js

@@ -4,6 +4,13 @@ window.SnipcartSettings = {
   loadStrategy: 'on-user-interaction',
 };
 
+// Redirection après paiement réussi
+document.addEventListener('snipcart.ready', function() {
+  Snipcart.execute('bind', 'order.completed', function(order) {
+    window.location.href = '/thanks?order=' + order.token;
+  });
+});
+
 (() => {
   var c, d;
   (d = (c = window.SnipcartSettings).version) != null || (c.version = '3.0');

content/thanks/thanks.fr.txt

@@ -0,0 +1,9 @@
+Title: Merci pour votre commande
+
+----
+
+Text:
+
+Votre commande a été confirmée ! Vous allez recevoir un email de confirmation sous peu.
+
+Merci pour votre achat.

content/thanks/thanks.txt

@@ -0,0 +1,9 @@
+Title: Thank you for your order
+
+----
+
+Text:
+
+Your order has been confirmed! You will receive a confirmation email shortly.
+
+Thank you for your purchase.

site/blueprints/pages/product.yml

@@ -33,6 +33,9 @@ tabs:
                   fr: Partagé entre les versions FR et EN
                 translate: false
                 width: 1/4
+              space:
+                type: gap
+                width: 2/4
               weight:
                 label:
                   en: Weight (g)
@@ -45,6 +48,42 @@ tabs:
                   fr: Poids en grammes pour le calcul de la livraison
                 translate: false
                 width: 1/4
+              length:
+                label:
+                  en: Length (cm)
+                  fr: Longueur (cm)
+                type: number
+                min: 0
+                default: 0
+                help:
+                  en: Package length in centimeters
+                  fr: Longueur du colis en centimètres
+                translate: false
+                width: 1/4
+              width:
+                label:
+                  en: Width (cm)
+                  fr: Largeur (cm)
+                type: number
+                min: 0
+                default: 0
+                help:
+                  en: Package width in centimeters
+                  fr: Largeur du colis en centimètres
+                translate: false
+                width: 1/4
+              height:
+                label:
+                  en: Height (cm)
+                  fr: Hauteur (cm)
+                type: number
+                min: 0
+                default: 0
+                help:
+                  en: Package height in centimeters
+                  fr: Hauteur du colis en centimètres
+                translate: false
+                width: 1/4
               description:
                 label: Description panier
                 type: writer

site/blueprints/pages/thanks.yml

@@ -0,0 +1,16 @@
+title:
+  en: Thank you
+  fr: Merci
+icon: check
+
+tabs:
+  content:
+    label:
+      en: Content
+      fr: Contenu
+    fields:
+      text:
+        label:
+          en: Message
+          fr: Message
+        type: writer

site/config/config.php

@@ -106,12 +106,15 @@ return [
                     $order = $event['content'] ?? null;
 
                     if ($order && isset($order['items'])) {
+                        // Impersonate pour avoir les permissions d'écriture
+                        kirby()->impersonate('kirby');
+
                         foreach ($order['items'] as $item) {
                             $productId = $item['id'] ?? null;
                             $quantity = $item['quantity'] ?? 0;
 
                             if ($productId && $quantity > 0) {
-                                // Trouver le produit par son snipcartId
+                                // Trouver le produit par son slug
                                 $products = site()->index()->filterBy('intendedTemplate', 'product');
 
                                 foreach ($products as $product) {
@@ -120,12 +123,16 @@ return [
                                         $currentStock = (int) $product->stock()->value();
                                         $newStock = max(0, $currentStock - $quantity);
 
-                                        // Mettre à jour le stock dans toutes les langues
+                                        // Mettre à jour le stock
-                                        $product->update([
+                                        try {
-                                            'stock' => $newStock
+                                            $product->update([
-                                        ]);
+                                                'stock' => $newStock
+                                            ]);
+                                        } catch (Exception $e) {
+                                            // Log l'erreur mais continue le traitement
+                                            error_log('Webhook stock update error: ' . $e->getMessage());
+                                        }
 
-                                        kirby()->impersonate('kirby');
                                         break;
                                     }
                                 }

site/templates/product.php

@@ -47,6 +47,9 @@
                         data-item-name="<?= $page->title()->html() ?>"
                         data-item-shippable="true"
                         data-item-weight="<?= $page->weight()->or(0) ?>"
+                        data-item-length="<?= $page->length()->or(0) ?>"
+                        data-item-width="<?= $page->width()->or(0) ?>"
+                        data-item-height="<?= $page->height()->or(0) ?>"
                         <?php
                         if($page->hasOptions()->toBool() && $page->optionValues()->isNotEmpty()):
                             $values = $page->optionValues()->split(',');

site/templates/thanks.php

@@ -0,0 +1,28 @@
+<?php snippet('header', ['title' => $page->title()]) ?>
+
+    <main>
+        <section class="thanks-page">
+            <div class="thanks-content">
+                <h1><?= $page->title()->html() ?></h1>
+
+                <?php if($page->text()->isNotEmpty()): ?>
+                    <div class="thanks-message">
+                        <?= $page->text()->kt() ?>
+                    </div>
+                <?php endif ?>
+
+                <div class="thanks-actions">
+                    <a href="<?= $site->homePage()->url() ?>" class="btn__default">
+                        <span class="icon">
+                            <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191 0 .383-.072.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191 0-.38.071-.525.215z" fill-rule="nonzero" />
+                            </svg>
+                        </span>
+                        <div class="txt"><?= t('backToShop', 'Retour à la boutique') ?></div>
+                    </a>
+                </div>
+            </div>
+        </section>
+    </main>
+
+<?php snippet('footer') ?>