boboko/3dealer
3
0
Fork 0
generated from boboko/starter
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

product options layout and add to cart button in homepage

Browse Source
This commit is contained in:
elvira
2026-09-21 18:53:45 +03:00
parent af0245de43
commit a107184010
10 changed files with 225 additions and 537 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ui/color-swatch.blade.php
+9 -15
View File
@@ -1,12 +1,11 @@
{{-- $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. --}}
@props(['variants', 'option' => null])
{{-- $values: one product option's de-duplicated, ordered values, as built by
ProductController::buildOptionPicker() — [{id, label, hex}]. --}}
@props(['values', 'option' => null, 'optionHandle' => null])
<div {{ $attributes }}>
@if($option)
<p class="font-bold mb-3 text-sm uppercase tracking-wide">
{{ $option }}: <span data-product-form-target="colorName" class="font-normal normal-case"></span>
{{ $option }}: <span data-product-form-target="colorName" data-option="{{ $optionHandle }}" class="font-normal normal-case"></span>
</p>
@endif
@@ -15,22 +14,17 @@ class="flex flex-wrap gap-2"
role="group"
aria-label="{{ $option ?? 'Color' }}"
>
@foreach($variants as $variant)
@php
$value = $variant['options'][0] ?? null;
$label = $value['value'] ?? '';
$bg = $value['meta']['hex'] ?? '#cccccc';
@endphp
@foreach($values as $value)
<button
type="button"
class="color-swatch"
data-product-form-target="swatch"
data-action="click->product-form#selectVariant"
data-variant-id="{{ $variant['id'] }}"
style="background-color: {{ $bg }};"
aria-label="{{ $label }}"
data-option="{{ $optionHandle }}"
data-value-id="{{ $value['id'] }}"
style="background-color: {{ $value['hex'] ?? '#cccccc' }};"
aria-label="{{ $value['label'] }}"
aria-pressed="false"
title="{{ $label }}"
></button>
@endforeach
</div>
resources/views/components/ui/option-buttons.blade.php
+10 -14
View File
@@ -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>