From e94b3f9dcab298d0291a8acf601cb19c93b0bb86 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sun, 23 Nov 2025 06:26:51 +0100
Subject: [PATCH] fix: resolve product detail page data access and add
 placeholder image
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issues fixed:
- Product ID was undefined - Alpine.js couldn't access data-product-id from nested div
- Missing placeholder image caused 404 errors

Changes:
- Pass product_id and vendor.id through window globals instead of dataset
- Initialize productId and vendorId directly from window variables
- Add placeholder.jpg SVG for products without images
- Add debug logging to track initialization

The product detail page now correctly loads products and handles missing images.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/templates/shop/product.html | 17 +++++++++--------
 static/shop/img/placeholder.jpg |  6 ++++++
 2 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 static/shop/img/placeholder.jpg

diff --git a/app/templates/shop/product.html b/app/templates/shop/product.html
index 33e46c71..d00c5928 100644
--- a/app/templates/shop/product.html
+++ b/app/templates/shop/product.html
@@ -7,10 +7,7 @@
 {% block alpine_data %}productDetail(){% endblock %}
 
 {% block content %}
-<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"
-     data-vendor-id="{{ vendor.id }}"
-     data-product-id="{{ product_id }}"
->
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     {# Breadcrumbs #}
     <div class="breadcrumb mb-6">
         <a href="{{ base_url }}" class="hover:text-primary">Home</a>
@@ -212,6 +209,10 @@
 
 {% block extra_scripts %}
 <script>
+// Pass product ID from template to JavaScript
+window.PRODUCT_ID = {{ product_id }};
+window.VENDOR_ID = {{ vendor.id }};
+
 document.addEventListener('alpine:init', () => {
     Alpine.data('productDetail', () => ({
         ...shopLayoutData(),
@@ -223,8 +224,8 @@ document.addEventListener('alpine:init', () => {
         addingToCart: false,
         quantity: 1,
         selectedImage: null,
-        vendorId: null,
-        productId: null,
+        vendorId: window.VENDOR_ID,
+        productId: window.PRODUCT_ID,
 
         // Computed properties
         get canAddToCart() {
@@ -250,8 +251,8 @@ document.addEventListener('alpine:init', () => {
         // Initialize
         async init() {
             console.log('[SHOP] Product detail page initializing...');
-            this.vendorId = this.$el.dataset.vendorId;
-            this.productId = this.$el.dataset.productId;
+            console.log('[SHOP] Product ID:', this.productId);
+            console.log('[SHOP] Vendor ID:', this.vendorId);
             await this.loadProduct();
         },
 
diff --git a/static/shop/img/placeholder.jpg b/static/shop/img/placeholder.jpg
new file mode 100644
index 00000000..b4ba3c21
--- /dev/null
+++ b/static/shop/img/placeholder.jpg
@@ -0,0 +1,6 @@
+<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
+  <rect width="400" height="400" fill="#f3f4f6"/>
+  <text x="50%" y="50%" font-family="Arial, sans-serif" font-size="20" fill="#9ca3af" text-anchor="middle" dominant-baseline="middle">
+    No Image Available
+  </text>
+</svg>