topic Re: Blog tags not showing on individual list items on the search results listing. in CMS Development

Blog tags not showing on individual list items on the search results listing.

ScottD22 — Tue, 06 Oct 2020 14:15:20 GMT

I'm looking for some help to get blog tags added to my individual search results items. Just like in the blog listing template we can add the topics/tags, I need to replicate the samen the search results page. How can I do this?

Re: Blog tags not showing on individual list items on the search results listing.

dennisedson — Wed, 07 Oct 2020 17:52:45 GMT

Hey @ScottD22 !

Great question. If you look at the API doc for search, you will see a property called "tags". This is what you will want to target.

I know this fellow @stefen who is pretty good with building out things like this.

@stefen , now that I have teed this up for you, could you show @ScottD22 how you would build this out?

Thanks!

Re: Blog tags not showing on individual list items on the search results listing.

stefen — Wed, 07 Oct 2020 20:30:07 GMT

@ScottD22 like @dennisedson is saying, you can loop through the tags on your results page/module inside of your results loop. What I would probably do is first create a new array from all the blog post results, then add all the tags to that new array from each blog post, then de-dupe it, and finally print those tags to the page.

So in Javascript that would look something like this:

// create new array var allRelevantTags = []; // loop through all blog posts results.forEach(function(result, index){ // grab the blog post tags and add them to our tags array allRelevantTags.push.apply(allRelevantTags, result.tags) } // remove duplicate tags var uniqueRelevantTags = [...new Set(allRelevantTags)]; // print each tag to page uniqueRelevantTags.forEach(item, index) { document.body.appendChild(item); }

Hope that helps!

Re: Blog tags not showing on individual list items on the search results listing.

stefen — Wed, 07 Oct 2020 20:36:29 GMT

@ScottD22 My solution is really for showing all the tags outside of the posts. If you need to show the tags on each post/result it would be much easier. Basically, inside your loop where you are already looping through the results, add another loop to loop through the tags array. If you can show us the code you're using for your results I can be a better help. Thanks!

Re: Blog tags not showing on individual list items on the search results listing.

ScottD22 — Thu, 08 Oct 2020 08:12:25 GMT

Hey Stefen,

We just cloned the HS search results module in design tools. We want to show tags on each post/result. Just like you do on the blog listing template.

Re: Blog tags not showing on individual list items on the search results listing.

ScottD22 — Thu, 08 Oct 2020 09:07:01 GMT

Hey Stefen,

We have just cloned the search results from HubSpot in design tools. So the code if the default JS provided there. We want to show the tags on each post/result .

Re: Blog tags not showing on individual list items on the search results listing.

ScottD22 — Thu, 08 Oct 2020 09:25:08 GMT

Re: Blog tags not showing on individual list items on the search results listing.

stefen — Thu, 08 Oct 2020 20:05:44 GMT

@ScottD22 great! Here's the couple spots you should change:

First, in the HTML add a new paragraph to store the tags:

<a href="#" class="hs-search-results__title">Content Title</a> Description

Then, in the javascript, add the tags to the addResult function:

Finally, in the javascript update the fillResults function with the tags:

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

Let me know if that works!

Re: Blog tags not showing on individual list items on the search results listing.

ScottD22 — Fri, 09 Oct 2020 07:07:39 GMT

Thanks for this Stefen, I'm now getting an error of Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' in the console. No results are showing.

Re: Blog tags not showing on individual list items on the search results listing.

ScottD22 — Mon, 12 Oct 2020 10:30:27 GMT

if (tags) { tags.forEach(function(item,i){ newResult.querySelector('.hs-search-results__tags').innerHTML = tags; }); }

Hey guys,

I've managed to fix the issuses I was having, this was my solution thanks to Stefen and a little playing around.

As you can see I amended the code provided with this and it works.

Re: Blog tags not showing on individual list items on the search results listing.

MarinaTakahasi — Fri, 23 Feb 2024 04:10:13 GMT

The code works perfectly but did you know how to create each tag with link? Cause this print all tags like a sentence.

Thank you!