Is it possible to link to a HubDB query?
We have a related resources module at the bottom of our product pages, let’s call the page /products/mobile-phone
And within this module, we want to link to /resources which has a HubDB table on and have preset filters.
For example the link could look like href=“www.exampledomain.com/resources?product_range=mobile-phone”.
So when you click on the link and go to the products page it automatically shows you the filtered HubDB table.
Is this possible?
Hello @DanSPT and welcome to the developer forums!
This is definately possible and could be achieved with two ways known to me.
1. The first way is by using the hubdb query that hubl provides the steps are the following:
- first get the query parameter. hubl has the query parameters stored in the request dictionary, so for your example it would look like this: more info on the request dict
request.query_dict.product_range
So you can now store that info in variable like so:
{% set queryParam = request.query_dict.product_range %}
- Next you can use this variable to make a hubdb query to the appropriate table, notice that here you need the id or the name of the table so you can call all the rows: more info on hubdb function & some info on queries filters
{% for row in hubdb_table_rows(<hubdb id or name>, "product_query={{queryParam}}") %}
<!-- html for each product should be inside here, {{ row.hs_id }} and {{ row.name }} are the values from the hubdb table rows -->
{% endfor %}
This will output all the listings from your table that match the criteria from the parameter.
2. The second method is more elaborate but I would say more flexible, some javascript knowledge is needed though. It makes use of the hubdb api and doesn’t need any authentication like some other api’s hubspot provides. The steps are the following:
- Firstly in your javascript you need to check to see if there are parameters on the page and get them:
const queryString = window.location.search;
if (queryString !== "") {
const urlParams = new URLSearchParams(queryString);
const productQuery = urlParams.get('product_query');
searchData(productQuery ); // this is a function we create later that will grab the data from the hubdb through api
}
- Next we create the function that will get and output the data:
function searchData(productQuery) {
var contentUrl = `https://api.hubapi.com/hubdb/api/v2/tables/<TABLE_ID>/rows?portalId=<PORTAL_ID>${productQuery!== '' ? "&product_query="+productQuery : ''}`;
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
console.log(this.responseText);
}
xhttp.open("GET", contentUrl, true);
xhttp.send();
}
IMPORTANT NOTICE: Here I am outputting the data in the console log, this is because the data returns in a json object and what you should do with them later is up to you. Usually you would do something like templating to output the data in html, this part is probably more advanced but should you need any further help don’t hesitate to ask for any advice. I will be putting some links below regarding the second approach:
- Javascript templates (this is what i’m talking about in the last sentence regarding templating)
Obviously the topics I mention in the second method are vast and would not be possible to cover them entirely here, I just post them for referencing and to give you some guidance, you should really read about them more in the mdn documentation or learn them in some online course.
If you found my answer useful in any way and it helped you solve your issue, please mark it as an answer.
Hey @DanSPT , was my answer any helpful? Have you been able to resolve your issue in some way?
Yes, thank you for your help!