fix(storefront): BCTHEME-85 “Sort by” dropdown selection not reflecte…

…d on search results page for News and Information tab (#1910)

CHANGELOG.md

@@ -3,6 +3,7 @@
 - HTML Entity displayed as is via system/error message on a Storefront. [#1888](https://github.com/bigcommerce/cornerstone/pull/1888)
 
 ## Draft
+- “Sort by” dropdown selection not reflected on search results page for News and Information tab. [#1910](https://github.com/bigcommerce/cornerstone/pull/1910)
 - Shoppers are not anchor-linked to reviews on PDPs if product description tabs are enabled. [#1883](https://github.com/bigcommerce/cornerstone/pull/1883)
 - Fixed text contrast for brand name on Cart page. [#1882](https://github.com/bigcommerce/cornerstone/pull/1882)
 - Add sufficient contrast for Upsell Banners in Cornerstone Theme according to AA Standard. [#1891](https://github.com/bigcommerce/cornerstone/pull/1891)

assets/js/theme/search.js

@@ -132,8 +132,41 @@ export default class Search extends CatalogPage {
         $($tabsCollection.get(nextTabIdx)).focus().trigger('click');
     }
 
+    getUrlParameter(queryParam) {
+        const queryParamKey = queryParam.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+        const regex = new RegExp(`[\\?&]${queryParamKey}=([^&#]*)`);
+        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>