product options layout and add to cart button in homepage

resources/views/components/ui/option-buttons.blade.php

@@ -1,9 +1,8 @@
-{{-- $variants: array of Modules\Core\Catalog\Services\ProductIndexer's mapVariant()
-     shape (id, options: [{option, value, meta}], ...) — plain arrays, not Eloquent
-     models, since this is fed from Modules\Core\Catalog\Services\ProductService.
-     Use this instead of <x-ui.color-swatch> for options that aren't a color
-     (no meta.hex), where a swatch dot has nothing meaningful to show. --}}
-@props(['variants', 'option' => null])
+{{-- $values: one product option's de-duplicated, ordered values, as built by
+     ProductController::buildOptionPicker() — [{id, label, hex}]. Use this
+     instead of <x-ui.color-swatch> for options that aren't a color (no hex),
+     where a swatch dot has nothing meaningful to show. --}}
+@props(['values', 'option' => null, 'optionHandle' => null])
 
 <div {{ $attributes }}>
     @if($option)
@@ -17,20 +16,17 @@ class="flex flex-wrap gap-2"
         role="group"
         aria-label="{{ $option ?? 'Option' }}"
     >
-        @foreach($variants as $variant)
-            @php
-                $value = $variant['options'][0] ?? null;
-                $label = $value['value'] ?? '';
-            @endphp
+        @foreach($values as $value)
             <x-ui.button
                 variant="secondary"
                 size="sm"
                 data-product-form-target="swatch"
                 data-action="click->product-form#selectVariant"
-                data-variant-id="{{ $variant['id'] }}"
-                aria-label="{{ $label }}"
+                data-option="{{ $optionHandle }}"
+                data-value-id="{{ $value['id'] }}"
+                aria-label="{{ $value['label'] }}"
                 aria-pressed="false"
-            >{{ $label }}</x-ui.button>
+            >{{ $value['label'] }}</x-ui.button>
         @endforeach
     </div>
 </div>