From 90b4c901dc3e3ec7d41ed9f306cd40d42d4986f4 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 20 Aug 2024 11:36:44 +0200
Subject: [PATCH 01/25] Styling autocomplete

---
 config/rapidez/frontend.php                   |  9 ++--
 resources/css/app.css                         |  1 +
 resources/css/components/autocomplete.css     | 17 +++++++
 resources/css/theme-variables.css             |  1 +
 .../js/components/Search/Autocomplete.vue     |  4 ++
 .../views/layouts/partials/header.blade.php   |  6 +--
 .../partials/header/autocomplete.blade.php    | 44 +++++++++++++------
 .../header/autocomplete/all-results.blade.php | 10 +++++
 .../header/autocomplete/background.blade.php  |  3 ++
 .../header/autocomplete/categories.blade.php  | 13 +++---
 .../header/autocomplete/products.blade.php    | 20 ++++++---
 .../partials/header/minicart.blade.php        |  2 +-
 tailwind.config.js                            |  5 ++-
 13 files changed, 100 insertions(+), 35 deletions(-)
 create mode 100644 resources/css/components/autocomplete.css
 create mode 100644 resources/views/layouts/partials/header/autocomplete/all-results.blade.php
 create mode 100644 resources/views/layouts/partials/header/autocomplete/background.blade.php

diff --git a/config/rapidez/frontend.php b/config/rapidez/frontend.php
index cd0584f6f..b99bd5a9e 100644
--- a/config/rapidez/frontend.php
+++ b/config/rapidez/frontend.php
@@ -33,11 +33,14 @@
         // Attach additional indexes to the autocomplete
         // Uses the views in rapidez::layouts.partials.header.autocomplete
         'additionals' => [
-            'categories' => ['name^3', 'description'],
+            'categories' => [
+                'fields' => ['name^3', 'description'],
+                'size' => 3,
+            ],
         ],
 
-        'debounce' => 100,
-        'size'     => 10,
+        'debounce' => 500,
+        'size'     => 3,
     ],
 
     // Link store codes to theme folders
diff --git a/resources/css/app.css b/resources/css/app.css
index 35ff9c3f7..6e3dba7d8 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,5 +1,6 @@
 @import 'components/vue-slider';
 @import './theme-variables.css';
+@import './components/autocomplete';
 
 @tailwind base;
 @tailwind components;
diff --git a/resources/css/components/autocomplete.css b/resources/css/components/autocomplete.css
new file mode 100644
index 000000000..4ef7ca63c
--- /dev/null
+++ b/resources/css/components/autocomplete.css
@@ -0,0 +1,17 @@
+.search-input + div div[groupposition='right'] {
+    @apply size-6 right-16 cursor-pointer z-50 !-translate-y-1/2 !top-1/2 !absolute;
+
+    .cancel-icon {
+        @apply hidden;
+    }
+}
+
+.search-input + div div[groupposition='right'] div[isclearicon='true']::before {
+    @apply size-6;
+    content: '';
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.20986 4.38708L4.29286 4.29308C4.46505 4.1209 4.69415 4.01747 4.93718 4.00219C5.18021 3.98691 5.42046 4.06083 5.61286 4.21008L5.70686 4.29308L11.9999 10.5851L18.2929 4.29308C18.3851 4.19757 18.4955 4.12139 18.6175 4.06898C18.7395 4.01657 18.8707 3.98898 19.0035 3.98783C19.1362 3.98668 19.2679 4.01198 19.3908 4.06226C19.5137 4.11254 19.6254 4.18679 19.7193 4.28069C19.8131 4.37458 19.8874 4.48623 19.9377 4.60913C19.988 4.73202 20.0133 4.8637 20.0121 4.99648C20.011 5.12926 19.9834 5.26048 19.931 5.38249C19.8786 5.50449 19.8024 5.61483 19.7069 5.70708L13.4149 12.0001L19.7069 18.2931C19.879 18.4653 19.9825 18.6944 19.9978 18.9374C20.013 19.1804 19.9391 19.4207 19.7899 19.6131L19.7069 19.7071C19.5347 19.8793 19.3056 19.9827 19.0625 19.998C18.8195 20.0133 18.5793 19.9393 18.3869 19.7901L18.2929 19.7071L11.9999 13.4151L5.70686 19.7071C5.51826 19.8892 5.26566 19.99 5.00346 19.9878C4.74126 19.9855 4.49045 19.8803 4.30504 19.6949C4.11963 19.5095 4.01447 19.2587 4.01219 18.9965C4.00991 18.7343 4.1107 18.4817 4.29286 18.2931L10.5849 12.0001L4.29286 5.70708C4.12068 5.53489 4.01725 5.30579 4.00197 5.06276C3.98669 4.81974 4.06061 4.57949 4.20986 4.38708Z' fill='%232E4A56'/%3E%3C/svg%3E");
+}
+
+mark {
+    @apply bg-transparent text-inherit font-bold;
+}
\ No newline at end of file
diff --git a/resources/css/theme-variables.css b/resources/css/theme-variables.css
index 1a80dceac..15e65841d 100644
--- a/resources/css/theme-variables.css
+++ b/resources/css/theme-variables.css
@@ -5,6 +5,7 @@
     --secondary-text: 255 255 255;
     --neutral: 51 65 85;
     --inactive: 100 116 139;
+    --inactive-100: 244 247 248;
     --highlight: 241 245 249;
     --border: 231 235 239;
 }
diff --git a/resources/js/components/Search/Autocomplete.vue b/resources/js/components/Search/Autocomplete.vue
index 988fad943..7df4e3bb6 100644
--- a/resources/js/components/Search/Autocomplete.vue
+++ b/resources/js/components/Search/Autocomplete.vue
@@ -31,6 +31,7 @@ export default {
             results: {},
             resultsCount: 0,
             searchAdditionals: () => null,
+            overlay: false,
         }
     },
 
@@ -103,6 +104,9 @@ export default {
             let highlight = hit.highlight ?? source.highlight
             return highlight?.[field]?.[0] ?? source?.[field] ?? ''
         },
+        showOverlay(isOpen) {
+            this.overlay = isOpen
+        },
     },
 }
 </script>
diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
index 9e4caecd5..119716079 100644
--- a/resources/views/layouts/partials/header.blade.php
+++ b/resources/views/layouts/partials/header.blade.php
@@ -1,4 +1,4 @@
-<header class="relative mb-5 border-b shadow">
+<header class="relative py-2 shadow mb-5 border-b">
     <div class="container flex flex-wrap items-center max-sm:px-3">
         <input id="navigation" class="peer hidden" type="checkbox" />
         <div class="py-2">
@@ -16,14 +16,14 @@
                 </label>
             </div>
         </div>
-        <div class="flex h-12 max-w-lg flex-1 items-center">
+        <div class="flex items-center h-12 max-md:order-last max-md:w-full md:max-w-md md:flex-1">
             @include('rapidez::layouts.partials.header.autocomplete')
         </div>
         <div class="ml-auto flex items-center justify-end pl-3">
             @include('rapidez::layouts.partials.header.account')
             @include('rapidez::layouts.partials.header.minicart')
         </div>
-        <nav class="inset-x-0 top-full w-full bg-white max-md:absolute max-md:z-20 max-md:grid max-md:grid-rows-[0fr] max-md:border-b max-md:shadow max-md:transition-all max-md:peer-checked:grid-rows-[1fr]">
+        <nav class="w-full bg-white max-md:inset-x-0 max-md:top-12 max-md:absolute max-md:z-40 max-md:grid max-md:grid-rows-[0fr] max-md:peer-checked:border-b max-md:shadow max-md:transition-all max-md:peer-checked:grid-rows-[1fr]">
             <div class="max-h-full overflow-hidden">
                 {{-- Because the lack of an @includeIf or @includeWhen equivalent for Blade components we're using a placeholder --}}
                 <x-dynamic-component :component="App::providerIsLoaded('Rapidez\Menu\MenuServiceProvider') ? 'menu' : 'placeholder'" />
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 2a4df0c76..0c48fccb6 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -1,13 +1,17 @@
-@php $inputClasses = 'border !border-gray-200 !text-sm !min-h-0 outline-none !h-auto rounded !p-2 !bg-white w-full focus:!border-inactive' @endphp
+@php $inputClasses = 'relative z-20 border !font-sans !border-border !text-sm !min-h-0 outline-0 ring-0 !h-auto rounded-xl !pl-4 !pr-24 !py-3.5 !bg-white w-full focus:ring-transparent search-input' @endphp
 
-<label for="autocomplete-input" class="sr-only">@lang('Search')</label>
-<input
-    id="autocomplete-input"
-    placeholder="@lang('Search')"
-    class="{{ $inputClasses }}"
-    v-on:focus="$root.loadAutocomplete = true"
-    v-if="!$root.loadAutocomplete"
->
+<div v-if="!$root.loadAutocomplete" class="relative w-full">
+    <label for="autocomplete-input" class="sr-only">@lang('Search')</label>
+    <input
+        id="autocomplete-input"
+        placeholder="@lang('Search')"
+        class="{{ $inputClasses }}"
+        v-on:focus="$root.loadAutocomplete = true"
+    >
+    <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.header-dropdowns') }}">
+        <x-heroicon-o-magnifying-glass class="size-5 text-neutral" />
+    </div>
+</div>
 
 <autocomplete
     v-if="$root.loadAutocomplete"
@@ -15,10 +19,17 @@ class="{{ $inputClasses }}"
     v-bind:additionals="{{ json_encode(config('rapidez.frontend.autocomplete.additionals')) }}"
     v-bind:debounce="{{ config('rapidez.frontend.autocomplete.debounce') }}"
     v-bind:size="{{ config('rapidez.frontend.autocomplete.size') }}"
-    class="w-full"
+    class="relative w-full"
     v-cloak
 >
-    <x-rapidez::reactive-base slot-scope="{ results, resultsCount, searchAdditionals, debounce, size, highlight }">
+    <x-rapidez::reactive-base slot-scope="{ results, resultsCount, searchAdditionals, overlay, showOverlay, debounce, size, highlight }">
+        <div
+            class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
+            :class="{ 'pointer-events-auto opacity-100': overlay, 'opacity-0 pointer-events-none': !overlay }"
+        ></div>
+        <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.lightbox') }}">
+            <x-heroicon-o-magnifying-glass class="size-5 text-neutral" />
+        </div>
         <data-search
             placeholder="@lang('Search')"
             v-on:value-selected="search"
@@ -26,24 +37,29 @@ class="w-full"
             :inner-class="{ input: '{{ $inputClasses }}' }"
             {{-- These classes are only used when you come from a page with a product listing, --}}
             {{-- click on a link that leads to a 404 page and try to use the search there --}}
-            class="relative [&_*]:!m-0 [&_[isclearicon=]]:!mr-2 [&_.cancel-icon]:!fill-[#595959] [&_[groupposition=right]]:!absolute [&_[groupposition=right]]:!top-2/4 [&_[groupposition=right]]:!right-0 [&_[groupposition=right]]:!-translate-y-2/4"
+            class="relative [&_*]:!m-0"
             :data-field="Object.keys(config.searchable)"
             :field-weights="Object.values(config.searchable)"
             :show-icon="false"
+            icon-position="right"
             fuzziness="AUTO"
             :debounce="debounce"
+            @blur="showOverlay(false)"
+            @focus="showOverlay(true)"
             :size="size"
             :highlight="true"
             v-on:value-change="searchAdditionals($event)"
         >
             <div
                 slot="render"
-                slot-scope="{ downshiftProps: { isOpen }, data: suggestions }"
+                slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value }"
             >
                 <div
-                    class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
+                    class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-5 top-14 max-h-svh overflow-x-hidden overflow-y-auto md:top-14 md:max-h-[600px] md:rounded-xl md:border bg-white shadow-xl max-md:pt-0 p-5 md:pt-0 md:inset-x-0 md:w-full md:-translate-y-px"
                     v-if="isOpen && (suggestions.length || resultsCount)"
                 >
+                    @include('rapidez::layouts.partials.header.autocomplete.all-results')
+
                     <template v-for="(resultsData, resultsType) in results ?? {}" v-if="resultsData?.hits?.length">
                         @foreach (config('rapidez.frontend.autocomplete.additionals') as $key => $fields)
                             @includeIf('rapidez::layouts.partials.header.autocomplete.' . $key)
diff --git a/resources/views/layouts/partials/header/autocomplete/all-results.blade.php b/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
new file mode 100644
index 000000000..17d86b9d9
--- /dev/null
+++ b/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
@@ -0,0 +1,10 @@
+<div class="border-b font-sans py-4">
+    <a
+        :href="'/search?q=' + value"
+        class="relative group flex items-center gap-x-4 w-full text-neutral py-2 text-sm"
+    >
+        @include('rapidez::layouts.partials.header.autocomplete.background')
+        <x-heroicon-o-magnifying-glass class="size-5 text-inactive" />
+        <span>@lang('View all results for:') <span v-text="value"></span></span>
+    </a>
+</div>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/header/autocomplete/background.blade.php b/resources/views/layouts/partials/header/autocomplete/background.blade.php
new file mode 100644
index 000000000..afe911cd6
--- /dev/null
+++ b/resources/views/layouts/partials/header/autocomplete/background.blade.php
@@ -0,0 +1,3 @@
+{{-- This is used for the hover state when you hover over category or producs --}}
+
+<div class="-z-10 bg-inactive-100 opacity-0 group-hover:opacity-100 transition absolute inset-y-0 -inset-x-6 pointer-events-none"></div>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/header/autocomplete/categories.blade.php b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
index a52d79212..c57ccf210 100644
--- a/resources/views/layouts/partials/header/autocomplete/categories.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
@@ -1,10 +1,9 @@
-<div class="flex gap-5 pb-5 my-2" v-if="resultsType == 'categories'">
-    <div class="font-bold">
-        @lang('Categories')
-    </div>
-    <ul class="flex flex-col gap-1">
-        <li v-for="hit in resultsData.hits" class="w-full">
-            <a :href="hit._source.url" class="w-full hover:text-primary flex gap-1">
+<div class="border-b py-4" v-if="resultsType == 'categories'">
+    <ul class="flex flex-col font-sans">
+        <li v-for="hit in resultsData.hits" class="flex flex-1 items-center w-full">
+            <a :href="hit._source.url" class="relative flex items-center group w-full py-2 text-sm gap-x-4">
+                @include('rapidez::layouts.partials.header.autocomplete.background')
+                <x-heroicon-o-arrow-turn-down-right class="size-5 text-inactive" />
                 <span class="ml-2" v-html="highlight(hit, 'name')"></span>
             </a>
         </li>
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index d5fc0d1c5..bbee7b7ea 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -1,10 +1,18 @@
-<ul class="gap-5 grid md:grid-cols-2">
+<ul class="gap-5 flex flex-col py-4">
     <li v-for="suggestion in suggestions" :key="suggestion.source._id">
-        <a :href="suggestion.source.url | url" class="flex flex-wrap flex-1">
-            <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="self-center object-contain w-14 aspect-square" />
-            <div class="flex flex-1 flex-wrap px-2">
-                <strong class="hyphens block w-full" v-html="highlight(suggestion, 'name')"></strong>
-                <div class="self-end">@{{ suggestion.source.price | price }}</div>
+        <a :href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
+            @include('rapidez::layouts.partials.header.autocomplete.background')
+            <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain w-14 h-20 mix-blend-multiply" />
+            <div class="flex flex-1 justify-center flex-col px-2">
+                <strong class="text-sm font-sans hyphens block w-full" v-html="highlight(suggestion, 'name')"></strong>
+                <div class="flex items-center gap-x-0.5">
+                    <div v-if="suggestion.source.special_price" class="text-inactive font-sans line-through text-xs">
+                        @{{ suggestion.source.price | price }}
+                    </div>
+                    <div class="text-base font-base text-primary font-sans font-bold">
+                        @{{ suggestion.source.price | price }}
+                    </div>
+                </div>
             </div>
         </a>
     </li>
diff --git a/resources/views/layouts/partials/header/minicart.blade.php b/resources/views/layouts/partials/header/minicart.blade.php
index 1c39cdfbf..510f23873 100644
--- a/resources/views/layouts/partials/header/minicart.blade.php
+++ b/resources/views/layouts/partials/header/minicart.blade.php
@@ -4,7 +4,7 @@
             <x-heroicon-o-shopping-cart class="h-6 w-6"/>
             <span class="bg-neutral rounded-full w-6 h-6 text-white text-center" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
         </button>
-        <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 {{ config('rapidez.frontend.z-indexes.header-dropdowns') }}">
+        <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 {{ config('rapidez.frontend.z-indexes.slideover') }}">
             <table class="w-full mb-3">
                 <tr v-for="item in cart.items" class="[&>*]:pb-3">
                     <td class="block w-48 truncate overflow-hidden">@{{ item.product.name }}</td>
diff --git a/tailwind.config.js b/tailwind.config.js
index ef0c6ba56..116010513 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,7 +26,10 @@ module.exports = {
                     text: 'rgb(var(--secondary-text) / <alpha-value>)', // Text color that goes onto secondary color
                 },
                 neutral: 'rgb(var(--neutral) / <alpha-value>)', // Default text color
-                inactive: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text color
+                inactive: {
+                    DEFAULT: 'rgb(var(--inactive) / <alpha-value>)', // Inactive text color
+                    100: 'rgb(var(--inactive-100) / <alpha-value>)', // Inactive light background color
+                },
                 highlight: 'rgb(var(--highlight) / <alpha-value>)', // Background highlight color
                 border: 'rgb(var(--border) / <alpha-value>)', // Border color
             },

From cafc6461aabf0d27ba134b642fc38f112f330fe7 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 20 Aug 2024 11:41:29 +0200
Subject: [PATCH 02/25] Make resize larger | Fix comment

---
 .../layouts/partials/header/autocomplete/background.blade.php   | 2 +-
 .../layouts/partials/header/autocomplete/products.blade.php     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete/background.blade.php b/resources/views/layouts/partials/header/autocomplete/background.blade.php
index afe911cd6..f03d05f9a 100644
--- a/resources/views/layouts/partials/header/autocomplete/background.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/background.blade.php
@@ -1,3 +1,3 @@
-{{-- This is used for the hover state when you hover over category or producs --}}
+{{-- This is used for the hover state, it is used on all items in the autocomplete. --}}
 
 <div class="-z-10 bg-inactive-100 opacity-0 group-hover:opacity-100 transition absolute inset-y-0 -inset-x-6 pointer-events-none"></div>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index bbee7b7ea..8e12e703a 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -2,7 +2,7 @@
     <li v-for="suggestion in suggestions" :key="suggestion.source._id">
         <a :href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
             @include('rapidez::layouts.partials.header.autocomplete.background')
-            <img :src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain w-14 h-20 mix-blend-multiply" />
+            <img :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain w-14 h-20 mix-blend-multiply" />
             <div class="flex flex-1 justify-center flex-col px-2">
                 <strong class="text-sm font-sans hyphens block w-full" v-html="highlight(suggestion, 'name')"></strong>
                 <div class="flex items-center gap-x-0.5">

From 995f7971074a3044628737bc1186129556056ef2 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 20 Aug 2024 12:01:12 +0200
Subject: [PATCH 03/25] Update comment

---
 .../layouts/partials/header/autocomplete/background.blade.php   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/layouts/partials/header/autocomplete/background.blade.php b/resources/views/layouts/partials/header/autocomplete/background.blade.php
index f03d05f9a..4c3e0ec72 100644
--- a/resources/views/layouts/partials/header/autocomplete/background.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/background.blade.php
@@ -1,3 +1,3 @@
-{{-- This is used for the hover state, it is used on all items in the autocomplete. --}}
+{{-- This is used for the hover state, it is used for all the items in autocomplete. --}}
 
 <div class="-z-10 bg-inactive-100 opacity-0 group-hover:opacity-100 transition absolute inset-y-0 -inset-x-6 pointer-events-none"></div>
\ No newline at end of file

From d91bd5c4a0e864d896ff3c5a4bad5296bee63172 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Mon, 26 Aug 2024 15:49:22 +0200
Subject: [PATCH 04/25] Added v-else and added :key

---
 resources/views/layouts/partials/header/autocomplete.blade.php  | 2 +-
 .../layouts/partials/header/autocomplete/categories.blade.php   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 0c48fccb6..09b37e163 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -14,7 +14,7 @@ class="{{ $inputClasses }}"
 </div>
 
 <autocomplete
-    v-if="$root.loadAutocomplete"
+    v-else
     v-on:mounted="() => window.document.getElementById('autocomplete-input').focus()"
     v-bind:additionals="{{ json_encode(config('rapidez.frontend.autocomplete.additionals')) }}"
     v-bind:debounce="{{ config('rapidez.frontend.autocomplete.debounce') }}"
diff --git a/resources/views/layouts/partials/header/autocomplete/categories.blade.php b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
index c57ccf210..090fd3bab 100644
--- a/resources/views/layouts/partials/header/autocomplete/categories.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
@@ -1,6 +1,6 @@
 <div class="border-b py-4" v-if="resultsType == 'categories'">
     <ul class="flex flex-col font-sans">
-        <li v-for="hit in resultsData.hits" class="flex flex-1 items-center w-full">
+        <li v-for="hit in resultsData.hits" :key="hit._source.id" class="flex flex-1 items-center w-full">
             <a :href="hit._source.url" class="relative flex items-center group w-full py-2 text-sm gap-x-4">
                 @include('rapidez::layouts.partials.header.autocomplete.background')
                 <x-heroicon-o-arrow-turn-down-right class="size-5 text-inactive" />

From f875e94089731588d56773659b944fc7f0fc7a97 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Fri, 6 Sep 2024 15:03:22 +0200
Subject: [PATCH 05/25] Removed .css for imports

---
 resources/css/app.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 961a2dd0a..4338a80bf 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,8 +1,8 @@
 @import 'components/vue-slider';
 @import 'components/price-slider';
-@import './theme-variables.css';
+@import './theme-variables';
 @import './components/autocomplete';
-@import './components/pagination.css';
+@import './components/pagination';
 
 @tailwind base;
 @tailwind components;

From 4c230d64de826b53899244e6a2e6735d0e4d3b7a Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 1 Oct 2024 15:14:39 +0200
Subject: [PATCH 06/25] Feedback autocomplete

---
 config/rapidez/frontend.php                   | 10 ++++++----
 resources/views/components/input.blade.php    | 20 +------------------
 resources/views/components/label.blade.php    |  4 ++--
 .../partials/footer/navigation.blade.php      |  1 +
 .../partials/header/autocomplete.blade.php    |  7 ++-----
 .../header/autocomplete/products.blade.php    |  2 +-
 6 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/config/rapidez/frontend.php b/config/rapidez/frontend.php
index b99bd5a9e..864a56513 100644
--- a/config/rapidez/frontend.php
+++ b/config/rapidez/frontend.php
@@ -83,10 +83,12 @@
 
     // Z-Index per element
     'z-indexes' => [
-        'header-dropdowns' => 'z-20',
-        'lightbox'         => 'z-30',
-        'notification'     => 'z-20',
-        'slideover'        => 'z-50',
+        'header-dropdowns'      => 'z-20',
+        'search-autocomplete'   => 'z-20',
+        'button-autocomplete'   => 'z-30',
+        'lightbox'              => 'z-30',
+        'notification'          => 'z-20',
+        'slideover'             => 'z-50',
     ],
 
     // Add to cart settings to automaticly select configurable- or product options (true/false)
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index 4894ea1d8..3d2a597f8 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -1,19 +1 @@
-@props(['name', 'label', 'wrapperClass', 'labelClass'])
-
-<div class="{{ $wrapperClass ?? '' }}">
-    @if (!isset($label) || (isset($label) && $label))
-        <x-rapidez::label for="{{ $name }}" class="{{ $labelClass ?? '' }}">
-            @lang($label ?? ucfirst($name))
-        </x-rapidez::label>
-    @endif
-    <input
-        {{ $attributes->merge([
-            'id' => $name,
-            'name' => $name,
-            'type' => 'text',
-            'placeholder' => __($placeholder ?? ''),
-            'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
-            'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
-        ]) }}
-    >
-</div>
+<input {{ $attributes->twMerge('w-full py-3 px-5 border rounded-md border-border outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-neutral disabled:cursor-not-allowed disabled:bg-disabled disabled:border-disabled placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
\ No newline at end of file
diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php
index b8c530d34..f139f6b44 100644
--- a/resources/views/components/label.blade.php
+++ b/resources/views/components/label.blade.php
@@ -1,3 +1,3 @@
-<label {{ $attributes->merge(['class' => 'font-semibold text-inactive text-sm block mb-2']) }}>
+<span {{ $attributes->twMerge("font-medium text-inactive text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']") }}>
     {{ $slot }}
-</label>
+</span>
diff --git a/resources/views/layouts/partials/footer/navigation.blade.php b/resources/views/layouts/partials/footer/navigation.blade.php
index d8ff7793b..f0e510202 100644
--- a/resources/views/layouts/partials/footer/navigation.blade.php
+++ b/resources/views/layouts/partials/footer/navigation.blade.php
@@ -7,6 +7,7 @@
         <li><a href="/gear.html">Gear</a></li>
         <li><a href="/training.html">Training</a></li>
         <li><a href="/sale.html">Sale</a></li>
+        <li><a href="/kemrkemrkemrkmekmr.html">404</a></li>
     </ul>
     <ul>
         <li><strong>Support</strong></li>
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 09b37e163..8378c1977 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -27,7 +27,7 @@ class="relative w-full"
             class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
             :class="{ 'pointer-events-auto opacity-100': overlay, 'opacity-0 pointer-events-none': !overlay }"
         ></div>
-        <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.lightbox') }}">
+        <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.button-autocomplete') }}">
             <x-heroicon-o-magnifying-glass class="size-5 text-neutral" />
         </div>
         <data-search
@@ -35,13 +35,10 @@ class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-black/40 opacity
             v-on:value-selected="search"
             component-id="autocomplete"
             :inner-class="{ input: '{{ $inputClasses }}' }"
-            {{-- These classes are only used when you come from a page with a product listing, --}}
-            {{-- click on a link that leads to a 404 page and try to use the search there --}}
             class="relative [&_*]:!m-0"
             :data-field="Object.keys(config.searchable)"
             :field-weights="Object.values(config.searchable)"
             :show-icon="false"
-            icon-position="right"
             fuzziness="AUTO"
             :debounce="debounce"
             @blur="showOverlay(false)"
@@ -55,7 +52,7 @@ class="relative [&_*]:!m-0"
                 slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value }"
             >
                 <div
-                    class="{{ config('rapidez.frontend.z-indexes.header-dropdowns') }} absolute -inset-x-5 top-14 max-h-svh overflow-x-hidden overflow-y-auto md:top-14 md:max-h-[600px] md:rounded-xl md:border bg-white shadow-xl max-md:pt-0 p-5 md:pt-0 md:inset-x-0 md:w-full md:-translate-y-px"
+                    class="{{ config('rapidez.frontend.z-indexes.search-autocomplete') }} absolute -inset-x-5 top-14 max-h-svh overflow-x-hidden overflow-y-auto md:top-14 md:max-h-[600px] md:rounded-xl md:border bg-white shadow-xl max-md:pt-0 p-5 md:pt-0 md:inset-x-0 md:w-full md:-translate-y-px"
                     v-if="isOpen && (suggestions.length || resultsCount)"
                 >
                     @include('rapidez::layouts.partials.header.autocomplete.all-results')
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index 8e12e703a..82905a947 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -10,7 +10,7 @@
                         @{{ suggestion.source.price | price }}
                     </div>
                     <div class="text-base font-base text-primary font-sans font-bold">
-                        @{{ suggestion.source.price | price }}
+                        @{{ (suggestion.source.special_price || suggestion.source.price) | price }}
                     </div>
                 </div>
             </div>

From 0b7aa900b05eb888b341f1ec6bec01cf2609c8ba Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 1 Oct 2024 15:18:24 +0200
Subject: [PATCH 07/25] Revert wrong changes

---
 resources/views/components/input.blade.php    | 20 ++++++++++++++++++-
 resources/views/components/label.blade.php    |  4 ++--
 .../partials/footer/navigation.blade.php      |  1 -
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index 3d2a597f8..56a5c189b 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -1 +1,19 @@
-<input {{ $attributes->twMerge('w-full py-3 px-5 border rounded-md border-border outline-0 ring-0 text-sm transition-colors focus:ring-transparent focus:border-neutral disabled:cursor-not-allowed disabled:bg-disabled disabled:border-disabled placeholder:text-inactive [&::-webkit-inner-spin-button]:appearance-none [&:user-invalid:not(:placeholder-shown)]:border-red-500') }} />
\ No newline at end of file
+@props(['name', 'label', 'wrapperClass', 'labelClass'])
+
+<div class="{{ $wrapperClass ?? '' }}">
+    @if (!isset($label) || (isset($label) && $label))
+        <x-rapidez::label for="{{ $name }}" class="{{ $labelClass ?? '' }}">
+            @lang($label ?? ucfirst($name))
+        </x-rapidez::label>
+    @endif
+    <input
+        {{ $attributes->merge([
+            'id' => $name,
+            'name' => $name,
+            'type' => 'text',
+            'placeholder' => __($placeholder ?? ''),
+            'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
+            'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
+        ]) }}
+    >
+</div>
\ No newline at end of file
diff --git a/resources/views/components/label.blade.php b/resources/views/components/label.blade.php
index f139f6b44..b8c530d34 100644
--- a/resources/views/components/label.blade.php
+++ b/resources/views/components/label.blade.php
@@ -1,3 +1,3 @@
-<span {{ $attributes->twMerge("font-medium text-inactive text-sm block mb-2 has-[~_*_:required,~:required]:after:content-['*']") }}>
+<label {{ $attributes->merge(['class' => 'font-semibold text-inactive text-sm block mb-2']) }}>
     {{ $slot }}
-</span>
+</label>
diff --git a/resources/views/layouts/partials/footer/navigation.blade.php b/resources/views/layouts/partials/footer/navigation.blade.php
index f0e510202..d8ff7793b 100644
--- a/resources/views/layouts/partials/footer/navigation.blade.php
+++ b/resources/views/layouts/partials/footer/navigation.blade.php
@@ -7,7 +7,6 @@
         <li><a href="/gear.html">Gear</a></li>
         <li><a href="/training.html">Training</a></li>
         <li><a href="/sale.html">Sale</a></li>
-        <li><a href="/kemrkemrkemrkmekmr.html">404</a></li>
     </ul>
     <ul>
         <li><strong>Support</strong></li>

From 34a28cbc8e6dda7b32f6a03e63bc41ac52313baa Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 1 Oct 2024 15:21:36 +0200
Subject: [PATCH 08/25] Replaced z-index for correct name

---
 resources/views/components/input.blade.php                     | 2 +-
 resources/views/layouts/partials/header/autocomplete.blade.php | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
index 56a5c189b..4894ea1d8 100644
--- a/resources/views/components/input.blade.php
+++ b/resources/views/components/input.blade.php
@@ -16,4 +16,4 @@
             'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
         ]) }}
     >
-</div>
\ No newline at end of file
+</div>
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 8378c1977..36eb18a40 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -8,7 +8,7 @@
         class="{{ $inputClasses }}"
         v-on:focus="$root.loadAutocomplete = true"
     >
-    <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.header-dropdowns') }}">
+    <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.search-autocomplete') }}">
         <x-heroicon-o-magnifying-glass class="size-5 text-neutral" />
     </div>
 </div>

From ed2dffb7de2cf1759a0a385b26c8f8a1e9a45c2a Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Wed, 9 Oct 2024 10:33:36 +0200
Subject: [PATCH 09/25] Update search autocomplete visual and functional

---
 .../js/components/Search/Autocomplete.vue     |  7 +++
 .../autocomplete/magnifying-glass.blade.php   |  4 ++
 .../components/autocomplete/title.blade.php   |  4 ++
 resources/views/layouts/app.blade.php         |  2 +-
 .../views/layouts/partials/header.blade.php   |  4 +-
 .../partials/header/autocomplete.blade.php    | 63 ++++++++++---------
 .../header/autocomplete/all-results.blade.php | 16 +++--
 .../header/autocomplete/background.blade.php  |  3 -
 .../header/autocomplete/categories.blade.php  |  7 +--
 .../header/autocomplete/no-results.blade.php  | 19 ++++++
 .../header/autocomplete/products.blade.php    | 36 ++++++-----
 11 files changed, 101 insertions(+), 64 deletions(-)
 create mode 100644 resources/views/components/autocomplete/magnifying-glass.blade.php
 create mode 100644 resources/views/components/autocomplete/title.blade.php
 delete mode 100644 resources/views/layouts/partials/header/autocomplete/background.blade.php
 create mode 100644 resources/views/layouts/partials/header/autocomplete/no-results.blade.php

diff --git a/resources/js/components/Search/Autocomplete.vue b/resources/js/components/Search/Autocomplete.vue
index 7df4e3bb6..98d8477b9 100644
--- a/resources/js/components/Search/Autocomplete.vue
+++ b/resources/js/components/Search/Autocomplete.vue
@@ -32,6 +32,7 @@ export default {
             resultsCount: 0,
             searchAdditionals: () => null,
             overlay: false,
+            searchLoading: false,
         }
     },
 
@@ -99,6 +100,12 @@ export default {
     },
 
     methods: {
+        startLoading() {
+            this.searchLoading = true
+        },
+        stopLoading() {
+            this.searchLoading = false
+        },
         highlight(hit, field) {
             let source = hit._source ?? hit.source
             let highlight = hit.highlight ?? source.highlight
diff --git a/resources/views/components/autocomplete/magnifying-glass.blade.php b/resources/views/components/autocomplete/magnifying-glass.blade.php
new file mode 100644
index 000000000..2b1f4761b
--- /dev/null
+++ b/resources/views/components/autocomplete/magnifying-glass.blade.php
@@ -0,0 +1,4 @@
+{{-- This is the search icon in the autocomplete --}}
+<div {{ $attributes->twMerge('transition-colors duration-300 rounded-lg bg-inactive-100 absolute right-1 inset-y-1 w-11 pointer-events-none flex items-center justify-center text-neutral ' . config('rapidez.frontend.z-indexes.button-autocomplete')) }}>
+    <x-heroicon-o-magnifying-glass class="size-5" />
+</div>
diff --git a/resources/views/components/autocomplete/title.blade.php b/resources/views/components/autocomplete/title.blade.php
new file mode 100644
index 000000000..a730072a5
--- /dev/null
+++ b/resources/views/components/autocomplete/title.blade.php
@@ -0,0 +1,4 @@
+{{-- This title is shown in the search autocomplete above the products and categories --}}
+<div {{ $attributes->twMerge('text-inactive text-xs font-semibold pb-2 px-5') }}>
+    {{ $slot }}
+</div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 5c9692ebd..8c950444c 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -25,7 +25,7 @@
     @stack('head')
     @config('design/head/includes')
 </head>
-<body class="text-neutral antialiased">
+<body class="text-neutral antialiased has-[.prevent-scroll]:max-md:overflow-clip">
     <div id="app" class="flex flex-col min-h-dvh">
         @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.header')
         @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.header')
diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
index 119716079..8ee2c4d9c 100644
--- a/resources/views/layouts/partials/header.blade.php
+++ b/resources/views/layouts/partials/header.blade.php
@@ -1,5 +1,5 @@
 <header class="relative py-2 shadow mb-5 border-b">
-    <div class="container flex flex-wrap items-center max-sm:px-3">
+    <div class="container flex flex-wrap items-center">
         <input id="navigation" class="peer hidden" type="checkbox" />
         <div class="py-2">
             <div class="mr-3 flex items-center text-xl sm:text-3xl">
@@ -16,7 +16,7 @@
                 </label>
             </div>
         </div>
-        <div class="flex items-center h-12 max-md:order-last max-md:w-full md:max-w-md md:flex-1">
+        <div class="flex items-center h-12 max-md:order-last max-md:w-full md:max-w-lg md:flex-1">
             @include('rapidez::layouts.partials.header.autocomplete')
         </div>
         <div class="ml-auto flex items-center justify-end pl-3">
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 36eb18a40..c10bd272b 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -1,16 +1,14 @@
-@php $inputClasses = 'relative z-20 border !font-sans !border-border !text-sm !min-h-0 outline-0 ring-0 !h-auto rounded-xl !pl-4 !pr-24 !py-3.5 !bg-white w-full focus:ring-transparent search-input' @endphp
+@php $inputClasses = 'relative z-20 border !font-sans !border-border !text-sm !min-h-0 outline-0 ring-0 !h-auto rounded-xl !pl-5 !pr-24 !py-3.5 !bg-white w-full focus:ring-transparent search-input' @endphp
 
 <div v-if="!$root.loadAutocomplete" class="relative w-full">
     <label for="autocomplete-input" class="sr-only">@lang('Search')</label>
     <input
         id="autocomplete-input"
-        placeholder="@lang('Search')"
+        placeholder="@lang('Where are you looking for?')"
         class="{{ $inputClasses }}"
         v-on:focus="$root.loadAutocomplete = true"
     >
-    <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.search-autocomplete') }}">
-        <x-heroicon-o-magnifying-glass class="size-5 text-neutral" />
-    </div>
+    <x-rapidez::autocomplete.magnifying-glass />
 </div>
 
 <autocomplete
@@ -22,16 +20,14 @@ class="{{ $inputClasses }}"
     class="relative w-full"
     v-cloak
 >
-    <x-rapidez::reactive-base slot-scope="{ results, resultsCount, searchAdditionals, overlay, showOverlay, debounce, size, highlight }">
+    <x-rapidez::reactive-base slot-scope="{ results, resultsCount, searchAdditionals, overlay, showOverlay, debounce, size, highlight, searchLoading, startLoading, stopLoading }">
         <div
-            class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
-            :class="{ 'pointer-events-auto opacity-100': overlay, 'opacity-0 pointer-events-none': !overlay }"
+            class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-neutral/40 opacity-0 transition duration-500"
+            :class="{ 'pointer-events-auto opacity-100 prevent-scroll': overlay, 'opacity-0 pointer-events-none ': !overlay }"
         ></div>
-        <div class="rounded-r-xl border-l absolute right-0 inset-y-0 w-14 pointer-events-none flex items-center justify-center {{ config('rapidez.frontend.z-indexes.button-autocomplete') }}">
-            <x-heroicon-o-magnifying-glass class="size-5 text-neutral" />
-        </div>
+        <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': overlay }" />
         <data-search
-            placeholder="@lang('Search')"
+            placeholder="@lang('Where are you looking for?')"
             v-on:value-selected="search"
             component-id="autocomplete"
             :inner-class="{ input: '{{ $inputClasses }}' }"
@@ -45,25 +41,36 @@ class="relative [&_*]:!m-0"
             @focus="showOverlay(true)"
             :size="size"
             :highlight="true"
-            v-on:value-change="searchAdditionals($event)"
+            v-on:value-change="searchAdditionals"
+            v-on:key-down="startLoading"
+            v-on:suggestions="stopLoading"
         >
-            <div
-                slot="render"
-                slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value }"
-            >
+            <div slot="render" slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value, loading }">
                 <div
-                    class="{{ config('rapidez.frontend.z-indexes.search-autocomplete') }} absolute -inset-x-5 top-14 max-h-svh overflow-x-hidden overflow-y-auto md:top-14 md:max-h-[600px] md:rounded-xl md:border bg-white shadow-xl max-md:pt-0 p-5 md:pt-0 md:inset-x-0 md:w-full md:-translate-y-px"
-                    v-if="isOpen && (suggestions.length || resultsCount)"
+                    v-if="isOpen && !searchLoading && !loading && value"
+                    class="{{ config('rapidez.frontend.z-indexes.search-autocomplete') }} absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white shadow-xl max-md:h-[calc(100svh-110px)] max-md:max-h-[calc(100svh-110px)] md:top-14 md:max-h-[720px] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
                 >
-                    @include('rapidez::layouts.partials.header.autocomplete.all-results')
-
-                    <template v-for="(resultsData, resultsType) in results ?? {}" v-if="resultsData?.hits?.length">
-                        @foreach (config('rapidez.frontend.autocomplete.additionals') as $key => $fields)
-                            @includeIf('rapidez::layouts.partials.header.autocomplete.' . $key)
-                        @endforeach
-                    </template>
-
-                    @include('rapidez::layouts.partials.header.autocomplete.products')
+                    <div v-if="suggestions.length || resultsCount">
+                        <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-inactive-100">
+                            {{--
+                                Additionals will always be shown above the products because of this v-for.
+                                With the flex-col above, we can change the order of the items. For example, if we add a blog.blade.php and we add an order-1
+                                like this: `<div class="border-t pb-2 order-1" v-if="resultsType == 'blogs'">`, blogs will be shown below the products.
+                            --}}
+                            <template v-for="(resultsData, resultsType) in results ?? {}" v-if="resultsData?.hits?.length">
+                                @foreach (config('rapidez.frontend.autocomplete.additionals') as $key => $fields)
+                                    @includeIf('rapidez::layouts.partials.header.autocomplete.' . $key)
+                                @endforeach
+                            </template>
+                            @include('rapidez::layouts.partials.header.autocomplete.products')
+                        </div>
+                        @include('rapidez::layouts.partials.header.autocomplete.all-results')
+                    </div>
+                    <div v-else class="p-5">
+                        {{-- This will be shown when there are no results in the autocomplete. If you type something
+                        that won't have results, for example: "kmerkemrke", this will be shown. --}}
+                        @include('rapidez::layouts.partials.header.autocomplete.no-results')
+                    </div>
                 </div>
             </div>
         </data-search>
diff --git a/resources/views/layouts/partials/header/autocomplete/all-results.blade.php b/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
index 17d86b9d9..08d2ded31 100644
--- a/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
@@ -1,10 +1,8 @@
-<div class="border-b font-sans py-4">
-    <a
-        :href="'/search?q=' + value"
-        class="relative group flex items-center gap-x-4 w-full text-neutral py-2 text-sm"
+<div class="font-sans px-5">
+    <x-rapidez::button.primary
+        ::href="'/search?q=' + value"
+        class="relative group flex items-center gap-x-4 w-full text-sm"
     >
-        @include('rapidez::layouts.partials.header.autocomplete.background')
-        <x-heroicon-o-magnifying-glass class="size-5 text-inactive" />
-        <span>@lang('View all results for:') <span v-text="value"></span></span>
-    </a>
-</div>
\ No newline at end of file
+        <span>@lang('View all products')</span>
+    </x-rapidez::button.primary>
+</div>
diff --git a/resources/views/layouts/partials/header/autocomplete/background.blade.php b/resources/views/layouts/partials/header/autocomplete/background.blade.php
deleted file mode 100644
index 4c3e0ec72..000000000
--- a/resources/views/layouts/partials/header/autocomplete/background.blade.php
+++ /dev/null
@@ -1,3 +0,0 @@
-{{-- This is used for the hover state, it is used for all the items in autocomplete. --}}
-
-<div class="-z-10 bg-inactive-100 opacity-0 group-hover:opacity-100 transition absolute inset-y-0 -inset-x-6 pointer-events-none"></div>
\ No newline at end of file
diff --git a/resources/views/layouts/partials/header/autocomplete/categories.blade.php b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
index 090fd3bab..1e3c461bf 100644
--- a/resources/views/layouts/partials/header/autocomplete/categories.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
@@ -1,10 +1,9 @@
-<div class="border-b py-4" v-if="resultsType == 'categories'">
+<div class="border-b pb-2" v-if="resultsType == 'categories'">
+    <x-rapidez::autocomplete.title>@lang('Categories')</x-rapidez::autocomplete.title>
     <ul class="flex flex-col font-sans">
         <li v-for="hit in resultsData.hits" :key="hit._source.id" class="flex flex-1 items-center w-full">
             <a :href="hit._source.url" class="relative flex items-center group w-full py-2 text-sm gap-x-4">
-                @include('rapidez::layouts.partials.header.autocomplete.background')
-                <x-heroicon-o-arrow-turn-down-right class="size-5 text-inactive" />
-                <span class="ml-2" v-html="highlight(hit, 'name')"></span>
+                <span class="ml-2 line-clamp-2" v-html="highlight(hit, 'name')"></span>
             </a>
         </li>
     </ul>
diff --git a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
new file mode 100644
index 000000000..86cfe9279
--- /dev/null
+++ b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
@@ -0,0 +1,19 @@
+{{-- When there are no results in the search autocomplete this will be shown. --}}
+<div class="font-bold text-neutral text-lg">@lang('There are no results found for') <span class="text-primary">"@{{ value }}"</span></div>
+<div class="flex flex-col text-sm pt-7">
+    <span class="font-bold">@lang('Have you thought of:')</span>
+    <ul class="flex flex-col pt-1.5 gap-y-1 *:flex *:gap-x-2 *:items-center">
+        <li>
+            <x-heroicon-s-check class="size-4"/>
+            @lang('Check the spelling of your search term')
+        </li>
+        <li>
+            <x-heroicon-s-check class="size-4"/>
+            @lang('Making your search term less specific')
+        </li>
+        <li>
+            <x-heroicon-s-check class="size-4"/>
+            @lang('Use other search terms')
+        </li>
+    </ul>
+</div>
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index 82905a947..b515d7640 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -1,19 +1,21 @@
-<ul class="gap-5 flex flex-col py-4">
-    <li v-for="suggestion in suggestions" :key="suggestion.source._id">
-        <a :href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
-            @include('rapidez::layouts.partials.header.autocomplete.background')
-            <img :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain w-14 h-20 mix-blend-multiply" />
-            <div class="flex flex-1 justify-center flex-col px-2">
-                <strong class="text-sm font-sans hyphens block w-full" v-html="highlight(suggestion, 'name')"></strong>
-                <div class="flex items-center gap-x-0.5">
-                    <div v-if="suggestion.source.special_price" class="text-inactive font-sans line-through text-xs">
-                        @{{ suggestion.source.price | price }}
-                    </div>
-                    <div class="text-base font-base text-primary font-sans font-bold">
-                        @{{ (suggestion.source.special_price || suggestion.source.price) | price }}
+<div class="pt-4 pb-2">
+    <x-rapidez::autocomplete.title>@lang('Products')</x-rapidez::autocomplete.title>
+    <ul class="gap-2 flex flex-col">
+        <li v-for="suggestion in suggestions" :key="suggestion.source._id">
+            <a :href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
+                <img :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain size-16 mix-blend-multiply" />
+                <div class="flex flex-1 justify-center flex-col px-2">
+                    <div class="text-sm font-medium font-sans hyphens-auto line-clamp-2 w-full" v-html="highlight(suggestion, 'name')"></div>
+                    <div class="flex items-center gap-x-0.5 mt-0.5">
+                        <div v-if="suggestion.source.special_price" class="text-inactive font-sans line-through text-xs">
+                            @{{ suggestion.source.price | price }}
+                        </div>
+                        <div class="text-sm text-neutral font-sans font-bold">
+                            @{{ (suggestion.source.special_price || suggestion.source.price) | price }}
+                        </div>
                     </div>
                 </div>
-            </div>
-        </a>
-    </li>
-</ul>
+            </a>
+        </li>
+    </ul>
+</div>

From d6a4474864fa3ae0906a6f7f5230ad9e69c746da Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Wed, 9 Oct 2024 11:13:36 +0200
Subject: [PATCH 10/25] Update translations | Dynamic generate height for
 autocomplete | Remove max-md for overflow-clip

---
 resources/views/layouts/app.blade.php                     | 2 +-
 .../views/layouts/partials/header/autocomplete.blade.php  | 6 +++---
 .../partials/header/autocomplete/no-results.blade.php     | 8 +++++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 8c950444c..1686360cc 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -25,7 +25,7 @@
     @stack('head')
     @config('design/head/includes')
 </head>
-<body class="text-neutral antialiased has-[.prevent-scroll]:max-md:overflow-clip">
+<body class="text-neutral antialiased has-[.prevent-scroll]:overflow-clip">
     <div id="app" class="flex flex-col min-h-dvh">
         @includeWhen(!request()->is('checkout'), 'rapidez::layouts.partials.header')
         @includeWhen(request()->is('checkout'), 'rapidez::layouts.checkout.header')
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index c10bd272b..5ef679cca 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -4,7 +4,7 @@
     <label for="autocomplete-input" class="sr-only">@lang('Search')</label>
     <input
         id="autocomplete-input"
-        placeholder="@lang('Where are you looking for?')"
+        placeholder="@lang('What are you looking for?')"
         class="{{ $inputClasses }}"
         v-on:focus="$root.loadAutocomplete = true"
     >
@@ -27,7 +27,7 @@ class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-neutral/40 opaci
         ></div>
         <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': overlay }" />
         <data-search
-            placeholder="@lang('Where are you looking for?')"
+            placeholder="@lang('What are you looking for?')"
             v-on:value-selected="search"
             component-id="autocomplete"
             :inner-class="{ input: '{{ $inputClasses }}' }"
@@ -48,7 +48,7 @@ class="relative [&_*]:!m-0"
             <div slot="render" slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value, loading }">
                 <div
                     v-if="isOpen && !searchLoading && !loading && value"
-                    class="{{ config('rapidez.frontend.z-indexes.search-autocomplete') }} absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white shadow-xl max-md:h-[calc(100svh-110px)] max-md:max-h-[calc(100svh-110px)] md:top-14 md:max-h-[720px] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
+                    class="{{ config('rapidez.frontend.z-indexes.search-autocomplete') }} absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white shadow-xl max-md:h-[calc(100svh-110px)] max-md:max-h-[calc(100svh-110px)] md:top-14 md:max-h-[calc(100svh-150px)] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
                 >
                     <div v-if="suggestions.length || resultsCount">
                         <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-inactive-100">
diff --git a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
index 86cfe9279..5f23b6558 100644
--- a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
@@ -1,7 +1,9 @@
 {{-- When there are no results in the search autocomplete this will be shown. --}}
-<div class="font-bold text-neutral text-lg">@lang('There are no results found for') <span class="text-primary">"@{{ value }}"</span></div>
+<div class="font-bold text-neutral text-lg">
+    @lang('No results found for :searchterm', ['searchterm' => '<span class="text-primary">"@{{ value }}"</span>'])
+</div>
 <div class="flex flex-col text-sm pt-7">
-    <span class="font-bold">@lang('Have you thought of:')</span>
+    <span class="font-bold">@lang('Have you tried:')</span>
     <ul class="flex flex-col pt-1.5 gap-y-1 *:flex *:gap-x-2 *:items-center">
         <li>
             <x-heroicon-s-check class="size-4"/>
@@ -9,7 +11,7 @@
         </li>
         <li>
             <x-heroicon-s-check class="size-4"/>
-            @lang('Making your search term less specific')
+            @lang('Make your search term less specific')
         </li>
         <li>
             <x-heroicon-s-check class="size-4"/>

From f9f693640a2eb3cca5df3b20cc53c6b587b38759 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Wed, 9 Oct 2024 11:35:06 +0200
Subject: [PATCH 11/25] Change config back to original

---
 config/rapidez/frontend.php | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/config/rapidez/frontend.php b/config/rapidez/frontend.php
index 864a56513..76c354d14 100644
--- a/config/rapidez/frontend.php
+++ b/config/rapidez/frontend.php
@@ -33,14 +33,11 @@
         // Attach additional indexes to the autocomplete
         // Uses the views in rapidez::layouts.partials.header.autocomplete
         'additionals' => [
-            'categories' => [
-                'fields' => ['name^3', 'description'],
-                'size' => 3,
-            ],
+            'categories' => ['name^3', 'description'],
         ],
 
-        'debounce' => 500,
-        'size'     => 3,
+        'debounce' => 100,
+        'size'     => 10,
     ],
 
     // Link store codes to theme folders

From 5971e4f0d8e4ec9f2d1032879a0d07b08c6350d5 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 10 Oct 2024 13:17:51 +0200
Subject: [PATCH 12/25] Changed size back to 3 & removed it from categories as
 it is not needed there

---
 config/rapidez/frontend.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/rapidez/frontend.php b/config/rapidez/frontend.php
index 76c354d14..c6ab8be22 100644
--- a/config/rapidez/frontend.php
+++ b/config/rapidez/frontend.php
@@ -36,8 +36,8 @@
             'categories' => ['name^3', 'description'],
         ],
 
-        'debounce' => 100,
-        'size'     => 10,
+        'debounce' => 500,
+        'size'     => 3,
     ],
 
     // Link store codes to theme folders

From e917f2326a4598c59980dc251a8a0b70e6f817cd Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 14:58:26 +0100
Subject: [PATCH 13/25] Update autocomplete with new colors & z-indexes

---
 resources/css/app.css                                  |  1 +
 resources/js/stores/useCart.js                         |  8 ++++----
 .../views/checkout/steps/shipping_method.blade.php     |  2 +-
 .../components/autocomplete/magnifying-glass.blade.php |  2 +-
 .../views/components/autocomplete/title.blade.php      |  2 +-
 resources/views/layouts/partials/header.blade.php      |  2 +-
 .../layouts/partials/header/autocomplete.blade.php     | 10 +++++-----
 .../partials/header/autocomplete/no-results.blade.php  |  2 +-
 .../partials/header/autocomplete/products.blade.php    |  4 ++--
 .../views/layouts/partials/header/minicart.blade.php   |  2 +-
 resources/views/listing/partials/stats.blade.php       |  2 +-
 .../views/product/partials/gallery/popup.blade.php     |  4 ++--
 .../product/partials/gallery/thumbnails.blade.php      |  6 +++---
 tailwind.config.js                                     |  2 ++
 14 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 0f5030156..ecb92222d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,6 +1,7 @@
 @import 'components/vue-slider';
 @import 'components/price-slider';
 @import 'components/pagination';
+@import 'components/autocomplete';
 
 @tailwind base;
 @tailwind components;
diff --git a/resources/js/stores/useCart.js b/resources/js/stores/useCart.js
index 6fa88c523..746501ecd 100644
--- a/resources/js/stores/useCart.js
+++ b/resources/js/stores/useCart.js
@@ -271,9 +271,9 @@ export const taxTotal = computed(() => {
     return cart.value.prices.applied_taxes.reduce((sum, tax) => sum + tax.amount.value, 0)
 })
 
-watch(mask, refresh)
-if (cartStorage.value?.id && !mask.value) {
-    clear()
-}
+// watch(mask, refresh)
+// if (cartStorage.value?.id && !mask.value) {
+//     clear()
+// }
 
 export default () => cart
diff --git a/resources/views/checkout/steps/shipping_method.blade.php b/resources/views/checkout/steps/shipping_method.blade.php
index 160bda578..2f4dd7818 100644
--- a/resources/views/checkout/steps/shipping_method.blade.php
+++ b/resources/views/checkout/steps/shipping_method.blade.php
@@ -17,7 +17,7 @@
     v-if="!cart.is_virtual"
 >
     <fieldset class="flex flex-col gap-3" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
-        <label class="flex items-center gap-x-1.5 p-5 border rounded bg-white cursor-pointer text-sm text-neutral" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
+        <label class="flex items-center gap-x-1.5 p-5 border rounded bg-white cursor-pointer text-sm text" v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
             <x-rapidez::input.radio.base
                 name="shipping_method"
                 v-model="variables.method"
diff --git a/resources/views/components/autocomplete/magnifying-glass.blade.php b/resources/views/components/autocomplete/magnifying-glass.blade.php
index 2b1f4761b..749f8ac0a 100644
--- a/resources/views/components/autocomplete/magnifying-glass.blade.php
+++ b/resources/views/components/autocomplete/magnifying-glass.blade.php
@@ -1,4 +1,4 @@
 {{-- This is the search icon in the autocomplete --}}
-<div {{ $attributes->twMerge('transition-colors duration-300 rounded-lg bg-inactive-100 absolute right-1 inset-y-1 w-11 pointer-events-none flex items-center justify-center text-neutral ' . config('rapidez.frontend.z-indexes.button-autocomplete')) }}>
+<div {{ $attributes->twMerge('transition-colors duration-300 rounded-lg bg-muted absolute right-1 inset-y-1 w-11 pointer-events-none flex items-center justify-center text z-header-autocomplete-button') }}>
     <x-heroicon-o-magnifying-glass class="size-5" />
 </div>
diff --git a/resources/views/components/autocomplete/title.blade.php b/resources/views/components/autocomplete/title.blade.php
index a730072a5..490162b2b 100644
--- a/resources/views/components/autocomplete/title.blade.php
+++ b/resources/views/components/autocomplete/title.blade.php
@@ -1,4 +1,4 @@
 {{-- This title is shown in the search autocomplete above the products and categories --}}
-<div {{ $attributes->twMerge('text-inactive text-xs font-semibold pb-2 px-5') }}>
+<div {{ $attributes->twMerge('text-muted text-xs font-semibold pb-2 px-5') }}>
     {{ $slot }}
 </div>
diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
index 1e21fa56d..23b847438 100644
--- a/resources/views/layouts/partials/header.blade.php
+++ b/resources/views/layouts/partials/header.blade.php
@@ -1,4 +1,4 @@
-<header class="relative mb-5 border-b shadow z-header">
+<header class="relative mb-5 z-header">
     <div class="container flex flex-wrap items-center max-sm:px-3">
         <input id="navigation" class="peer hidden" type="checkbox" />
         <div class="py-2">
diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 27458ece9..f7b6dac75 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -1,4 +1,4 @@
-@php $inputClasses = 'border !border-default !text-sm !min-h-0 outline-none !h-auto rounded !p-2 !bg-white w-full focus:!border-emphasis' @endphp
+@php $inputClasses = 'relative z-header-autocomplete border !font-sans !border-default !text-sm !min-h-0 outline-0 ring-0 !h-auto rounded-xl !pl-5 !pr-24 !py-3.5 !bg-white w-full focus:ring-transparent search-input' @endphp
 
 <div v-if="!$root.loadAutocomplete" class="relative w-full">
     <label for="autocomplete-input" class="sr-only">@lang('Search')</label>
@@ -22,7 +22,7 @@ class="relative w-full"
 >
     <x-rapidez::reactive-base slot-scope="{ results, resultsCount, searchAdditionals, overlay, showOverlay, debounce, size, highlight, searchLoading, startLoading, stopLoading }">
         <div
-            class="pointer-events-none fixed z-10 inset-0 cursor-pointer bg-neutral/40 opacity-0 transition duration-500"
+            class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
             :class="{ 'pointer-events-auto opacity-100 prevent-scroll': overlay, 'opacity-0 pointer-events-none ': !overlay }"
         ></div>
         <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': overlay }" />
@@ -47,11 +47,11 @@ class="relative [&_*]:!m-0"
         >
             <div slot="render" slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value, loading }">
                 <div
-                    class="z-header-autocomplete absolute -inset-x-10 top-full max-h-[600px] overflow-auto rounded-b-xl border bg-white p-2 md:p-5 shadow-xl md:inset-x-0 md:w-full md:-translate-y-px"
-                    v-if="isOpen && (suggestions.length || resultsCount)"
+                    v-if="isOpen && !searchLoading && !loading && value"
+                    class="z-header-autocomplete absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white shadow-xl max-md:h-[calc(100svh-150px)] max-md:max-h-[calc(100svh-150px)] md:top-14 md:max-h-[calc(100svh-150px)] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
                 >
                     <div v-if="suggestions.length || resultsCount">
-                        <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-inactive-100">
+                        <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-muted">
                             {{--
                                 Additionals will always be shown above the products because of this v-for.
                                 With the flex-col above, we can change the order of the items. For example, if we add a blog.blade.php and we add an order-1
diff --git a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
index 5f23b6558..71340ff05 100644
--- a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
@@ -1,5 +1,5 @@
 {{-- When there are no results in the search autocomplete this will be shown. --}}
-<div class="font-bold text-neutral text-lg">
+<div class="font-bold text text-lg break-all">
     @lang('No results found for :searchterm', ['searchterm' => '<span class="text-primary">"@{{ value }}"</span>'])
 </div>
 <div class="flex flex-col text-sm pt-7">
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index b515d7640..2ce829737 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -7,10 +7,10 @@
                 <div class="flex flex-1 justify-center flex-col px-2">
                     <div class="text-sm font-medium font-sans hyphens-auto line-clamp-2 w-full" v-html="highlight(suggestion, 'name')"></div>
                     <div class="flex items-center gap-x-0.5 mt-0.5">
-                        <div v-if="suggestion.source.special_price" class="text-inactive font-sans line-through text-xs">
+                        <div v-if="suggestion.source.special_price" class="text-muted font-sans line-through text-xs">
                             @{{ suggestion.source.price | price }}
                         </div>
-                        <div class="text-sm text-neutral font-sans font-bold">
+                        <div class="text-sm text font-sans font-bold">
                             @{{ (suggestion.source.special_price || suggestion.source.price) | price }}
                         </div>
                     </div>
diff --git a/resources/views/layouts/partials/header/minicart.blade.php b/resources/views/layouts/partials/header/minicart.blade.php
index c6a30fe48..d20dbb7ee 100644
--- a/resources/views/layouts/partials/header/minicart.blade.php
+++ b/resources/views/layouts/partials/header/minicart.blade.php
@@ -2,7 +2,7 @@
     <div class="relative" v-if="hasCart" v-on-click-away="close" slot-scope="{ toggle, close, isOpen }" v-cloak>
         <button class="flex my-1 focus:outline-none" v-on:click="toggle">
             <x-heroicon-o-shopping-cart class="size-6"/>
-            <span class="bg-secondary text-secondary-text rounded-full size-6 text-white text-center" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
+            <span class="bg-secondary text-secondary-text rounded-full size-6 text-center" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
         </button>
         <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 z-header-minicart">
             <table class="w-full mb-3">
diff --git a/resources/views/listing/partials/stats.blade.php b/resources/views/listing/partials/stats.blade.php
index 74bc86048..de6bc7950 100644
--- a/resources/views/listing/partials/stats.blade.php
+++ b/resources/views/listing/partials/stats.blade.php
@@ -7,7 +7,7 @@
     <div class="justify-self-end mr-5">
         <div class="flex items-center gap-1 flex-wrap">
             <label class="flex items-center gap-x-1.5">
-                <x-rapidez::label class="text-sm text-inactive whitespace-nowrap mb-0">@lang('Items per page'):</x-rapidez::label>
+                <x-rapidez::label class="text-sm text-muted whitespace-nowrap mb-0">@lang('Items per page'):</x-rapidez::label>
                 <x-rapidez::input.select v-model="listingSlotProps.pageSize" class="w-20">
                     <option
                         v-for="size in $root.config.grid_per_page_values.concat($root.config.translations.all)"
diff --git a/resources/views/product/partials/gallery/popup.blade.php b/resources/views/product/partials/gallery/popup.blade.php
index f30915058..0e5b63a25 100644
--- a/resources/views/product/partials/gallery/popup.blade.php
+++ b/resources/views/product/partials/gallery/popup.blade.php
@@ -11,9 +11,9 @@ class="object-contain max-h-full mx-auto block"
         </div>
     </div>
     <button class="z-popup-actions top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
-        <x-heroicon-o-chevron-left class="size-8 text-inactive" />
+        <x-heroicon-o-chevron-left class="size-8 text-muted" />
     </button>
     <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
-        <x-heroicon-o-chevron-right class="size-8 text-inactive" />
+        <x-heroicon-o-chevron-right class="size-8 text-muted" />
     </button>
 </div>
\ No newline at end of file
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index c2ea459b5..87900ae6a 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -4,7 +4,7 @@
         v-for="(image, imageId) in images.slice(0, {{ max($breakpoints) }})"
         class="flex items-center justify-center bg-white border rounded p-1.5 aspect-square max-w-24 flex-1 transition-all outline-transparent overflow-hidden relative"
         :class="{
-            'outline outline-1 !outline-neutral border-neutral': active == imageId,
+            'outline outline-1 !outline-primary border-primary': active == imageId,
             'xl:hidden': imageId > {{ $breakpoints['xl'] }},
             'lg:max-xl:hidden': imageId > {{ $breakpoints['lg'] }},
             'md:max-lg:hidden': imageId > {{ $breakpoints['md'] }},
@@ -23,7 +23,7 @@ class="object-contain block w-auto max-h-full"
         <span
             v-if="(imageId + 1) < images.length"
             v-on:click="toggleZoom()"
-            class="absolute inset-0 items-center justify-center bg-neutral/20 hidden"
+            class="absolute inset-0 items-center justify-center bg-black/20 hidden"
             :class="{
                 'xl:flex': imageId === {{ $breakpoints['xl'] }},
                 'lg:max-xl:flex': imageId === {{ $breakpoints['lg'] }},
@@ -32,7 +32,7 @@ class="absolute inset-0 items-center justify-center bg-neutral/20 hidden"
                 'max-sm:flex': imageId === {{ $breakpoints['xs'] }}
             }"
         >
-            <span class="size-9 flex items-center justify-center rounded-full shadow-lg bg-white text-sm font-bold text-neutral">
+            <span class="size-9 flex items-center justify-center rounded-full shadow-lg bg-white text-sm font-bold text">
                 +@{{ images.length - (imageId + 1) }}
             </span>
         </span>
diff --git a/tailwind.config.js b/tailwind.config.js
index 6a84efe02..583c48490 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -62,8 +62,10 @@ export default {
             zIndex: {
                 'header': '100',
                 'header-dropdown': '10',
+                'header-autocomplete-overlay': '10',
                 'header-autocomplete': '20',
                 'header-minicart': '30',
+                'header-autocomplete-button': '30',
 
                 'notifications': '110',
 

From 64192046fe26d1f18f286b82bf6af6c9832a0911 Mon Sep 17 00:00:00 2001
From: Roene-JustBetter <Roene-JustBetter@users.noreply.github.com>
Date: Thu, 5 Dec 2024 14:01:42 +0000
Subject: [PATCH 14/25] Apply fixes from Prettier

---
 resources/css/components/autocomplete.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/autocomplete.css b/resources/css/components/autocomplete.css
index 4ef7ca63c..1ce3ace8a 100644
--- a/resources/css/components/autocomplete.css
+++ b/resources/css/components/autocomplete.css
@@ -14,4 +14,4 @@
 
 mark {
     @apply bg-transparent text-inherit font-bold;
-}
\ No newline at end of file
+}

From 4ec268bc3771cf2cc8a6a514bee090b1613a5451 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 15:05:52 +0100
Subject: [PATCH 15/25] Revert file

---
 resources/js/stores/useCart.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/js/stores/useCart.js b/resources/js/stores/useCart.js
index 746501ecd..6fa88c523 100644
--- a/resources/js/stores/useCart.js
+++ b/resources/js/stores/useCart.js
@@ -271,9 +271,9 @@ export const taxTotal = computed(() => {
     return cart.value.prices.applied_taxes.reduce((sum, tax) => sum + tax.amount.value, 0)
 })
 
-// watch(mask, refresh)
-// if (cartStorage.value?.id && !mask.value) {
-//     clear()
-// }
+watch(mask, refresh)
+if (cartStorage.value?.id && !mask.value) {
+    clear()
+}
 
 export default () => cart

From 6be26cca8a87658fd35b016b24e841fa0e02e759 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 15:11:01 +0100
Subject: [PATCH 16/25] Added translations

---
 lang/nl.json | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lang/nl.json b/lang/nl.json
index aabf3fc80..155cfc01c 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -14,6 +14,7 @@
     "Categories": "Categorieën",
     "Category": "Categorie",
     "Checkout": "Afrekenen",
+    "Check the spelling of your search term": "De spelling van je zoekterm te controleren",
     "City": "Stad",
     "Close": "Sluiten",
     "Company": "Bedrijf",
@@ -29,6 +30,7 @@
     "Firstname": "Voornaam",
     "Forgot your password?": "Wachtwoord vergeten?",
     "Go to home": "Naar de homepagina",
+    "Have you tried:": "Heb je gedacht aan:",
     "Home": "Homepagina",
     "Housenumber": "Huisnummer",
     "Items per page": "Producten per pagina",
@@ -37,6 +39,7 @@
     "Loading": "Aan het laden",
     "Login": "Inloggen",
     "Logout": "Uitloggen",
+    "Make your search term less specific": "Je zoekterm minder specifiek maken",
     "Maximum image height": "Maximale hoogte",
     "Maximum image width": "Maximale breedte",
     "Middlename": "Tussenvoegsel",
@@ -45,6 +48,7 @@
     "New address": "Nieuw adres",
     "Next": "Volgende",
     "No": "Nee",
+    "No results found for :searchterm": "Geen resultaten voor :searchterm",
     "Order placed succesfully": "Bestelling succesvol geplaatst",
     "Orders": "Bestellingen",
     "page": "pagina",
@@ -92,6 +96,8 @@
     "This website uses cookies": "Deze website maakt gebruik van cookies",
     "Total": "Totaal",
     "Update": "Update",
+    "Use other search terms": "Andere zoektermen te gebruiken",
+    "What are you looking for?'": "Waar ben je naar op zoek?",
     "Want product news and updates?": "Wil je productnieuws en updates?",
     "We care about the protection of your data. Read our": "Wij geven om de bescherming van uw gegevens. Lees onze",
     "We found other products you might like!": "We hebben andere producten gevonden die je misschien leuk vindt!",

From b1cd21f189419c35d82fffc15c6a738024025e3f Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 15:14:09 +0100
Subject: [PATCH 17/25] Added border in header back

---
 resources/views/layouts/partials/header.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
index 23b847438..b8425ba84 100644
--- a/resources/views/layouts/partials/header.blade.php
+++ b/resources/views/layouts/partials/header.blade.php
@@ -1,4 +1,4 @@
-<header class="relative mb-5 z-header">
+<header class="relative mb-5 border-b z-header">
     <div class="container flex flex-wrap items-center max-sm:px-3">
         <input id="navigation" class="peer hidden" type="checkbox" />
         <div class="py-2">

From dac772a8fa382a40f2d54014c40b555e7ba0b3cc Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 15:19:47 +0100
Subject: [PATCH 18/25] Added translation

---
 lang/nl.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lang/nl.json b/lang/nl.json
index 155cfc01c..2341be777 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -97,6 +97,7 @@
     "Total": "Totaal",
     "Update": "Update",
     "Use other search terms": "Andere zoektermen te gebruiken",
+    "View all products": "Bekijk alle producten",
     "What are you looking for?'": "Waar ben je naar op zoek?",
     "Want product news and updates?": "Wil je productnieuws en updates?",
     "We care about the protection of your data. Read our": "Wij geven om de bescherming van uw gegevens. Lees onze",

From d5b893931b4d010fc5109ae0bbe7b33d8bc08a6f Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 15:29:25 +0100
Subject: [PATCH 19/25] Added missing translations

---
 lang/nl.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lang/nl.json b/lang/nl.json
index 2341be777..0efa928e6 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -62,6 +62,7 @@
     "Prev": "Vorige",
     "Privacy Policy": "Privacybeleid",
     "products": "producten",
+    "Products": "Producten",
     "Quantity": "Hoeveelheid",
     "Related products": "Gerelateerde producten",
     "Remove": "Verwijderen",
@@ -98,7 +99,7 @@
     "Update": "Update",
     "Use other search terms": "Andere zoektermen te gebruiken",
     "View all products": "Bekijk alle producten",
-    "What are you looking for?'": "Waar ben je naar op zoek?",
+    "What are you looking for?": "Waar ben je naar op zoek?",
     "Want product news and updates?": "Wil je productnieuws en updates?",
     "We care about the protection of your data. Read our": "Wij geven om de bescherming van uw gegevens. Lees onze",
     "We found other products you might like!": "We hebben andere producten gevonden die je misschien leuk vindt!",

From 5794063690ad11510f7451fe354a0e2754133d32 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Thu, 5 Dec 2024 15:37:58 +0100
Subject: [PATCH 20/25] Added padding bottom in header for small screens

---
 resources/views/layouts/partials/header.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
index b8425ba84..c0075e340 100644
--- a/resources/views/layouts/partials/header.blade.php
+++ b/resources/views/layouts/partials/header.blade.php
@@ -1,4 +1,4 @@
-<header class="relative mb-5 border-b z-header">
+<header class="relative mb-5 max-md:pb-4 border-b z-header">
     <div class="container flex flex-wrap items-center max-sm:px-3">
         <input id="navigation" class="peer hidden" type="checkbox" />
         <div class="py-2">

From 63a3e9f039cb8d7058198077e3a5290303e655a4 Mon Sep 17 00:00:00 2001
From: Roene Verbeek <85165259+Roene-JustBetter@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:40:54 +0100
Subject: [PATCH 21/25] Update
 resources/views/layouts/partials/header/autocomplete.blade.php

Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
---
 .../views/layouts/partials/header/autocomplete.blade.php    | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index f7b6dac75..cc81eedba 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -52,11 +52,7 @@ class="z-header-autocomplete absolute -inset-x-5 top-14 overflow-x-hidden overfl
                 >
                     <div v-if="suggestions.length || resultsCount">
                         <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-muted">
-                            {{--
-                                Additionals will always be shown above the products because of this v-for.
-                                With the flex-col above, we can change the order of the items. For example, if we add a blog.blade.php and we add an order-1
-                                like this: `<div class="border-t pb-2 order-1" v-if="resultsType == 'blogs'">`, blogs will be shown below the products.
-                            --}}
+                            {{-- The order can be changed with https://tailwindcss.com/docs/order --}}
                             <template v-for="(resultsData, resultsType) in results ?? {}" v-if="resultsData?.hits?.length">
                                 @foreach (config('rapidez.frontend.autocomplete.additionals') as $key => $fields)
                                     @includeIf('rapidez::layouts.partials.header.autocomplete.' . $key)

From c29c2efe374ac9a5997fd06437d1b984ccb6f069 Mon Sep 17 00:00:00 2001
From: Roene Verbeek <85165259+Roene-JustBetter@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:41:04 +0100
Subject: [PATCH 22/25] Update
 resources/views/layouts/partials/header/autocomplete.blade.php

Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
---
 resources/views/layouts/partials/header/autocomplete.blade.php | 2 --
 1 file changed, 2 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index cc81eedba..888bc43c1 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -63,8 +63,6 @@ class="z-header-autocomplete absolute -inset-x-5 top-14 overflow-x-hidden overfl
                         @include('rapidez::layouts.partials.header.autocomplete.all-results')
                     </div>
                     <div v-else class="p-5">
-                        {{-- This will be shown when there are no results in the autocomplete. If you type something
-                        that won't have results, for example: "kmerkemrke", this will be shown. --}}
                         @include('rapidez::layouts.partials.header.autocomplete.no-results')
                     </div>
                 </div>

From 51cf8c7424ddc72b6c4a331c6bdc1b8cc251de38 Mon Sep 17 00:00:00 2001
From: Roene Verbeek <85165259+Roene-JustBetter@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:41:14 +0100
Subject: [PATCH 23/25] Update
 resources/views/layouts/partials/header/autocomplete/no-results.blade.php

Co-authored-by: Roy Duineveld <royduineveld@gmail.com>
---
 .../layouts/partials/header/autocomplete/no-results.blade.php    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
index 71340ff05..5d846e9c9 100644
--- a/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/no-results.blade.php
@@ -1,4 +1,3 @@
-{{-- When there are no results in the search autocomplete this will be shown. --}}
 <div class="font-bold text text-lg break-all">
     @lang('No results found for :searchterm', ['searchterm' => '<span class="text-primary">"@{{ value }}"</span>'])
 </div>

From 922a839ff95439bfc3ffeb3f8acfa1928cfe3220 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Mon, 9 Dec 2024 13:38:11 +0100
Subject: [PATCH 24/25] Changed slot-scope

---
 .../partials/header/autocomplete.blade.php    | 28 +++++++++----------
 .../header/autocomplete/all-results.blade.php |  2 +-
 .../header/autocomplete/categories.blade.php  |  2 +-
 .../header/autocomplete/products.blade.php    |  4 +--
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 888bc43c1..941b626f4 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -20,12 +20,12 @@ class="{{ $inputClasses }}"
     class="relative w-full"
     v-cloak
 >
-    <x-rapidez::reactive-base slot-scope="{ results, resultsCount, searchAdditionals, overlay, showOverlay, debounce, size, highlight, searchLoading, startLoading, stopLoading }">
+    <x-rapidez::reactive-base slot-scope="autocompleteScope">
         <div
             class="z-header-autocomplete-overlay pointer-events-none fixed inset-0 cursor-pointer bg-black/40 opacity-0 transition duration-500"
-            :class="{ 'pointer-events-auto opacity-100 prevent-scroll': overlay, 'opacity-0 pointer-events-none ': !overlay }"
+            :class="autocompleteScope.overlay ? 'pointer-events-auto opacity-100 prevent-scroll' : 'opacity-0 pointer-events-none '"
         ></div>
-        <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': overlay }" />
+        <x-rapidez::autocomplete.magnifying-glass v-bind:class="{ 'bg-primary text-white': autocompleteScope.overlay }" />
         <data-search
             placeholder="@lang('What are you looking for?')"
             v-on:value-selected="search"
@@ -36,24 +36,24 @@ class="relative [&_*]:!m-0"
             :field-weights="Object.values(config.searchable)"
             :show-icon="false"
             fuzziness="AUTO"
-            :debounce="debounce"
-            @blur="showOverlay(false)"
-            @focus="showOverlay(true)"
-            :size="size"
+            :debounce="autocompleteScope.debounce"
+            v-on:blur="autocompleteScope.showOverlay(false)"
+            v-on:focus="autocompleteScope.showOverlay(true)"
+            :size="autocompleteScope.size"
             :highlight="true"
-            v-on:value-change="searchAdditionals"
-            v-on:key-down="startLoading"
-            v-on:suggestions="stopLoading"
+            v-on:value-change="autocompleteScope.searchAdditionals"
+            v-on:key-down="autocompleteScope.startLoading"
+            v-on:suggestions="autocompleteScope.stopLoading"
         >
-            <div slot="render" slot-scope="{ downshiftProps: { isOpen }, data: suggestions, value, loading }">
+            <div slot="render" slot-scope="dataSearchScope">
                 <div
-                    v-if="isOpen && !searchLoading && !loading && value"
+                    v-if="dataSearchScope.downshiftProps.isOpen && !autocompleteScope.searchLoading && !dataSearchScope.loading && dataSearchScope.value"
                     class="z-header-autocomplete absolute -inset-x-5 top-14 overflow-x-hidden overflow-y-auto scrollbar-hide pt-4 pb-7 bg-white shadow-xl max-md:h-[calc(100svh-150px)] max-md:max-h-[calc(100svh-150px)] md:top-14 md:max-h-[calc(100svh-150px)] md:rounded-xl md:border md:inset-x-0 md:w-full md:-translate-y-px"
                 >
-                    <div v-if="suggestions.length || resultsCount">
+                    <div v-if="dataSearchScope.data.length || autocompleteScope.resultsCount">
                         <div class="flex flex-col prose-li:px-5 hover:prose-li:bg-muted">
                             {{-- The order can be changed with https://tailwindcss.com/docs/order --}}
-                            <template v-for="(resultsData, resultsType) in results ?? {}" v-if="resultsData?.hits?.length">
+                            <template v-for="(resultsData, resultsType) in autocompleteScope.results ?? {}" v-if="resultsData?.hits?.length">
                                 @foreach (config('rapidez.frontend.autocomplete.additionals') as $key => $fields)
                                     @includeIf('rapidez::layouts.partials.header.autocomplete.' . $key)
                                 @endforeach
diff --git a/resources/views/layouts/partials/header/autocomplete/all-results.blade.php b/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
index 08d2ded31..8ec3aad5e 100644
--- a/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/all-results.blade.php
@@ -1,6 +1,6 @@
 <div class="font-sans px-5">
     <x-rapidez::button.primary
-        ::href="'/search?q=' + value"
+        v-bind:href="'/search?q=' + dataSearchScope.value"
         class="relative group flex items-center gap-x-4 w-full text-sm"
     >
         <span>@lang('View all products')</span>
diff --git a/resources/views/layouts/partials/header/autocomplete/categories.blade.php b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
index 1e3c461bf..4e039ff5b 100644
--- a/resources/views/layouts/partials/header/autocomplete/categories.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
@@ -3,7 +3,7 @@
     <ul class="flex flex-col font-sans">
         <li v-for="hit in resultsData.hits" :key="hit._source.id" class="flex flex-1 items-center w-full">
             <a :href="hit._source.url" class="relative flex items-center group w-full py-2 text-sm gap-x-4">
-                <span class="ml-2 line-clamp-2" v-html="highlight(hit, 'name')"></span>
+                <span class="ml-2 line-clamp-2" v-html="autocompleteScope.highlight(hit, 'name')"></span>
             </a>
         </li>
     </ul>
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index 2ce829737..355f20271 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -1,11 +1,11 @@
 <div class="pt-4 pb-2">
     <x-rapidez::autocomplete.title>@lang('Products')</x-rapidez::autocomplete.title>
     <ul class="gap-2 flex flex-col">
-        <li v-for="suggestion in suggestions" :key="suggestion.source._id">
+        <li v-for="suggestion in dataSearchScope.data" :key="suggestion.source._id">
             <a :href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
                 <img :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain size-16 mix-blend-multiply" />
                 <div class="flex flex-1 justify-center flex-col px-2">
-                    <div class="text-sm font-medium font-sans hyphens-auto line-clamp-2 w-full" v-html="highlight(suggestion, 'name')"></div>
+                    <div class="text-sm font-medium font-sans hyphens-auto line-clamp-2 w-full" v-html="autocompleteScope.highlight(suggestion, 'name')"></div>
                     <div class="flex items-center gap-x-0.5 mt-0.5">
                         <div v-if="suggestion.source.special_price" class="text-muted font-sans line-through text-xs">
                             @{{ suggestion.source.price | price }}

From 05f7078d70055f0c0a085ee4a2bcc0497e84c709 Mon Sep 17 00:00:00 2001
From: Roene <roene@justbetter.nl>
Date: Tue, 10 Dec 2024 13:00:11 +0100
Subject: [PATCH 25/25] Addec v-bind:

---
 .../views/layouts/partials/header/autocomplete.blade.php      | 4 ++--
 .../layouts/partials/header/autocomplete/categories.blade.php | 2 +-
 .../layouts/partials/header/autocomplete/products.blade.php   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/resources/views/layouts/partials/header/autocomplete.blade.php b/resources/views/layouts/partials/header/autocomplete.blade.php
index 941b626f4..48ce2d5b1 100644
--- a/resources/views/layouts/partials/header/autocomplete.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete.blade.php
@@ -36,10 +36,10 @@ class="relative [&_*]:!m-0"
             :field-weights="Object.values(config.searchable)"
             :show-icon="false"
             fuzziness="AUTO"
-            :debounce="autocompleteScope.debounce"
+            v-bind:debounce="autocompleteScope.debounce"
             v-on:blur="autocompleteScope.showOverlay(false)"
             v-on:focus="autocompleteScope.showOverlay(true)"
-            :size="autocompleteScope.size"
+            v-bind:size="autocompleteScope.size"
             :highlight="true"
             v-on:value-change="autocompleteScope.searchAdditionals"
             v-on:key-down="autocompleteScope.startLoading"
diff --git a/resources/views/layouts/partials/header/autocomplete/categories.blade.php b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
index 4e039ff5b..9fb455f79 100644
--- a/resources/views/layouts/partials/header/autocomplete/categories.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/categories.blade.php
@@ -2,7 +2,7 @@
     <x-rapidez::autocomplete.title>@lang('Categories')</x-rapidez::autocomplete.title>
     <ul class="flex flex-col font-sans">
         <li v-for="hit in resultsData.hits" :key="hit._source.id" class="flex flex-1 items-center w-full">
-            <a :href="hit._source.url" class="relative flex items-center group w-full py-2 text-sm gap-x-4">
+            <a v-bind:href="hit._source.url" class="relative flex items-center group w-full py-2 text-sm gap-x-4">
                 <span class="ml-2 line-clamp-2" v-html="autocompleteScope.highlight(hit, 'name')"></span>
             </a>
         </li>
diff --git a/resources/views/layouts/partials/header/autocomplete/products.blade.php b/resources/views/layouts/partials/header/autocomplete/products.blade.php
index 355f20271..b06166028 100644
--- a/resources/views/layouts/partials/header/autocomplete/products.blade.php
+++ b/resources/views/layouts/partials/header/autocomplete/products.blade.php
@@ -2,7 +2,7 @@
     <x-rapidez::autocomplete.title>@lang('Products')</x-rapidez::autocomplete.title>
     <ul class="gap-2 flex flex-col">
         <li v-for="suggestion in dataSearchScope.data" :key="suggestion.source._id">
-            <a :href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
+            <a v-bind:href="suggestion.source.url | url" class="group relative flex flex-wrap py-2">
                 <img :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + suggestion.source.thumbnail + '.webp'" class="shrink-0 self-center object-contain size-16 mix-blend-multiply" />
                 <div class="flex flex-1 justify-center flex-col px-2">
                     <div class="text-sm font-medium font-sans hyphens-auto line-clamp-2 w-full" v-html="autocompleteScope.highlight(suggestion, 'name')"></div>