fix(storefront): BCTHEME-85 “Sort by” dropdown selection not reflected on search results page for News and Information tab

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- “Sort by” dropdown selection not reflected on search results page for News and Information tab. [#1910](https://github.com/bigcommerce/cornerstone/pull/1910)
 - Header content placed out of the header block on mobile. [#1908](https://github.com/bigcommerce/cornerstone/pull/1908)
 - Fixed an issue with dispaying options that are out of stock for product on Cart. [#1911](https://github.com/bigcommerce/cornerstone/pull/1911)
 - Selecting product options doesn't update image on PDP in Internet Explorer. [#1913](https://github.com/bigcommerce/cornerstone/pull/1913)

assets/js/theme/search.js

@@ -132,8 +132,37 @@ export default class Search extends CatalogPage {
         $($tabsCollection.get(nextTabIdx)).focus().trigger('click');
     }
 
+    getUrlParameter(queryParam) {
+        const regex = new RegExp(`[\\?&]${queryParam}=([^&#]*)`);
+        const results = regex.exec(window.location.search);
+        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    }
+
+    setupSortByQuerySearchParam() {
+        const searchQuery = this.getUrlParameter('search_query');
+
+        if (searchQuery.length === 0) return;
+
+        const $baseInput = $('<input/>').attr('type', 'hidden');
+
+        $('[data-sort-by]').each((idx, form) => {
+            const $form = $(form);
+            $form.append(
+                $baseInput.clone().attr({
+                    name: 'search_query',
+                    value: searchQuery,
+                }),
+                $baseInput.clone().attr({
+                    name: 'section',
+                    value: $form.data('sort-by'),
+                }),
+            );
+        });
+    }
+
     onReady() {
         compareProducts(this.context.urls);
+        this.setupSortByQuerySearchParam();
 
         const $searchForm = $('[data-advanced-search-form]');
         const $categoryTreeContainer = $searchForm.find('[data-search-category-tree]');

templates/components/category/sort-box.html

@@ -16,4 +16,3 @@
         </select>
     </div>
 </fieldset>
-

templates/components/products/filter.html

@@ -1,3 +1,3 @@
-<form class="actionBar" method="get" data-sort-by>
+<form class="actionBar" method="get" data-sort-by="product">
     {{> components/category/sort-box sort=sort}}
 </form>

templates/components/search/content-sort-box.html

@@ -1,4 +1,4 @@
-<form class="actionBar" method="get" data-sort-by>
+<form class="actionBar" method="get" data-sort-by="content">
     <fieldset class="form-fieldset actionBar-section">
         <div class="form-field">
             <label class="form-label" for="sort">{{lang 'common.sorter.sort_by'}}</label>