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

…d on search results page for News and Information tab (#1909)
bigcommerce · Nov 20, 2020 · 98a0068 · 98a0068
1 parent 7dcea42
commit 98a0068
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 4 deletions.
diff --git a/CHANGELOG.md b/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. [#1909](https://github.com/bigcommerce/cornerstone/pull/1909)
 - 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)

diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js
@@ -57,7 +57,7 @@ export default class Search extends CatalogPage {
         const url = (searchData.count > 0) ? searchData.url : urlUtils.replaceParams(searchData.url, {
             page: 1,
         });
-
+        console.log('showProducts url', url);
         urlUtils.goToUrl(url);
     }
 
@@ -83,6 +83,7 @@ export default class Search extends CatalogPage {
             page: 1,
         });
 
+        console.log('showContent url', url);
         urlUtils.goToUrl(url);
     }
 
@@ -132,8 +133,43 @@ export default class Search extends CatalogPage {
         $($tabsCollection.get(nextTabIdx)).focus().trigger('click');
     }
 
+    getUrlParameter(name) {
+        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+        var results = regex.exec(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: 'text',
+            class: 'aria-description--hidden',
+            tabindex: -1,
+        });
+
+        $('[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]');

diff --git a/templates/components/category/sort-box.html b/templates/components/category/sort-box.html
@@ -16,4 +16,3 @@
         </select>
     </div>
 </fieldset>
-
diff --git a/templates/components/products/filter.html b/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>
diff --git a/templates/components/search/content-sort-box.html b/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>