Done #3024 @1.5

diff --git a/app/Models/Product.php b/app/Models/Product.php
index 2ff9657fd3744e0d9c45daed1593469deaa17a7c..4e262af6a1a4b8f5a24decf79472555624b15787 100644 (file)
--- a/app/Models/Product.php
+++ b/app/Models/Product.php
@@ -400,7 +400,12 @@ class Product extends CubistMagicPageModel
 
         $all_matches = [];
 
-        $filters = Specification::whereIn('id', $specifications)->get();
+        // Ensure that filters are returned in the order they are defined in the backend
+        // Ref: https://stackoverflow.com/a/26704767
+        $spec_IDs_ordered = implode(',', $specifications);
+        $filters = Specification::whereIn('id', $specifications)
+            ->orderByRaw("FIELD(id, $spec_IDs_ordered)")
+            ->get();
         $res['filters'] = [];
         foreach ($filters as $filter) {
 
@@ -513,7 +518,7 @@ class Product extends CubistMagicPageModel
             $f['matching'] = ['count' => count($matching), 'hits' => $matching];
             $all_matches[] = $matching;
 
-            $res['filters'][$data->id] = $f;
+            $res['filters'][] = $f;
         }
 
         if (!count($all_matches)) {

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index 437a16120e09252cf49a6c100ddd66d42b02bfaf..9663d6ff575e6019e0416d65b68527809c1b591a 100644 (file)
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -7,7 +7,7 @@
 
             <!-- Filters panel -->
             <div class="bg-white p-4">
-                <div class="products-filters" v-for="(filter, key, index) in filterData" :key="key">
+                <div class="products-filters" v-for="(filter, index) in filterData" :key="index">
 
                     <hr class="h-px bg-grey-250 my-4" v-if="index !== 0" />
 
@@ -64,9 +64,9 @@
                         <template v-for="(filter, filterID) in filters">
 
                             <li class="bg-white whitespace-no-wrap py-2 px-4 rounded-full mr-3 mb-3 hover:bg-grey-200"
-                                v-for="filter_option in filter" v-if="filterData[filterID].options">
+                                v-for="filter_option in filter" v-if="getFilter(filterID).options">
 
-                                {{ filterData[filterID].options[filter_option].label }}
+                                {{ getFilter(filterID).options[filter_option].label }}
 
                                 <svg class="svg inline-block ml-3 cursor-pointer" @click="removeFilter(filterID, filter_option)"
                                      xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 11 11">
@@ -148,10 +148,12 @@
 
                 Object.keys(this.filters).forEach(filterID => {
 
+                    let filter = this.getFilter(filterID);
+
                     // Don't include range values if they're unchanged (at min / max values)
-                    if (this.filterData[filterID].type === 'range'
-                        && this.filterData[filterID].min === this.filters[filterID][0]
-                        && this.filterData[filterID].max === this.filters[filterID][1]) {
+                    if (filter.type === 'range'
+                        && filter.min === this.filters[filterID][0]
+                        && filter.max === this.filters[filterID][1]) {
                         return;
                     }
 
@@ -182,6 +184,11 @@
 
         methods: {
 
+            getFilter(id) {
+                // Find the filter by its ID in the array of filters
+                return this.filterData.find(filter => filter.id === parseInt(id)) || {};
+            },
+
             updateFilters() {
                 let $this = this;
                 let endpoint = `/ajax/filtercatalog/?productType=${this.productType}&${this.filterQuerystring}`;