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
@@ -6,7 +6,7 @@
 ])

@php
-    $fillIcons = ['facebook', 'instagram', 'tiktok', 'search', 'bag'];
+    $fillIcons = ['facebook', 'instagram', 'tiktok', 'search', 'bag', 'user', 'heart', 'heart-fill'];
    $svgStroke = $stroke ?? (in_array($name, $fillIcons) ? 'none' : $color);
@endphp

@@ -16,6 +16,12 @@

        'bag'    => '<path stroke-width=0.5 d="M20.0049 22H4.00488C3.4526 22 3.00488 21.5523 3.00488 21V3C3.00488 2.44772 3.4526 2 4.00488 2H20.0049C20.5572 2 21.0049 2.44772 21.0049 3V21C21.0049 21.5523 20.5572 22 20.0049 22ZM19.0049 20V4H5.00488V20H19.0049ZM9.00488 6V8C9.00488 9.65685 10.348 11 12.0049 11C13.6617 11 15.0049 9.65685 15.0049 8V6H17.0049V8C17.0049 10.7614 14.7663 13 12.0049 13C9.24346 13 7.00488 10.7614 7.00488 8V6H9.00488Z"/>',

+        'user'   => '<path stroke-width=0.5 d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z"/>',
+
+        'heart'  => '<path stroke-width=0.5 d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853ZM18.827 6.1701C17.3279 4.66794 14.9076 4.60701 13.337 6.01687L12.0019 7.21524L10.6661 6.01781C9.09098 4.60597 6.67506 4.66808 5.17157 6.17157C3.68183 7.66131 3.60704 10.0473 4.97993 11.6232L11.9999 18.6543L19.0201 11.6232C20.3935 10.0467 20.319 7.66525 18.827 6.1701Z"/>',
+
+        'heart-fill' => '<path stroke-width=2 d="M12.001 4.52853C14.35 2.42 17.98 2.49 20.2426 4.75736C22.5053 7.02472 22.583 10.637 20.4786 12.993L11.9999 21.485L3.52138 12.993C1.41705 10.637 1.49571 7.01901 3.75736 4.75736C6.02157 2.49315 9.64519 2.41687 12.001 4.52853Z"/>',
+
        'close'       => '<path fill="none" stroke-width="1.5" stroke-linecap="round" d="M6 6L18 18M18 6L6 18"/>',

        'arrow-left'  => '<path fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M19 12H5M5 12L11 6M5 12L11 18"/>',
@@ -5,6 +5,9 @@
    'href'      => '#',
    'variantId' => null,
    'hasCustomFields' => false,
+    // Heart toggle at the top right of the image; needs productId.
+    'productId' => null,
+    'wishlist'  => false,
 ])

 {{-- data-turbo-frame="_top" on the links: this card renders inside the
@@ -29,6 +32,10 @@ class="w-full h-auto block"
            @endif
        </a>

+        @if ($wishlist && $productId)
+            <x-wishlist-button :product-id="$productId" class="absolute top-4 right-4 z-10" />
+        @endif
+
        @if ($hasCustomFields)
            {{-- Custom fields have to be filled in on the product page. --}}
            <x-ui.button
@@ -1,17 +1,22 @@
@props([
-    'options'   => [],
-    'value'     => null,
-    'name'      => null,
-    'ariaLabel' => null,
+    'options'     => [],
+    'value'       => null,
+    'name'        => null,
+    'ariaLabel'   => null,
+    'placeholder' => null,
+    'block'       => false,
 ])


-<div class="relative inline-flex items-center">
+<div @class(['relative items-center', 'flex w-full' => $block, 'inline-flex' => ! $block])>
    <select
        @if($name) name="{{ $name }}" @endif
        @if($ariaLabel) aria-label="{{ $ariaLabel }}" @endif
-        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border-b border-black  pr-10 py-2.5 cursor-pointer focus:outline-none']) }}
+        {{ $attributes->merge(['class' => 'appearance-none bg-transparent border-b border-black  pr-10 py-2.5 cursor-pointer focus:outline-none'.($block ? ' w-full' : '')]) }}
    >
+        @if($placeholder !== null)
+            <option value="" @selected($value === null || $value === '')>{{ $placeholder }}</option>
+        @endif
        @foreach($options as $option)
            <option value="{{ $option['value'] }}" @selected($value === $option['value'])>{{ $option['label'] }}</option>
        @endforeach
@@ -0,0 +1,11 @@
+{{--
+    Flash confirmation box ("Changes saved." etc.). Renders nothing when there's
+    no message; defaults to session('status'). Spacing comes from the caller.
+--}}
+@props([
+    'message' => session('status'),
+])
+
+@if (filled($message))
+    <p role="status" aria-live="polite" {{ $attributes->merge(['class' => 'border border-black bg-brand p-6 text-black']) }}>{{ $message }}</p>
+@endif