feat: product variant select on products list view

Author: fazleyrabby

app/Http/Controllers/Frontend/ProductController.php

@@ -21,7 +21,10 @@ public function index(Request $request)
         $selectedCategories = $request->input('categories');
         $sortBy = $request->input('sort_by');
         $categories = Category::toBase()->select('id','title','is_pc_part')->latest()->get();
-        $products = Product::with('category')
+        $products = Product::with([
+                'category',
+                'variants.attributeValues.attribute', 
+            ])
             ->when($selectedCategories, function ($query, $selectedCategories) {
                 return $query->whereIn('category_id', $selectedCategories);
             })
@@ -42,24 +45,6 @@ public function show($slug)
             'variants.attributeValues'
         ])->firstOrFail();
         $product->image =  $this->getImageUrl($product->image);
-        // $variantIds = ProductVariant::where('product_id', $product->id)->pluck('id');
-
-        // $attributeValueIds = DB::table('product_variant_values')
-        //     ->whereIn('product_variant_id', $variantIds)
-        //     ->pluck('attribute_value_id')
-        //     ->unique();
-
-        // $attributeIds = AttributeValue::whereIn('id', $attributeValueIds)
-        //     ->pluck('attribute_id')
-        //     ->unique();
-
-        // $attributes = Attribute::with(['values' => function ($query) use ($attributeValueIds) {
-        //     $query->whereIn('id', $attributeValueIds);
-        // }])
-        // ->whereIn('id', $attributeIds)
-        // ->get();
-
-        // $product->load('variants.attributeValues');
 
         $attributes = Attribute::whereHas('values.variants', function($q) use ($product) {
             $q->where('product_id', $product->id);
@@ -69,7 +54,6 @@ public function show($slug)
             });
         }])->get();
 
-
         // For the variant images
         $product->variants->transform(function ($v) {
             return [

app/Http/Requests/ProductRequest.php

@@ -35,10 +35,10 @@ public function rules(): array
                 'string',
                 'regex:/^[a-z0-9-]+$/',
             ],
-            'sku' => 'required|string|max:200|unique:products,sku,' . $id,
+            'sku' => 'nullable|string|max:200|unique:products,sku,' . $id,
             'category_id' => 'required',
             'type' => 'required',
-            'price' => 'required|numeric',
+            'price' => 'nullable|numeric',
             'image' => 'nullable|string',
         ];
     }

app/Models/AttributeValue.php

@@ -19,7 +19,7 @@ public function attribute()
     // Many variants can have this attribute value
     public function variants()
     {
-        return $this->belongsToMany(ProductVariant::class, 'product_variant_values', 'attribute_value_id', 'variant_id');
+        return $this->belongsToMany(ProductVariant::class, 'product_variant_values', 'attribute_value_id', 'product_variant_id');
     }
 
 }

app/Models/Product.php

@@ -59,4 +59,13 @@ public function getCreatedAtHumanAttribute()
     {
         return $this->created_at->diffForHumans();
     }
+
+    public function getAttributesAttribute()
+    {
+        return $this->variants->flatMap->attributeValues->map->attribute->pluck('title')->unique()->join(' / ') ?: '';
+    }
+
+    public function getFullImageAttribute(){
+        return $this->image ? asset($this->image) : 'https://placehold.co/400';
+    }
 }

app/Models/ProductVariant.php

@@ -5,6 +5,8 @@
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
 
 class ProductVariant extends Model
 {
@@ -23,4 +25,9 @@ public function attributeValues()
     {
         return $this->belongsToMany(AttributeValue::class, 'product_variant_values', 'product_variant_id', 'attribute_value_id');
     }
+
+    public function getFullImageAttribute()
+    {
+        return $this->image ? ((Str::startsWith($this->image, ['http://', 'https://']) ? $this->image : Storage::disk('public')->url($this->image))) : '';
+    }
 }

resources/views/frontend/products/index.blade.php

@@ -263,6 +263,16 @@ function updateVariantInfo() {
         document.querySelectorAll('input[name^="attributes"]').forEach(input => {
             input.addEventListener('change', updateVariantInfo);
         });
+
+        // --- Default to first variant ---
+        if (variants.length > 0) {
+            const firstVariant = variants[0];
+            firstVariant.attribute_value_ids.forEach(id => {
+                const radio = document.querySelector(`input[name^="attributes"][value="${id}"]`);
+                if (radio) radio.checked = true;
+            });
+            updateVariantInfo();
+        }
     });
 </script>
 

resources/views/frontend/products/show.blade.php

@@ -1,5 +1,4 @@
-@push('scripts')
-    <script>
+ <script>
         document.addEventListener('alpine:init', () => {
             Alpine.store('cart', {
                 items: @json(session()->get('cart')['items'] ?? []),
@@ -138,14 +137,34 @@
             Alpine.data('cart', (productId) => ({
                 quantity: 1,
                 variantId: null,
+                selectedVariantId: '', // Local state for this product
+                init() {
+                    // Sync with existing selection if any
+                    const select = document.querySelector(`#variant-select-${productId}`);
+                    if (select) {
+                        this.selectedVariantId = select.value || '';
+                        this.variantId = this.selectedVariantId;
+                        this.updateImage(this.selectedVariantId); // Initialize image
+                    }
+                },
                 setVariantId(id) {
-                    this.variantId = id;
+                    this.selectedVariantId = id;
+                    this.variantId = id; // Sync with addToCart payload
+                },
+                updateImage(variantId) {
+                    const select = document.querySelector(`#variant-select-${productId}`);
+                    if (select) {
+                        const imgElement = document.getElementById(`product-image-${productId}`);
+                        const selectedOption = select.querySelector(`option[value="${variantId}"]`);
+                        const imageUrl = variantId ? (selectedOption ? selectedOption.getAttribute('data-image') : '') : imgElement.dataset.src;
+                        if (imgElement) imgElement.src = imageUrl;
+                    }
                 },
                 addToCart() {
                     axios.post('/cart/add', {
                             product_id: productId,
                             quantity: this.quantity,
-                            variant_id: this.variantId
+                            variant_id: this.variantId || null
                         })
                         .then(response => {
                             Alpine.store('cart').reset(response.data.data);
@@ -161,5 +180,4 @@
             }));
 
         });
-    </script>
-@endpush
+    </script>