CMS Development

KajBob
Participant

custom module from hubspot tutorial not showing up in preview

SOLVE

Hi,

 

I'm a noob here to hubspot.  I was going through the getting started module CMS guide on hubspot. Getting started with Modules (hubspot.com)

 

 I keep having some issues.  When I copy the module according to the instructions into the final dnd_module section of the home.html template of the boiler plate....

{% dnd_module path=“../modules/Testimonial.module” %}
{% end_dnd_module %}
 
I had some column issues and the code wouldnt upload from my local environment.  I got around this by adding offset and width.  But unfortunately, this made the module itself not work in the template, ie it wouldn't show up.
 
Edit, I was able to solve it a bit, by deleting the other modules in that section.  Well, whatever works, works.  If anyone has other solutions, please feel free to share!  Thanks.
0 Upvotes
1 Accepted solution
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

custom module from hubspot tutorial not showing up in preview

SOLVE

Hi @KajBob ,

 

I struggled with this a while back myself. You need to remember the structure of the coded templates, which is explained in the docs. It has a great image that explains the structure:

Teun_0-1651479991353.png

It is important to know that a single dnd_section can only include one dnd_module. So if you want a second dnd_module below that one, you need to wrap it in a new dnd_section or use a dnd_column with multiple dnd_rows.

 



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


View solution in original post

0 Upvotes
2 Replies 2
Teun
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

custom module from hubspot tutorial not showing up in preview

SOLVE

Hi @KajBob ,

 

I struggled with this a while back myself. You need to remember the structure of the coded templates, which is explained in the docs. It has a great image that explains the structure:

Teun_0-1651479991353.png

It is important to know that a single dnd_section can only include one dnd_module. So if you want a second dnd_module below that one, you need to wrap it in a new dnd_section or use a dnd_column with multiple dnd_rows.

 



Learn more about HubSpot by following me on LinkedIn or YouTube

Did my answer solve your issue? Help the community by marking it as the solution.


0 Upvotes
KajBob
Participant

custom module from hubspot tutorial not showing up in preview

SOLVE

thank you for your reply Teun!  I was able to solve it in a different way than how you did it.  Well its similar in the end but the underlying reason is the same.  I had 2 issues:

 

{% dnd_module path='../modules/Testimonial.module',
customer_name = "Mary",
profile_pic = {
src: "{{ get_asset_url('../images/profile-pic-mary.svg') }}",
alt: "Mary Profile Picture"
},
testimonial = "Wow, what a product! I can't wait to recommend this to all my family and friends!"
%}
{% end_dnd_module %}

 
The first issue that prevented the module from showing up on my screen is this part in the above snippet: path='../modules/Testimonial.module'.  For some reason single quotes would cause an error.  Adding double quotes fixed the issue and would cause the module to show up. 
 
The second thing, like you said is that having multiple dnd_modules under one dnd_section would cause the thing to crash.  As you said, the column solution would likely make it work by adding multiple dnd_columns in one dnd_section.  I did it a bit differently. I added offset and width attributes.  Basically this is just another way of adding column widths.  So for the first dnd_module I kept the offset = 0  width =4, the second dnd_module the offset = 4 width=4, and the 3rd dnd_module the offset=8 and width =4.  By doing this I was able to have 3 dnd_modules in one dnd_section without adding any columns or rows.
 
Thanks for your help! I'm going to try out your recommendation as well.
 
0 Upvotes