account pages: login, order history, order details, account details, wishlist

2026-09-24 17:27:58 +03:00
parent 580adac33a
commit cf3681260b
42 changed files with 1972 additions and 15 deletions
@@ -0,0 +1,41 @@
+{{--
+    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>