topic Create dynamic header and footer template in CMS Development

Create dynamic header and footer template

amak — Thu, 29 Sep 2022 09:46:05 GMT

I have a Drupal website which has header and footer managed by CMS. I would like to create the same header and footer in Hubspot. I would like to keep the header and footer in both website and Hubspot sync. I am exploring different options to achieve this. I have a few questions.

Would it be possible for a Hubspot template to generate the menu using JavaScript? I notice that we can insert custom HTML but I’m not sure how flexible to create a menu with data using JavaScript. It seems all items in the example I gave you are all static.
Would it be possible for Hubspot template to get data from other Hubspot service, e.g. HubDB.
Would it be possible to push data from our website to HubDB?

Re: Create dynamic header and footer template

Anton — Thu, 29 Sep 2022 16:00:09 GMT

Hi @amak,

yes, you can generate menus with JavaScript
yes, you can build menus with HubDB
yes, you can push data from external pages to HubDB by the HubDB API

From my experience the easier way to go would be HubDB instead of JavaScript.

A simple one-level menu with logo and HubDB module could look something like this:

{% set menu_items = hubdb_table_rows(<tableId or name>) %} <nav class="navWrapper"> <div class="container"> <div class="row"> <div class="col logo"> {{ logo }} </div> <div class="col navigation"> <ul> {% for item in module.menu_items %} <li> <a href="{{ item.url }}">{{ item.link_name }}</a> </li> {% endfor %} </ul> </div> </div> </div> </nav>

There are basically no limits what you can't do 😁

You'd like to add an icon or image to each nav-item? Add an image column or text, url column to your HubDB and write it like this

{# For all usecases: adding a unless- or if-statement around the img-tag will prevent loading an empty img-tag in your DOM. I like unless since it's easier to find in modules when working with multiple statements #} {% unless item.image.src== "" %} <img src="{{item.image.src" alt="item.image.alt" class="nav-image"> {% endunless %}

hope this helps

best,

Anton

Re: Create dynamic header and footer template

amak — Wed, 05 Oct 2022 05:39:52 GMT

@Anton

Thanks a lot. Is there any documentation about building Hubspot template (https://knowledge.hubspot.com/website-pages/understand-a-hubspot-template-setup) with integration of HubDB module?

Re: Create dynamic header and footer template

Anton — Wed, 05 Oct 2022 06:48:10 GMT

Hi @amak,

yes - there is somekind of documentation about HubDB, dynamic pages and such in the dev docu (developers.hubspot.com).

To be precise here some links:

What I always recommend is passing the "CMS for developers" certification in the HubSpot academy to get a basic understanding of Hubl and after that digging into the Hubl programming language, especially if-statements, loops, functions(link is not broken; wait until you see the right sidebar) and filters(link is not broken; wait until you see the right sidebar) since you're gonna need this knowledge for HubDB.

Also: You can get yourself a CMS developer sandbox(I recommend a CMS dev sandbox) so you don't mess things up in your live-portal.

And last but not least: If you want to do things locally(can be harder when you're just starting), take a look at the Getting started with local development guide if you want to connect GitHub take a look at this guide.

hope this helps

best,

Anton