Avoid square brackets for HubL variables

[Deborah]

Hi all,

I currently working on a custom module for landing page templates, which implementes window modal.  So that I can click on a button, a pop-up window appears where I can see content. Then I can close it again and I still am on the same page - no navigation to an other page...

I put in the html/css/js code in the module and that works fine for 1 modal module in the template. But if I want to use multiple of these custom modal module in my landing page template, I face the issue that I need a dynamic id for the modal div and the button in order to show the right content and close the right div. 

Therefore, my idea was to use a text HubL-variable, where the user (that creates the template) can put in a unique id (e.g. modal_1, modal_2 etc. or content specific modal_productname etc.) for each of the multiple modules.

However, the problem is if I use this value of the HubL Variable for a javascript variable name, it does not work due to the fact that the HubL-Variable is shown with square brackets (e.g. "[modal_1]" instead of just the value "modal_1".    
See screenshot:

code of Hubspot modulesquare brackets in HTML

Is it possible to use the HubL-variable content without the square brackets? Or any other idea how to implement this use case?

Thanks. 

Best regards,

Deborah 

[LucBenayoun · Accepted solution]

Hi everyone 🙂 

Thank you for tagging me @natsumimori 😉

@Deborah, I think your issue is caused by a repeater. In fact, when you create a repeater it creates a table which stores everyone iteration of your values. In this case you just set one value so the output is a table with only one value. 

I tested it on my own and the code is working 😉

Bonus: I think I created what you were looking for in a simple way so enjoy!

MODULE FIELDS: 

- id_modal : Text

- modal_text : Rich text

HTML: 

<div class='modal-container-outer'>
  <div class='row-fluid'>
    <button href="#" data-id='container_{{ module.id_modal }}' onclick="openPopup(this)">Open Modal</button>
  </div>
  <div id="container_{{ module.id_modal }}" class='modal'>
    <div class='row-fluid'>
      <div class='modal-container-inner'>
        <button href="#" data-id="container_{{ module.id_modal }}" class="close-popup" onclick="closePopup(this)"><i>Close</i></button>
        <div class='content'>
          {{ module.modal_text }}
        </div>
      </div>
    </div>
  </div>

  <script>
    let openPopup = (element) => {
      let href = element.dataset.id, id = document.getElementById(href);
      id.classList.add("open");
    }, closePopup = (element) => {
      let href = element.dataset.id, id = document.getElementById(href);
      id.classList.remove("open");
    }
  </script>
</div>

CSS:  

html{font-size: 62.5%;}
body{font-size:1.4rem;line-height:1.6;}
.modal-container-outer{font-family:Helvetica, Arial, sans-serif; text-align:center;}
.modal-container-outer .row-fluid{max-width:100rem;margin-left:auto;margin-right:auto;}
.modal-container-outer button{padding:1.5rem 2rem;border:none;color:#ffffff;background-color:purple;border-radius:3px;font-weight:600;}
.modal-container-outer .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);padding:5rem;box-sizing:border-box;}
.modal-container-outer .modal.open{display:block;}
.modal-container-outer .modal .close-popup {color: transparent;user-select: none;padding: .5rem;width: 30px;height: 30px;position:absolute;top: 1rem;right: 1rem;}
.modal-container-outer .close-popup i {position: absolute;transform: translate(-50%,-50%) rotate(45deg);transform-origin: center center;width: 15px;height: 15px;top: 50%;left: 50%;}
.modal-container-outer .close-popup i:before, .modal-container-outer .close-popup i:after {content: '';width: 100%;height: 2px;background: #ffffff;display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);transform-origin:center center;}
.modal-container-outer .close-popup i:after {transform: translate(-50%,-50%) rotate(90deg);}
.modal-container-outer .modal-container-inner {text-align:left;position:relative;padding: 3rem;background: #ffffff;box-sizing: border-box;box-shadow: 0 10px 10px 10px rgb(0 0 0 / 20%);border-radius: 5px;}

If you want to create a repeater just put the fields in a group, transform it into a repeater and replace all the "module" values by "item" in the html. Then just wrap the html code in a for loop as this example:

{% for item in module.field_group %}
<--- HTML --->
{% endfor %}

Let me know! 🔥

Cheers, 

Luc

[Deborah]

Hi @LucBenayoun,

thanks for your advice! It now works. And thank you @natsumimori for managing the communication. 😊

My problem was solved, if I create a new field without the repeater option. Then the suqare brackets disappeared. In the previous version the repeater option was some time ago activated, but then I deactived it,... but the square brackets didnt disappear. It had to be a newly created field. 

I really appreciate your help!😊

Cheers,

Deborah  

[natsumimori]

Thank you so much @LucBenayoun !

Please check out the advice above @Deborah 😃

[natsumimori]

Hi @Deborah , 

Thank you for reaching out to the HubSpot Community:)

@LucBenayoun and @dbeau79 , would you mind sharing your advice for Deborah?