From 25a2eef9796840d41f4ee6609e1f4a3d25db0b81 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Fri, 2 Jan 2026 20:37:43 +0100
Subject: [PATCH] fix: improve products page price format and mobile button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use € symbol via Intl.NumberFormat instead of currency code
- Make 'Add to Cart' button show icon only on mobile (sm:inline for text)
- Add formatPrice() helper for consistent currency formatting

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/shop/products.html | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/templates/shop/products.html b/app/templates/shop/products.html
index 43f3a6cb..7c4e2ddf 100644
--- a/app/templates/shop/products.html
+++ b/app/templates/shop/products.html
@@ -84,13 +84,19 @@
                             <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2 line-clamp-2" x-text="product.marketplace_product?.title"></h3>
                         </a>
                         <p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2" x-text="product.marketplace_product?.description"></p>
-                        <div class="flex items-center justify-between">
-                            <div>
-                                <span class="text-2xl font-bold text-primary" x-text="`${product.currency} ${product.price}`"></span>
-                                <span x-show="product.sale_price" class="text-sm text-gray-500 line-through ml-2" x-text="`${product.currency} ${product.sale_price}`"></span>
+                        <div class="flex items-center justify-between gap-2">
+                            <div class="min-w-0">
+                                <span class="text-xl sm:text-2xl font-bold text-primary" x-text="formatPrice(product.price)"></span>
+                                <span x-show="product.sale_price" class="text-sm text-gray-500 line-through ml-2" x-text="formatPrice(product.sale_price)"></span>
                             </div>
-                            <button @click.prevent="addToCart(product)" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors">
-                                Add to Cart
+                            <button @click.prevent="addToCart(product)"
+                                    class="flex-shrink-0 p-2 sm:px-4 sm:py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors flex items-center justify-center gap-2"
+                                    style="background-color: var(--color-primary)"
+                                    :title="'Add to Cart'">
+                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+                                </svg>
+                                <span class="hidden sm:inline">Add to Cart</span>
                             </button>
                         </div>
                     </div>
@@ -201,6 +207,14 @@ document.addEventListener('alpine:init', () => {
             this.loadProducts();
         },
 
+        formatPrice(amount) {
+            if (!amount && amount !== 0) return '';
+            return new Intl.NumberFormat('de-DE', {
+                style: 'currency',
+                currency: 'EUR'
+            }).format(amount);
+        },
+
         async addToCart(product) {
             console.log('[SHOP] Adding to cart:', product);