generated from boboko/starter
66 lines
2.8 KiB
PHP
66 lines
2.8 KiB
PHP
@props([
|
|
'name' => '',
|
|
'price' => null,
|
|
'image' => null,
|
|
'href' => '#',
|
|
'variantId' => null,
|
|
'hasCustomFields' => false,
|
|
])
|
|
|
|
{{-- 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>
|
|
|
|
@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
|
|
still see why nothing happened. --}}
|
|
<x-checkout::add-to-cart
|
|
:purchasable="$variantId"
|
|
class="absolute opacity-0 group-hover:opacity-100 has-[.bbk-add-to-cart-error:not([hidden])]:opacity-100 transition-opacity duration-100"
|
|
>
|
|
<x-ui.button type="submit" size="md">
|
|
{{ __('storefront.product.add_to_cart') }}
|
|
</x-ui.button>
|
|
</x-checkout::add-to-cart>
|
|
@endif
|
|
</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>
|