[Instantsearch] Swatch filter

resources/js/components/Listing/Listing.vue

@@ -120,15 +120,16 @@ export default {
         filters: function () {
             return Object.values(this.attributes)
                 .filter((attribute) => attribute.filter)
+                .map((filter) => ({ ...filter, code: this.filterPrefix(filter) + filter.code, base_code: filter.code }))
                 .sort((a, b) => a.position - b.position)
         },
 
         facets: function () {
             return [
                 ...this.filters.map((filter) => ({
                     attribute: filter.code,
-                    field: filter.code + (['price', 'boolean'].includes(filter.input) ? '' : '.keyword'),
-                    type: ['price', 'boolean'].includes(filter.input) ? 'numeric' : 'string',
+                    field: filter.code + (this.filterType(filter) == 'string' ? '.keyword' : ''),
+                    type: this.filterType(filter),
                 })),
                 { attribute: 'category_lvl0', field: 'category_lvl0.keyword', type: 'string' },
                 { attribute: 'category_lvl1', field: 'category_lvl1.keyword', type: 'string' },
@@ -194,6 +195,26 @@ export default {
     },
 
     methods: {
+        filterType(filter) {
+            if (filter.super) {
+                return 'numeric'
+            }
+
+            return ['price', 'boolean'].includes(filter.input) ? 'numeric' : 'string'
+        },
+
+        filterPrefix(filter) {
+            if (filter.super) {
+                return 'super_'
+            }
+
+            if (filter.visual_swatch) {
+                return 'visual_'
+            }
+
+            return ''
+        },
+
         getQuery() {
             if (!window.config.category?.entity_id) {
                 return
@@ -218,6 +239,13 @@ export default {
                 ...item,
             }))
         },
+
+        withSwatches(items, filter) {
+            return items.map((item) => ({
+                swatch: this.$root.swatches[filter.base_code]?.options?.[item.value] ?? null,
+                ...item,
+            }))
+        },
     },
 }
 </script>

resources/views/components/listing.blade.php

@@ -19,7 +19,7 @@
         }]"
         v-cloak
     >
-        <div slot-scope="{ loaded, filters, sortOptions, getQuery, withFilters, _renderProxy: listingSlotProps }">
+        <div slot-scope="{ loaded, filters, sortOptions, getQuery, withFilters, withSwatches, filterPrefix, _renderProxy: listingSlotProps }">
             <ais-instant-search
                 v-if="loaded"
                 :search-client="listingSlotProps.searchClient"

resources/views/listing/filters.blade.php

@@ -8,7 +8,7 @@
             @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.swatch')
                 @include('rapidez::listing.partials.filter.boolean')
                 @include('rapidez::listing.partials.filter.select')
             </template>

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

@@ -1,5 +1,5 @@
 <ais-refinement-list
-    v-if="['select', 'multiselect'].includes(filter.input)"
+    v-if="['select', 'multiselect'].includes(filter.input) && !(filter.text_swatch || filter.visual_swatch)"
     :operator="filter.input == 'multiselect' ? 'and' : 'or'"
     :attribute="filter.code"
     show-more

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

@@ -21,7 +21,7 @@ class="text-sm text-muted transition-all hover:underline"
             <template v-for="item in withFilters(items)">
                 <li
                     class="flex flex-wrap gap-2 relative"
-                    v-for="refinement in item.refinements"
+                    v-for="refinement in withSwatches(item.refinements, item.filter)"
                     :key="[
                       refinement.attribute,
                       refinement.type,
@@ -41,10 +41,6 @@ class="flex items-center gap-1 p-1 text-xs rounded-lg bg transition hover:opacit
                         <template v-else>
                             @{{ refinement.label }}
                         </template>
-                        {{--
-                            TODO: Check how we will display swatches here.
-                            Just the label or show an actual swatch?
-                        --}}
                         <x-heroicon-o-x-mark class="size-3 shrink-0"/>
                     </a>
                 </li>

resources/views/listing/partials/filter/selected/swatch.blade.php

@@ -1,5 +1,5 @@
 {{-- TODO: Display swatches correctly here --}}
 
-<template v-else-if="item.filter.input === 'swatch'">
-    @{{ refinement.label }}
+<template v-else-if="item.filter.super">
+    @{{ refinement.swatch?.label ?? refinement.label }}
 </template>

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

@@ -1,37 +1,43 @@
-<multi-list
-    v-else-if="filter.text_swatch || filter.visual_swatch"
-    :component-id="filter.code"
-    :data-field="filter.super ? 'super_' + filter.code : (filter.visual_swatch ? 'visual_' + filter.code : filter.code)"
-    :inner-class="{
-        title: 'capitalize text-sm font-medium text',
-    }"
-    :query-format="filter.input == 'multiselect' ? 'and' : 'or'"
-    :show-search="false"
-    :show-checkbox="false"
-    u-r-l-params
+<ais-refinement-list
+    v-if="filter.text_swatch || filter.visual_swatch"
+    :limit="64"
+    :operator="filter.input == 'multiselect' ? 'and' : 'or'"
+    :attribute="filter.code"
 >
-    <div slot="render" class="pb-4" slot-scope="{ data, value, handleChange }">
-        <x-rapidez::filter.heading>
-            <div class="flex flex-wrap gap-2 items-center my-1">
-                <template v-for="swatch in data">
-                    <label
-                        v-if="filter.visual_swatch"
-                        class="size-6 ring-1 ring-emphasis/10 ring-inset cursor-pointer flex items-center justify-center hover:opacity-75 rounded-full transition"
-                        v-bind:class="{'outline outline-2 outline-emphasis outline-offset-1' : value[swatch.key]}"
-                        v-bind:style="{ background: $root.swatches[filter.code]?.options[swatch.key].swatch }"
-                    >
-                        <input type="checkbox" v-on:change="handleChange(swatch.key)" class="hidden" v-bind:checked="value[swatch.key]"/>
-                    </label>
-                    <label
-                        v-else
-                        class="border px-3 transition-all rounded cursor-pointer text-sm text-muted font-medium"
-                        v-bind:class="{'border text' : value[swatch.key]}"
-                    >
-                        @{{ $root.swatches[filter.code]?.options[swatch.key].swatch }}
-                        <input type="checkbox" v-on:change="handleChange(swatch.key)" class="hidden" v-bind:checked="value[swatch.key]"/>
-                    </label>
-                </template>
-            </div>
-        </x-rapidez::filter.heading>
-    </div>
-</multi-list>
+    <template v-slot="{ items, refine }">
+        <div v-show="items.length" class="relative pb-4">
+            <x-rapidez::filter.heading>
+                <ul class="flex flex-wrap gap-2 items-center my-1">
+                    <li v-for="item in withSwatches(items, filter)">
+                        <label
+                            v-if="filter.visual_swatch"
+                            class="size-6 ring-1 ring-emphasis/10 ring-inset cursor-pointer flex items-center justify-center hover:opacity-75 rounded-full transition"
+                            v-bind:class="{ 'outline outline-2 outline-emphasis outline-offset-1': item.isRefined }"
+                            v-bind:style="{ background: item.swatch?.swatch ?? 'none' }"
+                        >
+                            <input
+                                type="checkbox"
+                                v-bind:checked="item.isRefined"
+                                v-on:change="refine(item.value)"
+                                class="hidden"
+                            >
+                        </label>
+                        <label
+                            v-else
+                            class="border px-3 transition-all rounded cursor-pointer text-sm text-muted font-medium"
+                            v-bind:class="{ 'outline outline-2 outline-emphasis outline-offset-1': item.isRefined }"
+                        >
+                            @{{ item.swatch?.swatch ?? item.value }}
+                            <input
+                                type="checkbox"
+                                v-bind:checked="item.isRefined"
+                                v-on:change="refine(item.value)"
+                                class="hidden"
+                            >
+                        </label>
+                    </li>
+                </ul>
+            </x-rapidez::filter.heading>
+        </div>
+    </template>
+</ais-refinement-list>