generated from boboko/starter
42 lines
1.6 KiB
PHP
42 lines
1.6 KiB
PHP
{{--
|
|
Heart toggle for one product. A real form, so it works without JS; the
|
|
`wishlist` Stimulus controller turns the submit into a fetch and flips
|
|
aria-pressed, which the CSS (group-aria-pressed) uses to swap the icons.
|
|
|
|
Usage: <x-wishlist-button :product-id="$product['id']" class="absolute top-4 right-4" />
|
|
--}}
|
|
@props(['productId'])
|
|
|
|
@php
|
|
$active = app(\App\Services\Wishlist::class)->has((int) $productId);
|
|
$addLabel = __('storefront.wishlist.add');
|
|
$removeLabel = __('storefront.wishlist.remove');
|
|
@endphp
|
|
|
|
<form
|
|
method="POST"
|
|
action="{{ route('wishlist.toggle', ['productId' => $productId]) }}"
|
|
data-controller="wishlist"
|
|
data-action="submit->wishlist#toggle"
|
|
data-wishlist-add-label-value="{{ $addLabel }}"
|
|
data-wishlist-remove-label-value="{{ $removeLabel }}"
|
|
data-wishlist-added-message-value="{{ __('storefront.wishlist.added') }}"
|
|
data-wishlist-removed-message-value="{{ __('storefront.wishlist.removed') }}"
|
|
{{ $attributes }}
|
|
>
|
|
@csrf
|
|
|
|
<button
|
|
type="submit"
|
|
class="group/heart flex size-12 cursor-pointer items-center justify-center"
|
|
aria-pressed="{{ $active ? 'true' : 'false' }}"
|
|
aria-label="{{ $active ? $removeLabel : $addLabel }}"
|
|
data-wishlist-target="button"
|
|
>
|
|
<x-ui.icon name="heart" :size="30" class="group-aria-pressed/heart:hidden" />
|
|
<x-ui.icon name="heart-fill" :size="28" stroke="#000" class="hidden group-aria-pressed/heart:block text-brand" />
|
|
</button>
|
|
|
|
<span class="sr-only" role="status" aria-live="polite" data-wishlist-target="status"></span>
|
|
</form>
|