Site Search result

When you search on site search module, curently it pulles out blog's title, URL and page description. 
I hope I can include blog page's  featured image and blog tag as well in the result page. 

This will make customer to find article easier.

HubSpot updates
8 Replies
HubSpot Employee
HubSpot Employee

 The site search returns more fields for you to use than the default. You just have to build the HTML around them.

jmarcello
Regular Contributor

@mcoley 

What are the other return fields available and how do we access them? Is there a list of available objects some where. I am making some progress by cloning the search result module into a custom module and editing the code as follows.

 

Note I am trying to get the feature image URL, and adding to the existing function to query and output the result:

 

PARTIAL JS (the function related to outputting the HTML for each search result)

 

function addResult(title, url, description, WHAT GOES HERE ?) {
var newResult = document.importNode(resultTemplate.content, true);

newResult.querySelector('.hs-search-results__title').innerHTML = title;
newResult.querySelector('.hs-search-results__title').href = url;
newResult.querySelector('.hs-search-results__description').innerHTML = description;

/* start new code here */
Result.querySelector('.hs-search-results__featured').src=WHAT GOES HERE ?
/* end new code here */

resultsSection.appendChild(newResult);
}

HTML
<div class="hs-search-results">
<template class="hs-search-results__template">
<li>

<!-- start new output -->
<img class="hs-search-results__featured" src="JS should output here from above function" alt="" />
<!-- end new output -->

<a href="#" class="hs-search-results__title">Content Title</a>
<p class="hs-search-results__description">Description</p>
</li>
</template>
<ul id="hsresults" class="hs-search-results__listing"></ul>
<div class="hs-search-results__pagination" data-search-path="{{ site_settings.content_search_results_page_path }}">
<a href="" class="hs-search-results__prev-page"></a>
<a href="" class="hs-search-results__next-page"></a>
</div>
</div>

HubSpot Employee
HubSpot Employee

Easiest way to see is check the response from the search API. For example: https://www.hubspot.com/_hcms/search?term=hubspot

jmarcello
Regular Contributor

I have no idea what that means @mcoley

Could you possible answer my direct question above or provide a much more specifc answer with a detailed methodology of how to check the response from the Search API?

Shouldn't the documentation include all available objects?

HubSpot Employee
HubSpot Employee

@jmarcello The documentation here is a bit out of date as it doesn't have an example with a featured image URL in the response. If you take a look at the response from the search API https://www.hubspot.com/_hcms/search?term=hubspot there is a field called `featuredImageUrl`, so your modify addResult() as so:

`function addResult(title, url, description, featuredImageUrl)`

 

And `fillResults()` should look like:

function fillResults(results) {
 results.results.forEach(function(result, i){
  addResult(result.title, result.url, result.description, result.featuredImageUrl);
 });
}

jmarcello
Regular Contributor

Thanks, that worked... but I have another obstacle...

I am trying to add a surrounding <a> element around the image and use the result.url for both the the <a> element on the image and the <a> element included in the <h2> title.

 

Any ideas on how to accomplish this... here is what I have done so far.

The <li> for the results does not execute when I try to reuse the "url".

function addResult(title, url, description, featuredImageUrl) {
            var newResult = document.importNode(resultTemplate.content, true);
    
            newResult.querySelector('.hs-search-results__title').innerHTML = title;
            newResult.querySelector('.hs-search-results__title').href = url;
            newResult.querySelector('.hs-search-results__description').innerHTML = description;
            newResult.querySelector('.hs-search-results__featured').src=featuredImageUrl;
            resultsSection.appendChild(newResult);
        }
        function fillResults(results) {
            results.results.forEach(function(result, i){
                addResult(result.title, result.url, result.description, result.featuredImageUrl);
            });
        }
        function emptyPagination() {

 

 

<div class="hs-search-results">
<template class="hs-search-results__template">
<li>
<div class="post-top clearfix">
<div class="hs-featured-image-wrapper">
<a class="hs-featured-image-link hs-search-results__title" href="#">
<img class="hs-featured-image hs-search-results__featured" src="" alt="" />
</a>
</div>
<div class="post-header">
<h3><a class="hs-search-results__title" href="#">Content Title</a></h3>
<div class="post-content hs-search-results__description">Description</div>
</div>
</div>
</li>
</template>
<ul id="hsresults" class="hs-search-results__listing"></ul>
<div class="hs-search-results__pagination" data-search-path="{{ site_settings.content_search_results_page_path }}">
<a href="" class="hs-search-results__prev-page"></a>
<a href="" class="hs-search-results__next-page"></a>
</div>
</div>

 

 

davidecepar
New Contributor

Hi @jmarcello how did you get it works? I could not get image src, debugger always says:
"ReferenceError: featuredImageUrl is not defined".

The code is the same as your:

 

function addResult(title, url, description, featuredImageUrl) {
            var newResult = document.importNode(resultTemplate.content, true);
    
            newResult.querySelector('.hs-search-results__title').innerHTML = title;
            newResult.querySelector('.hs-search-results__title').href = url;
            newResult.querySelector('.hs-search-results__description').innerHTML = description;
            newResult.querySelector('.hs-search-results__featured').src=featuredImageUrl;
            resultsSection.appendChild(newResult);
        }
        function fillResults(results) {
            results.results.forEach(function(result, i){
                addResult(result.title, result.url, result.description, result.featuredImageUrl);
            });
        }

And that html

<template class="hs-search-results__template">
    <article class="post-item">
      <div class="hs-featured-image-wrapper">
        <a href="#" class="hs-search-results__title"><img class="hs-featured-image hs-search-results__featured" src="" /></a>
      </div>
      <div class="post-header">
        <h2><a href="#" class="hs-search-results__title">Content Title</a></h2>
      </div>
      <p class="hs-search-results__description">Description</p>
    </article>
  </template>
  <ul id="hsresults" class="hs-search-results__listing post-listing"></ul>
  <div class="hs-search-results__pagination" data-search-path="{{ site_settings.content_search_results_page_path }}">
    <a href="" class="hs-search-results__prev-page"></a>
    <a href="" class="hs-search-results__next-page"></a>
  </div>

 

RyanPatterson
Regular Contributor

@davidecepar I ran into the same issue as you, it is because you changed the <li> to <article> and then wrappers around parts of the result. The code inside the template tag is the "loop" code and is appended to the results <ul> below it.  When I got the initial error, it highlighted a section of code that was targeting the direct child of the li element. So at least for me, if I added a wrapper around the image it wouldn't work. The classes being targeted have to be directly nested in the <li> with no other parents containers. But like I said, I not 100% sure, working in Hubspot is relatively new to me. Not sure how @jmarcello got his to work with the wrapping div tags around the image. 

 

But I actually have a question I'm hoping someone can help with. Is there a way to do a conditional check for the featured image? I got the image to display in the results template, but since I had to hardcode the image tag, if the post doesn't have an image then it shows the little broken image icon thingy. I know there has to be a way, I'm just not familiar enough with how they're doing this to make the adjustment in the search results module code.

 

Thanks,