I am hoping to create a more sophisticated blog post filter than what is available. I do not want users to leave the current page when filtering the blog posts.
I also do not want to simply hide/show posts with jQuery based on the topic because say I have post listings paginated by 10, then I'm really only filtering 10 posts and not all posts. Some topics may not appear in the first 10 posts.
What I am thinking is I could create a module that would accept URL parameters like so:
{% set topic = request.query_dict.filter %}
{% if topic %}
{% set posts = blog_recent_tag_posts('my_blog_id', topic) %}
{% else %}
{% set posts = blog_recent_posts('my_blog_id') %}
{% endif %}
{% for content in posts %}
{# SHOW POST CONTENT IN HERE #}
{% endfor %}
and then use AJAX to call that module when the filter is used:
$('a#filter').click(function(e) {
var filterVALUE = $(this).attr('filter-value');
$.ajax({
type: 'GET',
url: '/modules/my-module-url',
data: {
filter: filterValue
},
success:function(data){
// SUCCESS LETS POST THE POSTS!
}
});
});
but the problem I am finding is that it doesn't seem you can just call a module via AJAX. Is that the case?
Am I going about this all wrong and should I be using the Hubspot API? Seems like I should be able to use native Hubspot functions to get posts so perhaps there is a better way to do this?
May 28, 20214:46 AM - edited May 28, 20214:46 AM
Key Advisor
Set Up A Custom Filter for Blog Posts by Topic
SOLVE
Yeah, maybe HS adding more to the exceptions list e.g. GET requests to Blog posts/web pages etc. I was thinking of suggesting you use the Search API (can be used client side), but a search term is required sadly.
I have to say -- that is a huge disappointment. It seems odd to have to set up an external proxy server to query my own posts after the page has loaded within a native website in Hubspot.
If there was a way to execute standalone .hubl files or HubL asynchronously, something along those lines, it would certainly add much desired functionality.
I appreciate the help and insight @piersg . Hoping those features get rolled out someday.
Ah, I forgot about the Hubspot API CORS policy. As per @Willson : The HubSpot APIs do not supportsupport CORS AJAX requests. Making the request client-side using JavaScript would expose any authentication you're using for the request.
In order to use JavaScript/AJAX, you would need to make the request (excluding any authentication) to an external server that could then add the needed authentication and make requests to HubSpot's APIs server-side.
So, looking at the docs for the CMS API V3, I should be able to just use my API key to query posts and then I have to filter through them by tag? Is that the most efficient way? There is no params to pass for a specific tag is there.... ?
Also, what needs to be done on my end to allow CORS on my own domain/application? If I do a quick example like below I automatically get the "XMLHttpRequest at xxxx from origin xxxx has been blocked by CORS policy" error.
$(document).ready(function() {
$.ajax('https://api.hubapi.com/cms/v3/blogs/posts?hapikey=XXXXXXXXXXXXXXXXXX')
.then(
function success(response) {
console.log(response);
},
function fail(data, status) {
console.log('Request failed. Returned status of',
status);
}
);
});
...but this is my natively hosted Hubspot CMS website and a module within it that is calling the API.
Can this be adjusted in settings to allow my own domain or something?
Thanks for your help @dennisedson@piersg . I kinda figured that was the route I had to go. Seems odd to use that method when I am building out the website and that functionalilty through the native application, whereas I would normally look to use an API for an external application. It would be great to mix server-side + client side with fetch or AJAX one day.
May 24, 20216:45 AM - edited May 24, 20217:06 AM
Key Advisor
Set Up A Custom Filter for Blog Posts by Topic
SOLVE
Hi @squatchcreative, no you can't use AJAX to call a module. That's mixing server side (HubL modules) and client side (JS). I think your best bet for this would be to use the Blog Posts API, as you hinted, and then return results where the tag id is the selected filter (and state = published/ etc.). Using JS to retrieve this info can return as many posts as you want, set by the limit; you can set the limit to whatever e.g. 500 or something. You wouldn't be limited to filtering what was already on the page.