@rossatgrowth
I’ll describe the way you can achieve this step by step. Lets say you have a project folder in VSCode where you want to store all your modules in a ‘/modules’ folder and are running the hs watch command to sync every change you make to HubSpot.
1. Create the module by using CLI command:
hs create module rich-text.module src/modules
This should give you a new folder called `rich-text.module` with the following files: module.html, module.css, module.js, fields.json and meta.json.
2. Create the necessary fields in the fields.json. By using the above command, the module comes with a prefilled `richtext` field, but for the sake of explaining, lets assume it is empty.
You first define an array, cause all fields should be stored in an array. The next step is to add the JSON for the fields you need. Assuming you have the VSCode extension installed, you can type field.richtext and press enter to create the right JSON. The next step is to update the name and label and decide if this field is required for this module. The output should be something like this:
[
{
"name": "hero_text",
"label": "Hero text",
"required": false,
"locked": false,
"type": "richtext",
"inline_help_text": "",
"help_text": "",
"default": null
}
]
If needed, you could add simple HTML to the fields.json to add some dummy content:
[
{
"name": "hero_text",
"label": "Hero text",
"required": false,
"locked": false,
"type": "richtext",
"inline_help_text": "",
"help_text": "",
"default": "<h1>This is the content for the hero</h1><p>Please replace this with the right content</p>"
}
]
3. The next step is to add the necessary HTML to the `module.html`. You can write whatever you want, so i’ll just add the content with a wrapper:
<section class="c-hero-text">
<div class="c-hero-text__content">
{{module.hero_text}}
</div>
</section>
You can retrieve the values from the fields simply by adding the `module.fieldname` and calling it within the HTML.
5. Add some styling to the module.css of your module (if needed) and preview your module from the design manager. Because you are running `hs watch` every time you save a file, the contents will be synced to HubSpot. You can lookup your module in the design manager and click on the ‘preview without display options’ to see what it looks like.
6. Lets assume you have a template coded that is called ‘homepage.html’ in a templates folder (as it is setup in the CMS Boilerplate). You can now simply call your module from that module like this:
<!--
templateType: page
isAvailableForNewContent: true
label: Home
screenshotPath: ../images/template-previews/home.png
-->
{% extends "./layouts/base.html" %}
{% block body %}
{# The main-content ID is used for the navigation skipper in the header.html file. More information on the navigation skipper can be found here: https://github.com/HubSpot/cms-theme-boilerplate/wiki/Accessibility #}
<main id="main-content" class="body-container-wrapper">
{% dnd_area 'dnd_area' label='Main section', class='body-container body-container--home' %}
{% dnd_section %}
{% dnd_module path='../modules/rich-text' width="12" offset="0" %}
{% module_attribute 'hero_text' %}
<h1>Hero title</h1>
<p>Add some hero content here</p>
{% end_module_attribute %}
{% end_dnd_module %}
{% dnd_module path='../modules/rich-text', width="12", offset="0", hero_text="<h1>Hero title</h1><p>Add some hero content here</p>" %}
{% end_dnd_module %}
{% end_dnd_section %}
{% end_dnd_area %}
</main>
{% endblock body %}
Important is to understand that the path is relative to where your template file is located. There are two ways of adding some default content, the first is the {% module_attribute ‘field_name’ %} and the second one is passing it as a param in the {% dnd_module %}. I’ve included both examples.
Please take a look at this page: https://developers.hubspot.com/docs/cms/building-blocks/templates/drag-and-drop-areas to understand the structure of a template with dnd_area.
Finally, preview your template to see if everything is the way you want it. You can add padding and margin through the styling of your module, but you can also add it as a param to the dnd_section or dnd_module.
