Hi! I’m trying to add a basic group of react modules in my template, so that the editor gets a preview but can still add/remove modules.
Adding react modules as static modules seems to be working fine like so:
{% block body %}
{% module "hero"
path="../components/modules/Hero",
theme="{{ theme }}",
heading="My heading",
description="<p>Some description</p>" %}
{% dnd_area "dnd_area"
class="main" %}
{% end_dnd_area %}
{% endblock body %}
but not if I add them inside the {% dnd_area %} scope.
Using {% dnd_module %} seems to have no effect either. Any tips?
Thanks!
That is curious.
I can’t replicate it. Can you share your code within the dnd_area?
I’m still in the process of figuring out React modules too, so forgive me if this is a silly question, but how is it that your path doesn’t start with @projects? Is the template within the project or something?
Barry Grennan
Freelance HubSpot CMS Developer
Website | Contact | LinkedIn
The first thing I tried was the following:
{% block body %}
{% dnd_area "dnd_area"
class="main" %}
{% module "hero"
path="../components/modules/Hero",
theme="{{ theme }}",
heading="some bs",
description="<p>This is the description <b>field</b></p>" %}
{% end_dnd_area %}
{% endblock body %}
Just putting the module inside the dnd area. Regarding the path I’m not sure what you mean.. The react module is in the project, so I’m simply importing it by its relative path to the template.
theme/
components/
| modules/
| | Hero/
| | | index.tsx
templates/
| layouts/
| | base.hubl.html
| page.hubl.html
I’m using the module in the page.hubl.html file.
And the module itself is just a react component. Like I said it renders just fine if I put it outside of the dnd_area scope, but not within it.
@RWallentin wrote:
{% block body %}
{% dnd_area "dnd_area"
class="main" %}
{% module "hero"
path="../components/modules/Hero",
theme="{{ theme }}",
heading="some bs",
description="<p>This is the description <b>field</b></p>" %}
{% end_dnd_area %}
{% endblock body %}
Ok, so first thing I notice is that you used {% module %} there. That wouldn’t work in a dnd_area. But you mention that you tried {% dnd_module %} also. Did you have a closing {% end_dnd_module %} tag there?
Also, a dnd_module can’t be a direct descendant of a dnd_area, only a dnd_section can.
So you’d do something like
{% block body %}
{% dnd_area "dnd_area" class="main" %}
{% dnd_section %}
{% dnd_module "hero" path="../components/modules/Hero" %}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
{% endblock body %}
If you try to put a dnd_module directly in a dnd_area like that, it just won’t show up.
Barry Grennan
Freelance HubSpot CMS Developer
Website | Contact | LinkedIn
I must have missed the part about ending tags. This works fine, thanks for the help!
