日本語コミュニティーへようこそ!このチャンネルは現在ベータ版です。

詳細はこちらをご覧ください。

Search Input Suggestion + See More Results

解決
一般投稿者

Wondering if it is possible to add a link "See all Results" to the hs-search-field__suggestions results in the Search Input module. So it would show the top suggestions and then below it you could click to see more, incase they don't hit enter and think that there are only 3 results.

 

Thanks

返信
0 いいね!
承認済みベストアンサー

受理された解決策
Highlighted
常連アドバイザー

Hi there!

 

In the Design Tools, if you find the "Site Search Input" module, you should be able to clone and customise it. 

 

In the JavaScript section you'll see the following: 

 

  fillSearchResults = function(response){
    var items = [];
items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" ); response.results.forEach(function(val, index) { items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" ); });

The first items.push sets the "Results for", then there's a loop with the results after which you can add another items.push with your "See More" option, like this: 

 

  fillSearchResults = function(response){
    var items = [];
    items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" );
    response.results.forEach(function(val, index) {
      items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" );
    });
    items.push( "<li id='see-more'><a href='/hs-search-results?term=" + response.searchTerm+ "'><b>See More</b></a></li>" );

I've used <b>See More</b> to set it bold but you can replace that with your HTML and text. You can also use #see-more to style it in your CSS.

 

Note that I've used /hs-search-results for the URL but, if you've customised this in your settings under Website > Pages > System Pages where it says "Search results page URL" you'll want to update it accordingly.

 

UPDATE: I was due a blog post on my site anyway, so I added in this with just a little more detail - How to Customise your HubSpot Site Search Modules

 

I hope that helps!

 

Stephanie

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

2件の返信2
Highlighted
常連アドバイザー

Hi there!

 

In the Design Tools, if you find the "Site Search Input" module, you should be able to clone and customise it. 

 

In the JavaScript section you'll see the following: 

 

  fillSearchResults = function(response){
    var items = [];
items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" ); response.results.forEach(function(val, index) { items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" ); });

The first items.push sets the "Results for", then there's a loop with the results after which you can add another items.push with your "See More" option, like this: 

 

  fillSearchResults = function(response){
    var items = [];
    items.push( "<li id='results-for'>Results for \"" + response.searchTerm + "\"</li>" );
    response.results.forEach(function(val, index) {
      items.push( "<li id='result" + index + "'><a href='" + val.url + "'>" + val.title + "</a></li>" );
    });
    items.push( "<li id='see-more'><a href='/hs-search-results?term=" + response.searchTerm+ "'><b>See More</b></a></li>" );

I've used <b>See More</b> to set it bold but you can replace that with your HTML and text. You can also use #see-more to style it in your CSS.

 

Note that I've used /hs-search-results for the URL but, if you've customised this in your settings under Website > Pages > System Pages where it says "Search results page URL" you'll want to update it accordingly.

 

UPDATE: I was due a blog post on my site anyway, so I added in this with just a little more detail - How to Customise your HubSpot Site Search Modules

 

I hope that helps!

 

Stephanie

 


Stephanie O'Gay Garcia

HubSpot Design / Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

一般投稿者

Thanks

返信
0 いいね!