Repeater Options
Posted: Thu Dec 26, 2024 4:05 am
Remember that we previously said that we wanted to display more than one testimonial? This means that for each testimonial we will need the same fields that we previously defined, but instead of duplicating them as many times as we need them, HubSpot offers us a very powerful option, which is the Repeater . Repeaters are fields and groups that can create multiple objects and display them using a for loop . For example, in our case, a collection of testimonials.
The idea is to create a group with the fields we need and we will call this group Testimonials . To do this, in our general view of the module in the right sidebar and in the “Fields” section we will click where it says “Group”, and now we can select the fields we want to group, we will select all except the section title and click on “Create group” .
create groupWe change the group label to Testimonials and we have now grouped our fields.
cluster
In this same view (within the group) that I show in the previous capture is where we will enable the repeater option. To do this, we scroll to the end of the right sidebar until we reach the “Repeater Options” section , and we will enable it by clicking on the switch that is located next to the section title.
We will have a minimum of one testimony and a maximum of six, so we will place these quantities in their respective fields and, in the “Object Organization Label” selector, we will select “ Name ” (or one of the fields that we have previously defined).
With this, we will have our repeater configured. From time to time we can click the “ Publish changes ” button, which is located above the right sidebar (as long as we are not working on a module that is being used on a page and it is not finished yet).
repeater options
Creating the structure with HTML and HubL
If we open the preview (button located at the top of the right sidebar), we will see our progress so far, and it is the view that any user who interacts with our module for editing will see.
preview - 1
If we hover over the first testimonial created by default (remember: at least one), we will see two options: edit (pencil) and clone (double “sheet”). We are going to edit this testimonial to fill in the fields with the image, description, name and position that you want. For the image, you will see that there is a field that comes by default, which is the alternative text field , this is the “alt” of the HTML <img> tag that is used in case the image does not load for some reason and this text is displayed (in addition to being a good SEO practice ).
When filling out all the fields of our testimonial, we will see that nothing is displayed on the right side of the preview, and this is because we have not created the structure of the module yet.
To do this, we will return to the general view of this and in the HTML + HubL section (second point described in the section What are the components of a HubSpot module? ) is where we will carry out this task.
HubL Syntax
HubSpot already has documentation that explains its syntax in more depth, so I'll cover the basics. Like other commonly used template languages like PHP, HubL can be mixed in with your module's HTML.
To determine where a HubL statement begins and ends we need to learn some key symbols that act as delimiters:
hubl-syntax
Statement delimiters → {% %}: Defines the template's conditional logic, loops (like the cio and cto email lists Each module has a default main variable (object): “module” , so if we wanted to print the title of our testimonials section we would use the expression: {{ module.title }}
Comment delimiters → {# #}: as shown in the image, with this delimiter we can comment on our code if we need to explain some part of it, for example.
Basic structure
The first thing we will do is create a basic variable that will correspond to the name of the module and with which I like to start to plan the structure of a module, but it is optional. This is to create a hierarchy of classes with CSS , and it is also considered a good practice, since it is also used to describe the structure of the HTML a little.
A variable in HubL is created with the declaration delimiter and the reserved word “set” . We will call this variable “slug” and we will declare it like this:
The idea is to create a group with the fields we need and we will call this group Testimonials . To do this, in our general view of the module in the right sidebar and in the “Fields” section we will click where it says “Group”, and now we can select the fields we want to group, we will select all except the section title and click on “Create group” .
create groupWe change the group label to Testimonials and we have now grouped our fields.
cluster
In this same view (within the group) that I show in the previous capture is where we will enable the repeater option. To do this, we scroll to the end of the right sidebar until we reach the “Repeater Options” section , and we will enable it by clicking on the switch that is located next to the section title.
We will have a minimum of one testimony and a maximum of six, so we will place these quantities in their respective fields and, in the “Object Organization Label” selector, we will select “ Name ” (or one of the fields that we have previously defined).
With this, we will have our repeater configured. From time to time we can click the “ Publish changes ” button, which is located above the right sidebar (as long as we are not working on a module that is being used on a page and it is not finished yet).
repeater options
Creating the structure with HTML and HubL
If we open the preview (button located at the top of the right sidebar), we will see our progress so far, and it is the view that any user who interacts with our module for editing will see.
preview - 1
If we hover over the first testimonial created by default (remember: at least one), we will see two options: edit (pencil) and clone (double “sheet”). We are going to edit this testimonial to fill in the fields with the image, description, name and position that you want. For the image, you will see that there is a field that comes by default, which is the alternative text field , this is the “alt” of the HTML <img> tag that is used in case the image does not load for some reason and this text is displayed (in addition to being a good SEO practice ).
When filling out all the fields of our testimonial, we will see that nothing is displayed on the right side of the preview, and this is because we have not created the structure of the module yet.
To do this, we will return to the general view of this and in the HTML + HubL section (second point described in the section What are the components of a HubSpot module? ) is where we will carry out this task.
HubL Syntax
HubSpot already has documentation that explains its syntax in more depth, so I'll cover the basics. Like other commonly used template languages like PHP, HubL can be mixed in with your module's HTML.
To determine where a HubL statement begins and ends we need to learn some key symbols that act as delimiters:
hubl-syntax
Statement delimiters → {% %}: Defines the template's conditional logic, loops (like the cio and cto email lists Each module has a default main variable (object): “module” , so if we wanted to print the title of our testimonials section we would use the expression: {{ module.title }}
Comment delimiters → {# #}: as shown in the image, with this delimiter we can comment on our code if we need to explain some part of it, for example.
Basic structure
The first thing we will do is create a basic variable that will correspond to the name of the module and with which I like to start to plan the structure of a module, but it is optional. This is to create a hierarchy of classes with CSS , and it is also considered a good practice, since it is also used to describe the structure of the HTML a little.
A variable in HubL is created with the declaration delimiter and the reserved word “set” . We will call this variable “slug” and we will declare it like this: