InstantSearch migration

composer.json

@@ -17,18 +17,21 @@
     "prefer-stable": true,
     "require": {
         "php": "^8.1|^8.2|^8.3",
-        "rapidez/laravel-multi-cache": "^1.0",
         "blade-ui-kit/blade-heroicons": "^2.4",
+        "http-interop/http-factory-guzzle": "^1.2",
         "illuminate/database": "^11.0",
         "illuminate/events": "^11.0",
         "illuminate/queue": "^11.0",
         "illuminate/support": "^11.0",
         "justbetter/laravel-http3earlyhints": "*",
+        "laravel/scout": "^10.11",
         "lcobucci/clock": "^2.0|^3.2",
         "lcobucci/jwt": "^4.0|^5.3",
         "mailerlite/laravel-elasticsearch": "^11.1",
+        "meilisearch/meilisearch-php": "^1.12",
         "rapidez/blade-components": "^1.4",
         "rapidez/blade-directives": "^1.0",
+        "rapidez/laravel-multi-cache": "^1.0",
         "tormjens/eventy": "^0.8"
     },
     "require-dev": {
@@ -53,7 +56,10 @@
         }
     },
     "config": {
-        "sort-packages": true
+        "sort-packages": true,
+        "allow-plugins": {
+            "php-http/discovery": true
+        }
     },
     "extra": {
         "laravel": {

lang/nl.json

@@ -111,5 +111,7 @@
     "Yes": "Ja",
     "You don't have anything in your cart.": "Je hebt geen producten in je winkelwagen.",
     "You have filtered for:": "Je hebt gefilterd op:",
-    "Your order is currently:": "Je bestelling is op dit moment:"
+    "Your order is currently:": "Je bestelling is op dit moment:",
+    "First": "Eerste",
+    "Last": "Laatste"
 }

package.json

@@ -7,9 +7,9 @@
         "prod": "vite build"
     },
     "devDependencies": {
-        "@appbaseio/reactivesearch-vue": "https://gitpkg.vercel.app/api/pkg?url=rapidez/reactivesearch/packages/vue&commit=v1.34.0-vue&scripts.postinstall=yarn%20install%20--ignore-scripts%20%26%26%20yarn%20run%20build-es&scripts.build-es=nps%20build.es",
         "@babel/core": "^7.23.9",
         "@hotwired/turbo": "^8.0.2",
+        "@meilisearch/instant-meilisearch": "^0.23.0",
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
         "@vitejs/plugin-vue2": "^2.2.0",
@@ -20,6 +20,7 @@
         "graphql": "^16.8.1",
         "graphql-combine-query": "indykoning/graphql-combine-query#feature/add-allowed-duplicates",
         "graphql-tag": "^2.12.6",
+        "instantsearch.js": "^4.75.7",
         "laravel-vite-plugin": "^1.0.5",
         "postcss": "^8.4.29",
         "postcss-import": "^16.1.0",
@@ -33,6 +34,7 @@
         "vue": "^2.7",
         "vue-clickaway": "^2.2.2",
         "vue-cookies": "^1.8.2",
+        "vue-instantsearch": "^4.19.13",
         "vue-template-compiler": "^2.7.14",
         "vue-turbolinks": "^2.2.2"
     },

resources/css/app.css

@@ -1,6 +1,5 @@
 @import 'components/vue-slider';
 @import 'components/price-slider';
-@import 'components/pagination';
 @import 'components/autocomplete';
 
 @tailwind base;

resources/js/components/Listing/Listing.vue

@@ -1,25 +1,16 @@
 <script>
-import {
-    ReactiveBase,
-    ReactiveList,
-    ReactiveComponent,
-    SelectedFilters,
-    MultiList,
-    DynamicRangeSlider,
-} from '@appbaseio/reactivesearch-vue'
-import VueSlider from 'vue-slider-component'
+import InstantSearch from 'vue-instantsearch'
+// TODO: Maybe make this swappable, so users can switch?
+import { instantMeiliSearch } from '@meilisearch/instant-meilisearch'
+import { history as historyRouter } from 'instantsearch.js/es/lib/routers'
+import { singleIndex as singleIndexMapping } from 'instantsearch.js/es/lib/stateMappings'
+// We should only import the components used!
+// https://www.algolia.com/doc/guides/building-search-ui/installation/vue/?client=Vue+2#optimize-your-build-with-tree-shaking
+Vue.use(InstantSearch)
+
 import categoryFilter from './Filters/CategoryFilter.vue'
 import useAttributes from '../../stores/useAttributes.js'
 
-Vue.use(ReactiveBase)
-Vue.use(ReactiveList)
-Vue.use(ReactiveComponent)
-Vue.use(SelectedFilters)
-Vue.use(MultiList)
-Vue.component('vue-slider-component', VueSlider)
-Vue.use(DynamicRangeSlider)
-Vue.component('category-filter', categoryFilter)
-
 export default {
     props: {
         additionalFilters: {
@@ -38,6 +29,24 @@ export default {
         pageSize:
             (Turbo?.navigator?.location?.searchParams || new URLSearchParams(window.location.search)).get('pageSize') ||
             config.grid_per_page,
+
+        // TODO: Not sure if this is the right place,
+        // the autocomplete also needs this but
+        // we don't want to load everything
+        // directly due the JS size
+        searchClient: instantMeiliSearch(
+            // TODO: This should be configurable
+            'http://localhost:7700',
+            '',
+        ).searchClient,
+
+        // TODO: We need some finetuning here; the url isn't very clean.
+        // Also after a refresh the filters aren't selected.
+        // Maybe it conflicts with ReactiveSearch?
+        routing: {
+            router: historyRouter(),
+            stateMapping: singleIndexMapping('products_1'),
+        },
     }),
 
     render() {
@@ -60,6 +69,17 @@ export default {
         reactiveFilters: function () {
             return this.filters.map((filter) => filter.code).concat(this.additionalFilters)
         },
+        hitsPerPage: function () {
+            return this.$root.config.grid_per_page_values
+                .map(function (pages, index) {
+                    return {
+                        label: pages,
+                        value: pages,
+                        default: index === 0,
+                    }
+                })
+                .concat({ label: this.$root.config.translations.all, value: 10000 })
+        },
         sortOptions: function () {
             return [
                 {

resources/views/components/listing.blade.php

@@ -19,20 +19,15 @@
         v-cloak
     >
         <div slot-scope="{ loaded, filters, sortOptions, reactiveFilters, getQuery, _renderProxy: listingSlotProps }">
-            <x-rapidez::reactive-base v-if="loaded">
-                @isset($query)
-                    <reactive-component
-                        component-id="query-filter"
-                        :custom-query="function () {return {query: {{ $query }} } }"
-                        :show-filter="false"
-                    ></reactive-component>
-                @endisset
-                <reactive-component
-                    component-id="score-position"
-                    :custom-query="getQuery"
-                    :show-filter="false"
-                ></reactive-component>
-
+            {{-- TODO: Implement $query and make sure the default product in category position is applied --}}
+            <ais-instant-search
+                v-if="loaded"
+                :search-client="listingSlotProps.searchClient"
+                index-name="products_1"
+                :routing="listingSlotProps.routing"
+            >
+                {{-- TODO: This isn't working?  --}}
+                <ais-configure :hitsPerPage="9" />
                 {{ $before ?? '' }}
                 @if ($slot->isEmpty())
                     <div class="flex flex-col lg:flex-row gap-x-6 gap-y-3">
@@ -47,7 +42,7 @@
                     {{ $slot }}
                 @endif
                 {{ $after ?? '' }}
-            </x-rapidez::reactive-base>
+            </ais-instant-search>
         </div>
     </listing>
 </div>

resources/views/listing/filters.blade.php

@@ -3,11 +3,12 @@
     <div class="w-full p-2 max-lg:bg-white max-lg:p-5">
         {{-- On mobile the filters aren't immedately visible so we should defer loading --}}
         <lazy>
-            @include('rapidez::listing.partials.filter.selected')
-            @include('rapidez::listing.partials.filter.category')
+            <ais-clear-refinements />
+            {{-- @include('rapidez::listing.partials.filter.selected') --}}
+            {{-- @include('rapidez::listing.partials.filter.category') --}}
             <template v-for="filter in filters">
-                @include('rapidez::listing.partials.filter.price')
-                @include('rapidez::listing.partials.filter.swatch')
+                {{-- @include('rapidez::listing.partials.filter.price') --}}
+                {{-- @include('rapidez::listing.partials.filter.swatch') --}}
                 @include('rapidez::listing.partials.filter.boolean')
                 @include('rapidez::listing.partials.filter.select')
             </template>

resources/views/listing/partials/filter/boolean.blade.php

@@ -1,35 +1,37 @@
-<multi-list
-    v-else-if="filter.input == 'boolean'"
-    :component-id="filter.code"
-    :data-field="filter.code+(filter.type != 'int' ? '.keyword' : '')"
-    :react="{and: reactiveFilters}"
-    :show-search="false"
-    u-r-l-params
+<ais-refinement-list
+    v-if="filter.input == 'boolean'"
+    :attribute="filter.code"
 >
-    <div
-        slot="render"
-        class="relative pb-4"
-        slot-scope="{ data, handleChange, value }"
-        v-if="data.length > 0"
-    >
-        <x-rapidez::filter.heading>
-            <ul class="flex flex-col gap-1">
-                <li class="flex" v-for="item in data">
-                    <x-rapidez::input.checkbox
-                        v-bind:checked="value[item.key]"
-                        v-on:change="handleChange(item.key)"
+    <template v-slot="{ items, refine }">
+        <div v-if="items.length" class="relative pb-4">
+            <x-rapidez::filter.heading>
+                {{-- @{{items}} --}}
+                <ul class="flex flex-col gap-1">
+                    <li
+                        v-for="item in items"
+                        class="flex justify-between text-base text-muted"
                     >
-                        <div
-                            class="font-sans font-medium text-sm items-center flex"
-                            :class="value[item.key] ? 'text' : 'text-muted'"
-                        >
-                            <template v-if="item.key">@lang('Yes')</template>
-                            <template v-if="!item.key">@lang('No')</template>
-                            <span class="block ml-0.5 text-xs">(@{{ item.doc_count }})</span>
+                        <div class="flex">
+                            {{-- TODO: checked state is acting weird --}}
+                            {{-- @{{ item.isRefined }} --}}
+                            <x-rapidez::input.checkbox
+                                v-bind:checked="item.isRefined"
+                                v-on:change="refine(item.value)"
+                            >
+                                <span
+                                    class="font-sans font-medium items-center text-sm flex"
+                                    :class="item.isRefined ? 'text' : 'text-muted'"
+                                >
+                                    <template v-if="item.value == 'true'">@lang('Yes')</template>
+                                    <template v-if="item.value == 'false'">@lang('No')</template>
+                                    <span class="block ml-0.5 text-xs">(@{{ item.count }})</span>
+                                </span>
+                            </x-rapidez::input.checkbox>
                         </div>
-                    </x-rapidez::input.checkbox>
-                </li>
-            </ul>
-        </x-rapidez::filter.heading>
-    </div>
-</multi-list>
+                    </li>
+                </ul>
+            </x-rapidez::filter.heading>
+        </div>
+    </template>
+</ais-refinement-list>
+