From 1d95e3b3450171f598528ec297594103dae8e41c Mon Sep 17 00:00:00 2001 From: J Bruni Date: Sun, 16 Feb 2020 18:37:44 -0300 Subject: [PATCH] Search Results: fix navigation issues --- assets/js/theme/search.js | 53 +++++++++++++------ .../components/search/content-count.html | 3 ++ .../components/search/content-listing.html | 10 ++++ .../components/search/product-count.html | 4 +- templates/pages/search.html | 33 ++++-------- 5 files changed, 64 insertions(+), 39 deletions(-) create mode 100644 templates/components/search/content-count.html create mode 100644 templates/components/search/content-listing.html diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js index 778284cbe2..9ee6f3a589 100644 --- a/assets/js/theme/search.js +++ b/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'); diff --git a/templates/components/search/content-count.html b/templates/components/search/content-count.html new file mode 100644 index 0000000000..d892c945ac --- /dev/null +++ b/templates/components/search/content-count.html @@ -0,0 +1,3 @@ + + {{lang 'search.results.content_count' count=pagination.content_results.total}} + diff --git a/templates/components/search/content-listing.html b/templates/components/search/content-listing.html new file mode 100644 index 0000000000..28d3d5c917 --- /dev/null +++ b/templates/components/search/content-listing.html @@ -0,0 +1,10 @@ +{{#if content_results}} + {{> components/search/content-sort-box sort=pagination.content_results.sort}} + + {{> components/common/paginator pagination.content_results reload=true}} +{{/if}} diff --git a/templates/components/search/product-count.html b/templates/components/search/product-count.html index 55e142d1a4..c59d73c799 100644 --- a/templates/components/search/product-count.html +++ b/templates/components/search/product-count.html @@ -1 +1,3 @@ -{{lang 'search.results.product_count' count=pagination.product_results.total}} + + {{lang 'search.results.product_count' count=pagination.product_results.total}} + diff --git a/templates/pages/search.html b/templates/pages/search.html index 0fa38ff0fc..95f67a1016 100644 --- a/templates/pages/search.html +++ b/templates/pages/search.html @@ -29,8 +29,8 @@
  • - - {{lang 'search.results.content_count' count=pagination.content_results.total}} + + {{>components/search/content-count}}
    • {{#unless product_results.faceted_search_enabled}} @@ -53,16 +53,12 @@
    - {{#if product_results.products}} - {{#if product_results.faceted_search_enabled}} - - {{/if}} -
    - {{else}} -
    + {{#if product_results.faceted_search_enabled}} + {{/if}} +
    {{#if forms.search.has_suggestions}}
    @@ -126,18 +122,9 @@
    {{lang 'forms.search.suggestions.title'}}
    {{/if}} - {{#if content_results}} -
    - {{> components/search/content-sort-box sort=pagination.content_results.sort}} -
      - {{#each content_results}} - {{{title}}}({{type}}) -

      {{{content}}}

      - {{/each}} -
    - {{> components/common/paginator pagination.content_results reload=true}} -
    - {{/if}} +
    + {{> components/search/content-listing}} +
    {{> components/search/product-listing}}