Search Results: fix navigation issues

assets/js/theme/search.js

@@ -33,11 +33,7 @@ export default class Search extends CatalogPage {
         return nodeData;
     }
 
-    showProducts() {
-        const url = urlUtils.replaceParams(window.location.href, {
-            section: 'product',
-        });
-
+    showProducts(navigate = true) {
         this.$productListingContainer.removeClass('u-hiddenVisually');
         this.$facetedSearchContainer.removeClass('u-hiddenVisually');
         this.$contentResultsContainer.addClass('u-hiddenVisually');
@@ -48,14 +44,19 @@ export default class Search extends CatalogPage {
         $('[data-product-results-toggle]').removeClass('navBar-action');
         $('[data-product-results-toggle]').addClass('navBar-action-color--active');
 
-        urlUtils.goToUrl(url);
-    }
+        if (!navigate) {
+            return;
+        }
 
-    showContent() {
-        const url = urlUtils.replaceParams(window.location.href, {
-            section: 'content',
+        const searchData = $('#search-results-product-count span').data();
+        const url = (searchData.count > 0) ? searchData.url : urlUtils.replaceParams(searchData.url, {
+            page: 1,
         });
 
+        urlUtils.goToUrl(url);
+    }
+
+    showContent(navigate = true) {
         this.$contentResultsContainer.removeClass('u-hiddenVisually');
         this.$productListingContainer.addClass('u-hiddenVisually');
         this.$facetedSearchContainer.addClass('u-hiddenVisually');
@@ -66,6 +67,15 @@ export default class Search extends CatalogPage {
         $('[data-content-results-toggle]').removeClass('navBar-action');
         $('[data-content-results-toggle]').addClass('navBar-action-color--active');
 
+        if (!navigate) {
+            return;
+        }
+
+        const searchData = $('#search-results-content-count span').data();
+        const url = (searchData.count > 0) ? searchData.url : urlUtils.replaceParams(searchData.url, {
+            page: 1,
+        });
+
         urlUtils.goToUrl(url);
     }
 
@@ -102,9 +112,9 @@ export default class Search extends CatalogPage {
         });
 
         if (this.$productListingContainer.find('li.product').length === 0 || url.query.section === 'content') {
-            this.showContent();
+            this.showContent(false);
         } else {
-            this.showProducts();
+            this.showProducts(false);
         }
 
         const validator = this.initValidation($searchForm)
@@ -188,16 +198,20 @@ export default class Search extends CatalogPage {
 
     initFacetedSearch() {
         const $productListingContainer = $('#product-listing-container');
+        const $contentListingContainer = $('#search-results-content');
         const $facetedSearchContainer = $('#faceted-search-container');
         const $searchHeading = $('#search-results-heading');
         const $searchCount = $('#search-results-product-count');
+        const $contentCount = $('#search-results-content-count');
         const productsPerPage = this.context.searchProductsPerPage;
         const requestOptions = {
             template: {
                 productListing: 'search/product-listing',
+                contentListing: 'search/content-listing',
                 sidebar: 'search/sidebar',
                 heading: 'search/heading',
                 productCount: 'search/product-count',
+                contentCount: 'search/content-count',
             },
             config: {
                 product_results: {
@@ -208,10 +222,19 @@ export default class Search extends CatalogPage {
         };
 
         this.facetedSearch = new FacetedSearch(requestOptions, (content) => {
-            $productListingContainer.html(content.productListing);
-            $facetedSearchContainer.html(content.sidebar);
             $searchHeading.html(content.heading);
-            $searchCount.html(content.productCount);
+
+            const url = Url.parse(window.location.href, true);
+            if (url.query.section === 'content') {
+                $contentListingContainer.html(content.contentListing);
+                $contentCount.html(content.contentCount);
+                this.showContent(false);
+            } else {
+                $productListingContainer.html(content.productListing);
+                $facetedSearchContainer.html(content.sidebar);
+                $searchCount.html(content.productCount);
+                this.showProducts(false);
+            }
 
             $('body').triggerHandler('compareReset');
 

templates/components/search/content-count.html

@@ -0,0 +1,3 @@
+<span data-url="{{forms.search.content_url}}" data-count="{{pagination.content_results.total}}">
+    {{lang 'search.results.content_count' count=pagination.content_results.total}}
+</span>

templates/components/search/content-listing.html

@@ -0,0 +1,10 @@
+{{#if content_results}}
+    {{> components/search/content-sort-box sort=pagination.content_results.sort}}
+    <ul>
+        {{#each content_results}}
+            <strong><a href="{{url}}">{{{title}}}</a></strong>({{type}})
+            <p>{{{content}}}</p>
+        {{/each}}
+    </ul>
+    {{> components/common/paginator pagination.content_results reload=true}}
+{{/if}}

templates/components/search/product-count.html

@@ -1 +1,3 @@
-{{lang 'search.results.product_count' count=pagination.product_results.total}}
+<span data-url="{{forms.search.product_url}}" data-count="{{pagination.product_results.total}}">
+    {{lang 'search.results.product_count' count=pagination.product_results.total}}
+</span>

templates/pages/search.html

@@ -29,8 +29,8 @@
                 </a>
             </li>
             <li class="navBar-item">
-                <a class="navBar-action" href="{{forms.search.content_url}}" data-content-results-toggle>
-                    {{lang 'search.results.content_count' count=pagination.content_results.total}}
+                <a id="search-results-content-count" class="navBar-action" href="{{forms.search.content_url}}" data-content-results-toggle>
+                    {{>components/search/content-count}}
                 </a>
             </li>
             {{#unless product_results.faceted_search_enabled}}
@@ -53,16 +53,12 @@
 </section>
 
 <section class="page">
-    {{#if product_results.products}}
-        {{#if product_results.faceted_search_enabled}}
-            <aside class="page-sidebar{{#if forms.search.section '!=' 'product'}} u-hiddenVisually{{/if}}" id="faceted-search-container">
-                {{> components/faceted-search/index product_results}}
-            </aside>
-        {{/if}}
-        <main class="page-content">
-    {{else}}
-        <main class="page-content page-content--centered">
+    {{#if product_results.faceted_search_enabled}}
+        <aside class="page-sidebar{{#if forms.search.section '!=' 'product'}} u-hiddenVisually{{/if}}" id="faceted-search-container">
+            {{> components/faceted-search/index product_results}}
+        </aside>
     {{/if}}
+    <main class="page-content">
         {{#if forms.search.has_suggestions}}
             <div class="panel panel--large">
                 <div class="panel-body">
@@ -126,18 +122,9 @@ <h5 class="suggestion-title">{{lang 'forms.search.suggestions.title'}}</h5>
             </div>
         {{/if}}
 
-        {{#if content_results}}
-            <div id="search-results-content" {{#if forms.search.section '!=' 'content'}}class="u-hiddenVisually"{{/if}}>
-                {{> components/search/content-sort-box sort=pagination.content_results.sort}}
-                <ul>
-                    {{#each content_results}}
-                        <strong><a href="{{url}}">{{{title}}}</a></strong>({{type}})
-                        <p>{{{content}}}</p>
-                    {{/each}}
-                </ul>
-                {{> components/common/paginator pagination.content_results reload=true}}
-            </div>
-        {{/if}}
+        <div id="search-results-content" {{#if forms.search.section '!=' 'content'}}class="u-hiddenVisually"{{/if}}>
+            {{> components/search/content-listing}}
+        </div>
 
         <div id="product-listing-container" {{#if forms.search.section '!=' 'product'}}class="u-hiddenVisually"{{/if}}>
             {{> components/search/product-listing}}