generated from boboko/starter
42 lines
1.7 KiB
PHP
42 lines
1.7 KiB
PHP
@props([
|
|
'name' => '',
|
|
'price' => null,
|
|
'image' => null,
|
|
'href' => '#',
|
|
])
|
|
|
|
{{-- data-turbo-frame="_top" on the links: this card renders inside the
|
|
category page's <turbo-frame id="category-listing">, so without it a click
|
|
would try to load the product page *into* that frame, not find a matching
|
|
frame, and fail with "content missing". It's a no-op anywhere there's no
|
|
frame (homepage grids, related products). --}}
|
|
<div class="group">
|
|
<div class="relative flex items-center justify-center mb-4">
|
|
<a href="{{ $href }}" data-turbo-frame="_top" class="block w-full border border-black overflow-hidden bg-white aspect-[251/335] flex items-center justify-center">
|
|
@if($image)
|
|
<img
|
|
src="{{ $image }}"
|
|
alt="{{ $name }}"
|
|
loading="lazy"
|
|
class="w-full h-auto block"
|
|
>
|
|
@else
|
|
<div class="w-full aspect-square bg-neutral-300 flex items-center justify-center text-neutral-500 text-sm">
|
|
{{ __('storefront.product.no_image') }}
|
|
</div>
|
|
@endif
|
|
</a>
|
|
|
|
<x-ui.button size="md" position="absolute" class="opacity-0 group-hover:opacity-100 transition-opacity duration-100">
|
|
{{ __('storefront.product.add_to_cart') }}
|
|
</x-ui.button>
|
|
</div>
|
|
|
|
<div class="flex items-baseline justify-between gap-4">
|
|
<a href="{{ $href }}" data-turbo-frame="_top" class="font-bold text-xl leading-snug hover:text-brand">{{ $name }}</a>
|
|
@if($price !== null)
|
|
<span class="font-bold text-xl shrink-0"><x-ui.price :amount="$price" /></span>
|
|
@endif
|
|
</div>
|
|
</div>
|