fix: resolve product detail page data access and add placeholder image

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

@@ -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();
         },
 

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>