topic Re: How to use javascript variables in hubspot in CMS Development

How to use javascript variables in hubspot

JVallejo7 — Thu, 28 Apr 2022 18:02:46 GMT

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

Re: How to use javascript variables in hubspot

Anton — Thu, 28 Apr 2022 18:56:21 GMT

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

Re: How to use javascript variables in hubspot

JVallejo7 — Fri, 29 Apr 2022 07:09:06 GMT

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

Re: How to use javascript variables in hubspot

Teun — Fri, 29 Apr 2022 19:00:30 GMT

@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))

Re: How to use javascript variables in hubspot

BarryGrennan — Mon, 02 May 2022 18:36:22 GMT

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

Re: How to use javascript variables in hubspot

JVallejo7 — Tue, 03 May 2022 07:54:31 GMT

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=tag

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

Re: How to use javascript variables in hubspot

JVallejo7 — Tue, 03 May 2022 10:20:25 GMT

I have the robots.txt enable to this use

Re: How to use javascript variables in hubspot

BarryGrennan — Tue, 03 May 2022 16:27:52 GMT

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=tag&term=events

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!

Re: How to use javascript variables in hubspot

JVallejo7 — Wed, 04 May 2022 06:38:46 GMT

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

Re: How to use javascript variables in hubspot

JVallejo7 — Wed, 04 May 2022 08:38:32 GMT

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.

Re: How to use javascript variables in hubspot

JVallejo7 — Wed, 04 May 2022 09:31:16 GMT

I have noticed that hubspot doesn't support AJAX request

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