Done #3073 @3.5

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index e4148c5e550539fd100fb7e760f7a93f0e953488..2097cd5efba5abd14902926212dec97d042324cc 100644 (file)
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -166,6 +166,19 @@
             }
         }),
 
+        watch: {
+            // Whenever a filter is changed, update the querystring
+            filters: {
+                deep: true,
+
+                handler(oldFilters, newFilters) {
+                    if (this.filterQuerystring !== '') {
+                        history.replaceState(newFilters, '', '?' + this.filterQuerystring);
+                    }
+                }
+            }
+        },
+
         computed: {
 
             resultsCount() {
@@ -201,7 +214,9 @@
                         return;
                     }
 
-                    filter_list.push(`filter[${filterID}]=` + this.filters[filterID].join(';'));
+                    if (this.filters[filterID].length > 0) {
+                        filter_list.push(`filter[${filterID}]=` + this.filters[filterID].join(';'));
+                    }
                 });
 
                 return filter_list.join('&');
@@ -224,6 +239,7 @@
             });
 
             this.filters = filters;
+            this.parseQuerystring();
         },
 
         mounted() {
@@ -243,6 +259,31 @@
 
         methods: {
 
+            parseQuerystring() {
+                const $this = this;
+                const querystring = location.search.substring(1); // Get querystring minus first character (?)
+
+                if (querystring.length > 0) {
+                    querystring.split('&').forEach(function(pair) {
+
+                        let [key, value] = pair.split('=');
+
+                        // Key will be in the format of 'filter[x]' where 'x' is a number
+                        // We only need the numeric ID of the filter so strip everything else
+                        key = key.replace(/\D/g, '');
+
+                        // Values are a string delimited by ';' so split them into array
+                        // Values may be a number or a string ('-') so don't try to convert them to integers
+                        value = value.split(';');
+
+                        // Update the actual filter data
+                        $this.filters[key] = value;
+                    });
+
+                    $this.updateFilters();
+                }
+            },
+
             getFilter(id) {
                 // Find the filter by its ID in the array of filters
                 return this.filterData.find(filter => filter.id === parseInt(id)) || {};
@@ -255,29 +296,12 @@
                 axios.get(endpoint)
                     .then(function (response) {
                         $this.matches = response.data.results;
-                        //$this.filterProducts();
                     })
                     .catch(function (error) {
                         console.error('Error filtering products', error);
                     });
             },
 
-            // filterProducts() {
-            //     let matches = Object.values(this.matches.hits);
-            //
-            //     this.$slots.default[0].children.forEach(child => {
-            //         if (child.tag) { // Ensure it's a tag and not an empty text element
-            //             let product = child.elm;
-            //             let ID = parseInt(product.dataset.productId);
-            //             if (matches.includes(ID)) {
-            //                 product.classList.remove('hidden');
-            //             } else {
-            //                 product.classList.add('hidden');
-            //             }
-            //         }
-            //     });
-            // },
-
             productVisible(id) {
                 return Object.values(this.matches.hits).includes(id)
             },