Testimonial Slider With Modal using HubL & For Loop

Developer Support CMS Development
,
1

Hi there, hoping for a bit of help. I’m working on a custom module that features a testimonial slider that can read the full testimonial in a modal. The issue that I’m facing is the modal window needs to be outside and above the for loop.

My question is, using HubL/variables, etc — is there a way to store the testimonial quote and modal name from each loop iteration and use it in the code above.

 <div class="page-center">
 <div id="test" class="modal-window">
 <div><a href="#" title="Close" class="modal-close">Close</a>
 <h1>Voilà!</h1>
 <div>A CSS-only modal based on the :target pseudo-class. Hope you find it helpful.</div>
 </div>
 </div>

{%- for testimonial in module.testimonial -%}
<div class="pwr-rich-text pwr-testimonial__quote">
{{ testimonial.quote }} <a href="#test">Read More</a> </div>
{%- endfor -%}

Hopefully this makes sense and thanks in advance!

2

Hi @cives

If I understood what you meant you can use Hubl to set variables, then call them later.

{% set string_var = "This is a string value stored in a variable" %}
{{ string_var}}

Is this what you meant?

Mike

Here to learn more about HubSpot and share my HubSpot Knowledge. I’m the founder of Webalite a Gold HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world’s first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

3

The section of the module that needs the string_var occurs before the loop it would get the information from, any guidance on how to handle this?

4

Hey @cives

Have a rummage around this page, particularly the require_js block.

Does that do what you want?

Mike