Building a reactive, checkbox filterable frontend for blog posts

[danbraun]

Hello, I am interested in building a dynamic front end for our HUBSPOT blog that is on our HUBSPOT website that will allow the user to update blog listings without page refresh. This will be based on interactions with check boxes.

Please let me know if this is not possible.

I see an API, but I do not want to build a 3rd party app on another website. I want to use our Hubspot website, working with modules in the Design Manager. It looks like CORS restrictions may prevent me from making API request from client javascript?

For an example of what I want to do, see this webpage: https://www.jff.org/resources/page/1/

Thanks very much!

[danbraun]

Thanks Himanshu, I think there might be a misunderstanding. I want to use the Hubpsot Blog on my Hubspot website. I do not have another blog on my own server (for which I could configure CORS policies).

This: 

url: 'blog.json'

does not look like a request to the Hubspot blog posts API. Do I misunderstand?

I've edited my original post for clarity.

[himanshurauthan]

Hello @danbraun 

his can be achieved using client-side technologies such as JavaScript and jQuery.

Regarding the use of an API on your Hubspot website, you can make API requests from client-side JavaScript code, but you need to make sure that CORS (Cross-Origin Resource Sharing) is properly configured on your server to allow these requests.

To build the filtering functionality for your blog, you can use JavaScript and jQuery to handle user interactions with the checkboxes and update the blog listings accordingly. You can start by adding event listeners to the checkboxes to detect when they are checked or unchecked, and then use jQuery to filter the blog listings based on the selected checkboxes.

For example, you could add a class to each blog post based on its category or tag, and then use jQuery to show or hide the posts based on the selected checkboxes. You could also use AJAX (Asynchronous JavaScript and XML) to load new blog listings dynamically without refreshing the page.

Here's a basic example to get you started:

Add checkboxes to your HTML:

<label><input type="checkbox" name="category" value="news"> News</label>
<label><input type="checkbox" name="category" value="events"> Events</label>
<label><input type="checkbox" name="category" value="resources"> Resources</label>

Add event listeners to the checkboxes using jQuery:

$('input[name="category"]').change(function() {
  // Filter blog listings based on selected checkboxes
});

Use jQuery to filter the blog listings based on the selected checkboxes:

$('input[name="category"]:checked').each(function() {
  var category = $(this).val();
  $('.blog-post.' + category).show();
});
$('.blog-post:not(.' + category + ')').hide();

Use AJAX to load new blog listings dynamically without refreshing the page:

$.ajax({
  url: 'blog.json',
  dataType: 'json',
  success: function(data) {
    // Update blog listings with new data
  }
});

You can customize this example to fit your specific needs and integrate it into your Hubspot website using the Design Manager. Good luck with your project!

Thanks & Regards