product custom fields

resources/views/components/ui/file-input.blade.php

@@ -0,0 +1,20 @@
+@props([
+    'accept'   => null,
+    'required' => false,
+    'disabled' => false,
+])
+
+<input
+    type="file"
+    @if ($accept) accept="{{ $accept }}" @endif
+    @required($required)
+    @disabled($disabled)
+    {{ $attributes->merge([
+        'class' => 'w-full py-2 text-sm
+                    file:mr-4 file:py-2 file:px-4 file:rounded-none file:border file:border-black file:bg-transparent
+                    file:font-semibold file:cursor-pointer file:transition-colors
+                    hover:file:bg-black hover:file:text-neutral-200
+                    focus:outline-none focus-visible:ring-2 focus-visible:ring-black
+                    disabled:cursor-not-allowed disabled:opacity-50',
+    ]) }}
+/>

resources/views/components/ui/product-card.blade.php

@@ -4,6 +4,7 @@
     'image'     => null,
     'href'      => '#',
     'variantId' => null,
+    'hasCustomFields' => false,
 ])
 
 {{-- data-turbo-frame="_top" on the links: this card renders inside the
@@ -28,7 +29,18 @@ class="w-full h-auto block"
             @endif
         </a>
 
-        @if ($variantId)
+        @if ($hasCustomFields)
+            {{-- Custom fields have to be filled in on the product page. --}}
+            <x-ui.button
+                :href="$href"
+                size="md"
+                position="absolute"
+                data-turbo-frame="_top"
+                class="opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity duration-100"
+            >
+                {{ __('storefront.product.personalize') }}
+            </x-ui.button>
+        @elseif ($variantId)
             {{-- has-[...] forces the button visible while an add-to-cart error
                  is showing, so it isn't only readable on hover — a shopper who
                  already moved off the card (mouse or the click itself) must