CMS Development

JVallejo7
Contributor

How to use javascript variables in hubspot

SOLVE

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

0 Upvotes
3 Accepted solutions
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to use javascript variables in hubspot

SOLVE

@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=<PortalID>&term=saab&type=BLOG_POST&property=tag

 

So in your case, you can use the following params: 

 

&term=saab
&type=BLOG_POST
&property=tag

 

Demo URL (this only has one blog post))



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


View solution in original post

BarryGrennan
Solution
Top Contributor

How to use javascript variables in hubspot

SOLVE

Hi @JVallejo7, I'm not fully clear what it is in your setup that's causing the standard api url to fail. But it seems if you change your endpoint to your domain instead you'll get the results you're looking for
https://hubspot-developers-18iodbe-25237078.hs-sites-eu1.com/_hcms/search?portalId=25237078&property...

 

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!

View solution in original post

JVallejo7
Solution
Contributor

How to use javascript variables in hubspot

SOLVE
0 Upvotes
10 Replies 10
BarryGrennan
Top Contributor

How to use javascript variables in hubspot

SOLVE

Hi @JVallejo7

 

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 %}

 

 

You can further shape your results using the parameters here: https://legacydocs.hubspot.com/docs/methods/content/search-for-content

 

JVallejo7
Contributor

How to use javascript variables in hubspot

SOLVE

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.

 

0 Upvotes
JVallejo7
Solution
Contributor

How to use javascript variables in hubspot

SOLVE

I have noticed that hubspot doesn't support AJAX request

https://stackoverflow.com/questions/48577247/hubspot-api-not-working-due-to-cors

0 Upvotes
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to use javascript variables in hubspot

SOLVE

@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=<PortalID>&term=saab&type=BLOG_POST&property=tag

 

So in your case, you can use the following params: 

 

&term=saab
&type=BLOG_POST
&property=tag

 

Demo URL (this only has one blog post))



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


JVallejo7
Contributor

How to use javascript variables in hubspot

SOLVE

Thank you very much for your replies

 

I am trying to check your codes but I don't know what´s going on:

This URL doesn't send me any response but I have post with events tag term

https://api.hubapi.com/contentsearch/v2/search?portalId=25237078&term=events&type=BLOG_POST&property...

 

http://hubspot-developers-18iodbe-25237078.hs-sites-eu1.com/blogreformermodificado/tag/events

0 Upvotes
JVallejo7
Contributor

How to use javascript variables in hubspot

SOLVE

I have the robots.txt enable to this use

JVallejo7_0-1651573209964.png

 

0 Upvotes
BarryGrennan
Solution
Top Contributor

How to use javascript variables in hubspot

SOLVE

Hi @JVallejo7, I'm not fully clear what it is in your setup that's causing the standard api url to fail. But it seems if you change your endpoint to your domain instead you'll get the results you're looking for
https://hubspot-developers-18iodbe-25237078.hs-sites-eu1.com/_hcms/search?portalId=25237078&property...

 

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!

JVallejo7
Contributor

How to use javascript variables in hubspot

SOLVE

THANK YOU !
how did you know in this domain it's gonna work? Any thoughts that you can teach me?
Thanks again!

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to use javascript variables in hubspot

SOLVE

Hi @JVallejo7

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

 

 

best, 

Anton

Anton Bujanowski Signature
JVallejo7
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

JVallejo7_0-1651216017441.png

 

0 Upvotes