product custom fields

2026-09-23 17:53:23 +03:00
parent a4240b6474
commit 580adac33a
24 changed files with 670 additions and 12 deletions
@@ -0,0 +1,76 @@
+{{--
+    <x-product-custom-fields :fields="$product['custom_fields']" />
+
+    The product's custom fields (boboko-core's Product::$custom_fields), rendered
+    inside the add-to-cart <form> so their values travel with it as
+    custom_fields[key]. text → input, textarea → textarea, file → photo upload.
+
+    A photo is uploaded as soon as it's picked (custom-field-upload-controller.js)
+    and only the returned reference is submitted with the form — the file input
+    itself has no name. It still carries `required`, so the browser's own
+    validation blocks add-to-cart until a photo is picked, and the controller
+    marks it invalid (setCustomValidity) while the upload is in flight.
+--}}
+@props(['fields' => []])
+
+@use('App\Http\Controllers\CustomFieldUploadController')
+
+<div class="flex flex-col gap-6">
+    @foreach ($fields as $field)
+        @php
+            $id = 'custom-field-'.$field['key'];
+            $name = 'custom_fields['.$field['key'].']';
+            $required = (bool) ($field['required'] ?? false);
+        @endphp
+
+        @switch($field['type'])
+            @case('textarea')
+                <x-ui.field :label="$field['label']" :for="$id" :required="$required">
+                    <x-ui.textarea :id="$id" :name="$name" :required="$required" :rows="4" maxlength="2000" />
+                </x-ui.field>
+                @break
+
+            @case('file')
+                <x-ui.field
+                    :label="$field['label']"
+                    :for="$id"
+                    :required="$required"
+                    :description="__('storefront.product.custom_field_photo_hint', ['size' => CustomFieldUploadController::MAX_KILOBYTES / 1024])"
+                    data-controller="custom-field-upload"
+                    data-custom-field-upload-url-value="{{ route('custom-field-upload.store') }}"
+                    data-custom-field-upload-label-value="{{ $field['label'] }}"
+                    data-custom-field-upload-uploading-message-value="{{ __('storefront.product.custom_field_uploading') }}"
+                    data-custom-field-upload-failed-message-value="{{ __('storefront.product.custom_field_upload_failed') }}"
+                >
+                    <input type="hidden" name="{{ $name }}" data-custom-field-upload-target="reference">
+
+                    <x-ui.file-input
+                        :id="$id"
+                        :accept="CustomFieldUploadController::accept()"
+                        :required="$required"
+                        aria-describedby="{{ $id }}-description {{ $id }}-error"
+                        data-custom-field-upload-target="file"
+                        data-action="change->custom-field-upload#upload"
+                    />
+
+                    <img
+                        alt=""
+                        width="96"
+                        height="96"
+                        hidden
+                        class="w-24 h-24 object-cover border border-black"
+                        data-custom-field-upload-target="preview"
+                        data-action="error->custom-field-upload#hidePreview"
+                    >
+
+                    <p id="{{ $id }}-error" class="text-sm text-red-600" role="alert" hidden data-custom-field-upload-target="error"></p>
+                </x-ui.field>
+                @break
+
+            @default
+                <x-ui.field :label="$field['label']" :for="$id" :required="$required">
+                    <x-ui.input :id="$id" :name="$name" :required="$required" maxlength="255" />
+                </x-ui.field>
+        @endswitch
+    @endforeach
+</div>