I’m pretty sure this topic has already been discussed elsewhere, but I can’t quite find the information.
I am trying to do the typical search filter so that the server shows to the client the blog data based on the tags that the client has selected. For example:
<select name=“cars” id=“cars”>
<option value=“volvo”>Volvo</option>
<option value=“saab”>Saab</option>
</select>
{% set pop_posts = blog_popular_posts(“default”, 5, [“volvo”, “saab”], “popular_past_month”) %}
The client selects “Saab” and should then receive the blog posts corresponding to that selected tag “Saab”.
How can I find information on how to do this on Hubspot?
THANKS
is there a reason why you don’t want to use the “blog-tag-filter” module which comes (for example) with the theme “session” or any other default HubSpot theme. You could copy/paste it to your theme and modify it to your need
Yes, because i want to do some other filters in my custom search filter and I need to show the blog post on the same page, not on another page like “blog-tag-filter” module. I need something like AJAX.
But thank you !! i will review this module.
I have this listing and I need to load different post in the function of the tag or other filters that the user select
@JVallejo7 So if you really want a JavaScript solution (I would advise going for a React or Vue overview), you can get all blog posts with an API call using the content search API. This does not need any authentication. If you check the docs, you can pass a search term that causes the API to search all content on the blog post (or page). You can however limit this to a specific property like ‘tag’, which causes the API to only search for blog posts that have that specific tag. You can use the following URL (replace <PortalID> for your portal ID). https://api.hubapi.com/contentsearch/v2/search?portalId=\&term=saab&type=BLOG_POST&property=tag
So in your case, you can use the following params:
This post seems to detail a similar problem with the search api and suggests it’s something in the theme setup. I’m not entirely sure off the top of my head where that’d be set. But hopefully this stears you in the right direction!
Building off of @Teun’s suggestion of using the content search API, I put something quick together that I think achieves the basics of what you’re looking for:
{% set my_tags = blog_tags('default', 250) %}
<select onchange="searchResults()" name="blog_tags" id="blog_tags">
{% for item in my_tags %}
<option value="{{item.name}}">{{ item.name }}</option>
{% endfor %}
</select>
<div id="search-results"></div>
{%require_js %}
<script>
function searchResults() {
var selectedTag = document.getElementById('blog_tags').value;
$.ajax({
url: 'https://api.hubapi.com/contentsearch/v2/search?portalId={{ hub_id }}&property=tag&term='+selectedTag,
type: 'GET',
dataType: 'text',
success: function(data) {
var json_result = JSON.parse(data);
let text = "";
const posts = json_result.results;
posts.forEach(printPosts);
document.getElementById('search-results').innerHTML = text;
function printPosts(item, index) {
text += index + ": " + item['title'] + "<br>";
}
}
});
}
searchResults();
</script>
{%end_require_js %}
I have this error in the console when i try to use this code with the URL that you sent me
Access to XMLHttpRequest at 'https://hubspot-developers-18iodbe-25237078.hs-sites-eu1.com/_hcms/search?portalId=25237078&&property=tag&term=events' from origin 'https://25237078.hubspotpreview-eu1.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
