dnd_module

Develop, Build & Integrate CMS Development
,
1

I need help, I can’t overwrite the default values, I don’t know what I’m doing wrong
Follow the code below

calling module in template

{% dnd_module 'buttons-stores', path="./../modules/buttons-stores" %}
 {% module_attribute "spacing" is_json=True %}
 {
 "spacing_bottom": 0,
 "spacing_top": 100
 }
 {% end_module_attribute %}
 {% end_dnd_module %}

module fields.json file

[
 {
 "label": "Buttons-stores",
 "name": "buttons_stores",
 "required": false,
 "locked": false,
 "occurrence": {
 "default": 2,
 "min": 1
 },
 "children": [
 {
 "id": "item_menu.name",
 "type": "text",
 "label": "Name Item",
 "name": "name_item",
 "validation_regex": "",
 "allow_new_line": false,
 "show_emoji_picker": false,
 "type": "text",
 "default": "App store"
 },
 {
 "id": "item_menu.path_local_item",
 "type": "text",
 "label": "Path local",
 "name": "path_local_item",
 "type": "text",
 "default": "./../../images/icons/app_store.svg"
 },
 {
 "id": "item_menu.url",
 "type": "text",
 "label": "URL Item",
 "name": "url_item",
 "validation_regex": "",
 "allow_new_line": false,
 "show_emoji_picker": false,
 "type": "text",
 "default": "#"
 },
 {
 "id": "item_menu.src",
 "type": "image",
 "required": false,
 "locked": false,
 "responsive": true,
 "resizable": true,
 "show_loading": false,
 "label": "src Item",
 "name": "src_item",
 "default": {
 "size_type": "exact",
 "src": "",
 "alt": "image-alt-text",
 "loading": "lazy",
 "width": 128,
 "height": 128,
 "max_width": 128,
 "max_height": 128
 }
 },
 {
 "id": "item_menu.target",
 "type": "boolean",
 "display": "checkbox",
 "label": "Target Blank",
 "name": "target_blank_item",
 "allow_new_line": false,
 "show_emoji_picker": false,
 "default": true
 }
 ],
 "type": "group",
 "default": [
 {
 "name_item": "App store",
 "src_item": "",
 "url_item": "https://www.apple.com/br/app-store/",
 "target_blank_item": true,
 "path_local_item": "./../../images/icons/app_store.svg"
 },
 {
 "name_item": "Google Play",
 "src_item": "",
 "url_item": "https://play.google.com/",
 "target_blank_item": true,
 "path_local_item": "./../../images/icons/google_play.svg"
 }
 ]
 },
 {
 "label": "Spacing",
 "name": "spacing",
 "required": false,
 "locked": false,
 "type": "group",
 "children": [
 {
 "label": "Spacing Bottom",
 "name": "spacing_bottom",
 "type": "number"
 },
 {
 "label": "Spacing Top",
 "name": "spacing_top",
 "type": "number"
 }
 ],
 "default": {
 "spacing_bottom": 0,
 "spacing_top": 0
 }
 }
]

In the panel I can change the spacing_bottom and spacing_top but in the module_attribute I can’t

2

Hey iBarros

Use these codes i hope one of them will work

{% dnd_module ‘buttons-stores’, path=“./../modules/buttons-stores” %}

{% module_attribute “spacing” is_json=True ‘spacing_bottom’: ‘0’, ‘spacing_top’: ‘100’ %}

{% end_module_attribute %}

{% end_dnd_module %}

OR

{% dnd_module ‘buttons-stores’, path=“./../modules/buttons-stores” , ‘spacing_bottom’: ‘0’, ‘spacing_top’: ‘100’ %}

{% end_dnd_module %}
Hope this helps! If we were able to answer your query, kindly help the community by marking it as a solution. Thanks and Regards.

3

Thanks for trying to help me but it didn’t work.

iBarros_0-1647951056045.png
iBarros_0-1647951056045.png513×114 8.32 KB

I tried both ways

4

Hi @iBarros,

how does your module HTML looks like?

edit:

I’ve recreated a simple module with just two number fields for padding and tested it.

Here’s my working setup:

{% require_css %}
<style>
.{{name}}{
padding-top:{{ module.spacings.top }}px;
padding-bottom:{{ module.spacings.bottom }}px
}
</style>
{% end_require_css %}

<div class="{{name}}">
Some content
</div>

the JSON

[
 {
 "type": "group",
 "id": "d67118f8-c8b0-1b3c-3620-5b25c1e92517",
 "label": "Spacings",
 "children": [
 {
 "type": "number",
 "id": "185eb0fc-a846-fc23-d6c0-f1a5991d98ad",
 "display": "text",
 "step": 1,
 "label": "top",
 "name": "top",
 "min": 1,
 "max": 100,
 "default": 1
 },
 {
 "type": "number",
 "display": "text",
 "step": 1,
 "label": "bottom",
 "name": "bottom",
 "oldId": "185eb0fc-a846-fc23-d6c0-f1a5991d98ad",
 "id": "152d3625-926b-dc6f-b9b5-0f88fdfb5c90",
 "min": 1,
 "max": 100,
 "default": 1
 }
 ],
 "name": "spacings",
 "default": {
 "top": 1,
 "bottom": 1
 }
 }
]

module in template:

{% dnd_module path="./../modules/test"%}
{% module_attribute 'spacings' is_json=True %}
{
"bottom":100,
"top":100
}
{% end_module_attribute %}
{% end_dnd_module %}

It will work as soon as you define a default value in the fields.

hope this helps.

best,

Anton

5

Hello @Anton I tried to assign your solution to my context

didn’t work, did you insert dnd_module inside dnd_column? maybe it’s some bug

I’m trying to think of another way, it’s weird because only within the context of dnd_area > dnd_section > dnd_colunm > dnd_row

does not work
code template

<!--
 templateType: page
 label: Landing-page
 isAvailableForNewContent: true
-->
<!doctype html>
<html>
 {% extends "./layouts/base.html" %}
 {% block body %}
 <body>
 {% dnd_area "area_intro", class="intro" %}
 {% dnd_section max_width=1200, vertical_alignment="MIDDLE", margin={ "bottom": "120px" } %}
 {% dnd_column offset=0, width=5 %}
 {% dnd_row %}
 {% dnd_module path="@hubspot/rich_text" %}
 {% module_attribute "html" %}
 <h1 class="head-text my-0">Helping make <span class="primary-medium-color"> net-zero</span> an achievable target.</h1>
 <h4 class="sub-head-text my-1">we are empowering consumers to achieve a more sustainable lifestyle.</h4>
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}

 {% dnd_row %}
 {% dnd_module 'buttons-stores', path="./../modules/buttons-stores" %}
 {% module_attribute "spacing" is_json=True %}
 {
 "spacing_bottom": 100,
 "spacing_top": 100
 }
 {% end_module_attribute %}
 {% end_dnd_module %}
 {% end_dnd_row %}

 {% end_dnd_column %}

 {% dnd_column offset=5, width=7 %}
 {% dnd_row %}
 {% dnd_module 'image_intro'
 path='./../modules/image-intro' %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}

 {% end_dnd_area %}

 {% dnd_area "area_features", class="features" %}
 {% dnd_section max_width=1200, vertical_alignment="MIDDLE", margin={ "bottom": "120px" } %}
 {% dnd_column offset=0, width=12 %}
 {% dnd_row %}
 {% dnd_module 'switch-images'
 path='./../modules/switch-images' %}
 {% end_dnd_module %}
 {% end_dnd_row %}
 {% end_dnd_column %}
 {% end_dnd_section %}

 {% end_dnd_area %}
 </body>
 {% endblock %}
</html>
6

Hi @iBarros,

very strange. Maybe it’s a bug. Will investigate it later today.

In the meantime: this is the part of template(home.html of the boilerplate) i’ve pasted it in.

 {% dnd_area 'dnd_area'
 label='Main section',
 class='body-container body-container--home'
 %}

 {% dnd_section
 background_color='#f8fafc',
 vertical_alignment='MIDDLE'
 %}
		{% dnd_module path="./../modules/test" width=6%}
		{% module_attribute 'spacings' is_json=True %}
		{
		"bottom":100,
		"top":100
		}
		{% end_module_attribute %}
		{% end_dnd_module %}
 {% dnd_module
 path='@hubspot/rich_text',
 html='<h2>Provide more details here.</h2><p>Use text and images to tell your company’s story. Explain what makes your product or service extraordinary.</p>'
 offset=6,
 width=6
 %}
 {% end_dnd_module %}
 {% end_dnd_section %}

 {% end_dnd_area %}

so it’s area>section>module for me

hope this helps

best,

Anton

7

ow man @Anton

I found out what my mistake was

{% dnd_module 'buttons-stores', path="./../modules/buttons-stores" %}

Dont work

{% dnd_module 'buttons-stores', path="./../modules/buttons_stores" %}

Work

I just changed the “-” to “_”