generated from boboko/starter
77 lines
3.5 KiB
PHP
77 lines
3.5 KiB
PHP
{{--
|
|
<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>
|