diff --git a/resources/views/shop/products/show.blade.php b/resources/views/shop/products/show.blade.php
index c19e0b5..de32e0d 100644
--- a/resources/views/shop/products/show.blade.php
+++ b/resources/views/shop/products/show.blade.php
@@ -2,7 +2,7 @@
 @section('title', $product->name)
 @section('content')
 @php $firstImageUrl = $product->images->count() ? asset('storage/'.$product->images->first()->path) : ''; @endphp
-<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12" x-data="productDetail(@json($product->variants), @json($firstImageUrl))">
+<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-12" x-data="productDetail">
 
     {{-- Bilder --}}
     <div>
@@ -110,13 +110,17 @@
 @endif
 
 <script>
-function productDetail(variants, firstImage) {
-    return {
+document.addEventListener('alpine:init', () => {
+    const variants   = @json($product->variants->load('attributeValues'));
+    const firstImage = @json($firstImageUrl);
+    const basePrice  = {{ $product->base_price }};
+
+    Alpine.data('productDetail', () => ({
         variants,
         selectedAttrs: {},
         selectedVariant: null,
         mainImage: firstImage,
-        currentPrice: {{ $product->base_price }},
+        currentPrice: basePrice,
         selectAttr(name, id) {
             this.selectedAttrs[name] = id;
             this.findVariant();
@@ -128,13 +132,13 @@ function productDetail(variants, firstImage) {
                 return selectedIds.every(id => ids.includes(id)) && ids.length === selectedIds.length;
             });
             if (this.selectedVariant) {
-                this.currentPrice = this.selectedVariant.price_override ?? {{ $product->base_price }};
+                this.currentPrice = this.selectedVariant.price_override ?? basePrice;
             }
         },
         formatPrice(p) {
             return new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(p);
         }
-    }
-}
+    }));
+});
 </script>
 @endsection