DF-759: FIX Rebuild event sort filter (#1372)

nationalarchives · Oct 11, 2023 · f4bc7eb · f4bc7eb
1 parent fa305a0
commit f4bc7eb
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 28 deletions.
diff --git a/scripts/src/modules/analytics/search/search_sort_filters_tracking.js b/scripts/src/modules/analytics/search/search_sort_filters_tracking.js
@@ -3,48 +3,112 @@ import push_to_data_layer from "./../push_to_data_layer";
 const getSortBy = () => {
     // get filters after DOM has loaded and they have rendered on page
     window.addEventListener("load", () => {
-        var selectElement = document.querySelector("#id_sort_by_desktop");
-        if (selectElement.checkVisibility() == false) {
-            selectElement = document.querySelector("#id_sort_by_mobile");
-        }
-
-        // check if selectElement exists to avoid errors on other search pages
-        if (selectElement) {
-            const selectOutput =
-                selectElement.options[selectElement.selectedIndex].value.trim();
+        var selectElementDesktop = document.querySelector(
+            "#id_sort_by_desktop",
+        );
+        var selectElementMobile = document.querySelector("#id_sort_by_mobile");
 
-            const sortBy = document.querySelector('[data-id="sort-form"]');
-            sortBy.setAttribute("data-search-filter-value", selectOutput);
+        if (selectElementDesktop) {
+            const selectOutputDesktop =
+                selectElementDesktop.options[
+                    selectElementDesktop.selectedIndex
+                ].value.trim();
+            var sortByDesktop = selectElementDesktop.parentElement;
+            sortByDesktop.setAttribute(
+                "data-search-filter-value",
+                selectOutputDesktop,
+            );
 
-            selectElement.onchange = function () {
-                let selectOutput =
+            selectElementDesktop.onchange = function () {
+                let selectOutputDesktop =
                     this.options[this.selectedIndex].value.trim();
+                if (selectOutputDesktop == "") {
+                    selectOutputDesktop = "relevance";
+                }
+                sortByDesktop.setAttribute(
+                    "data-search-filter-value",
+                    selectOutputDesktop,
+                );
+            };
+
+            const searchTypeDesktop =
+                sortByDesktop.getAttribute("data-search-type");
+            const searchBucketDesktop =
+                sortByDesktop.getAttribute("data-search-bucket");
+
+            sortByDesktop.addEventListener("submit", (e) => {
+                e.preventDefault();
+
+                let searchNameDesktop = sortByDesktop.getAttribute(
+                    "data-search-filter-name",
+                );
+                let searchValueDesktop = sortByDesktop.getAttribute(
+                    "data-search-filter-value",
+                );
 
-                sortBy.setAttribute("data-search-filter-value", selectOutput);
+                let filterDataDesktop = {
+                    event: "sort-results",
+                    search_type: searchTypeDesktop || "",
+                    search_bucket: searchBucketDesktop || "",
+                    search_filter_name: searchNameDesktop || "",
+                    search_filter_value: searchValueDesktop || "relevance",
+                };
+
+                push_to_data_layer(filterDataDesktop);
+
+                sortByDesktop.submit();
+            });
+        }
+
+        if (selectElementMobile) {
+            const selectOutputMobile =
+                selectElementMobile.options[
+                    selectElementMobile.selectedIndex
+                ].value.trim();
+            var sortByMobile = selectElementMobile.parentElement;
+            sortByMobile.setAttribute(
+                "data-search-filter-value",
+                selectOutputMobile,
+            );
+
+            selectElementMobile.onchange = function () {
+                let selectOutputMobile =
+                    this.options[this.selectedIndex].value.trim();
+                if (selectOutputMobile == "") {
+                    selectOutputMobile = "relevance";
+                }
+                sortByMobile.setAttribute(
+                    "data-search-filter-value",
+                    selectOutputMobile,
+                );
             };
 
-            const searchType = sortBy.getAttribute("data-search-type");
-            const searchBucket = sortBy.getAttribute("data-search-bucket");
+            const searchTypeMobile =
+                sortByMobile.getAttribute("data-search-type");
+            const searchBucketMobile =
+                sortByMobile.getAttribute("data-search-bucket");
 
-            sortBy.addEventListener("submit", (e) => {
+            sortByMobile.addEventListener("submit", (e) => {
                 e.preventDefault();
 
-                let searchName = sortBy.getAttribute("data-search-filter-name");
-                let searchValue = sortBy.getAttribute(
+                let searchNameMobile = sortByMobile.getAttribute(
+                    "data-search-filter-name",
+                );
+                let searchValueMobile = sortByMobile.getAttribute(
                     "data-search-filter-value",
                 );
 
-                let filterData = {
+                let filterDataMobile = {
                     event: "sort-results",
-                    search_type: searchType || "",
-                    search_bucket: searchBucket || "",
-                    search_filter_name: searchName || "",
-                    search_filter_value: searchValue || "relevance",
+                    search_type: searchTypeMobile || "",
+                    search_bucket: searchBucketMobile || "",
+                    search_filter_name: searchNameMobile || "",
+                    search_filter_value: searchValueMobile || "relevance",
                 };
 
-                push_to_data_layer(filterData);
+                push_to_data_layer(filterDataMobile);
 
-                sortBy.submit();
+                sortByMobile.submit();
             });
         }
     });

diff --git a/templates/search/blocks/search_filters.html b/templates/search/blocks/search_filters.html
@@ -1,7 +1,7 @@
 {% load search_tags %}
 
 <div class="search-sort-view">
-    <form method="GET" class="search-sort-view__form search-sort-view__mobile" data-id="sort-form" id="catalogue-sort-form-mobile" data-search-type="{{ view.search_tab }}" data-search-bucket="{{ buckets.current.label }}" data-search-filter-name="Sort results" data-search-filter-value="">
+    <form method="GET" class="search-sort-view__form search-sort-view__mobile" data-id="sort-form-mobile" id="catalogue-sort-form-mobile" data-search-type="{{ view.search_tab }}" data-search-bucket="{{ buckets.current.label }}" data-search-filter-name="Sort results" data-search-filter-value="">
         <h2 class="tna-heading search-sort-view__heading">
             <label for="id_sort_by_mobile">Sort by</label>
         </h2>

diff --git a/templates/search/blocks/search_sort_and_view_options.html b/templates/search/blocks/search_sort_and_view_options.html
@@ -2,7 +2,7 @@
 
 
 <div class="search-sort-view">
-    <form method="GET" class="search-sort-view__form search-sort-view__desktop" data-id="sort-form" id="catalogue-sort-form-desktop" data-search-type="{{ view.search_tab }}" data-search-bucket="{{ buckets.current.label }}" data-search-filter-name="Sort results" data-search-filter-value="">
+    <form method="GET" class="search-sort-view__form search-sort-view__desktop" data-id="sort-form-desktop" id="catalogue-sort-form-desktop" data-search-type="{{ view.search_tab }}" data-search-bucket="{{ buckets.current.label }}" data-search-filter-name="Sort results" data-search-filter-value="">
 
         <h2 class="tna-heading search-sort-view__heading">
            <label for="id_sort_by_desktop">Sort by</label>