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:
@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).
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.
@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).
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!
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
Apr 29, 20221:56 AM - edited Apr 29, 20223:09 AM
Contributor
How to use javascript variables in hubspot
SOLVE
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