CMS Development

KHunter13
Member

Custom Module Isn't Generating HubSpot Icons

My dev and I are approaching the finish line of a new website project, but are running into an issue with our custom module cooperating w/ HubSpot's icon DB.

 

From my dev:

 

"I ran into an error while trying to add the icon Advanced field nested within a group. It does not like this:

{% icon
name="{{ item.hubspot_icon.name }}"
style="{{ item.hubspot_icon.type }}"
unicode="{{ item.hubspot_icon.unicode }}"
icon_set="{{ item.hubspot_icon.icon_set }}"
%}

The editor did not like item.hubspot_icon, but it accepted module.hubspot_icon. So that's why this icon isn't updating, because it is not the same field. So I am not sure what to put though because the editor won't let me publish the correct code."

 

If I can provide any additional information please let me know!

0 Upvotes
3 Replies 3
dennisedson
HubSpot Product Team
HubSpot Product Team

Custom Module Isn't Generating HubSpot Icons

Hi @KHunter13 ,

If you are using item, that means we have a repeater option selected.  If that is the case, you will need to loop through them.  Should look like this

{% for item in module.field_group %}
   {% icon
	name="{{ item.hubspot_icon.name }}"
	style="{{ item.hubspot_icon.type }}"
	unicode="{{ item.hubspot_icon.unicode }}"
	icon_set="{{ item.hubspot_icon.icon_set }}"
   %}
{% endfor %}

@piersg and @Anton  are always good at correcting me if I am wrong so will get them in here as well 😀

0 Upvotes
piersg
Key Advisor

Custom Module Isn't Generating HubSpot Icons

Hard to say without being able to debug in person, but the default field name for an icon in a module is icon_field not hubspot_icon. Of course, you can change it to whatever you want, but I would check that those match first.

 

If that matches, I would then change the icon to be item.hubspot_icon/item.icon_field instead of module.[etc] and then console log {{item}} and see what the JSON you get

KHunter13
Member

Custom Module Isn't Generating HubSpot Icons

Here's the complete coding from the module for reference:

<section class="card-grid {{ module.section_width }} {{ module.card_hover }} {{ module.card_shadow }} {{ module.card_margin }} {{ module.background_color }} {{ module.card_size }} {{ module.card_layout }}">
<div class="inner-wrapper preload-disable-transitions">
{% inline_rich_text field="section_title" value="{{ module.section_title }}" %}
<div class="inner-grid">
{% for item in module.card %}
<div class="card {{ item.card_background_color }} {{ item.card_link }}" data-card-link="{{ item.cta_link.href }}">
<div class="inner-card-wrapper">
<div class="outer-img-wrapper {{ item.graphic_type }}">
<div class="img-wrapper {{ item.wide_image }}" style="background-image: url({{ item.card_image_link.href }})" loading="lazy"></div><!-- End Image Wrapper -->
<div class="hs-icon-svg-wrapper {{ item.hubspot_svg_color }}">
{% icon
name="{{ module.hubspot_icon.name }}"
style="{{ module.hubspot_icon.type }}"
unicode="{{ module.hubspot_icon.unicode }}"
icon_set="{{ module.hubspot_icon.icon_set }}"
%}
</div><!-- End HS Icon SVG Wrapper -->
<div class="svg-wrapper {{ item.svg_color }}">
<div class="hs_cos_wrapper">
<div class="inner-svg-wrapper">
{% inline_rich_text field="svg_code" value="{{ item.svg_code }}" %}
</div><!-- End Inner SVG Wrapper -->
</div><!-- End HS Wrapper -->
</div><!-- End SVG Wrapper -->
<div class="icon-font-wrapper {{ item.font_icon_color }}">
{% inline_rich_text field="font_icon" value="{{ item.font_icon }}" %}
</div><!-- End Img Wrapper -->
</div><!-- End Outer Image Wrapper -->
<div class="content {{ item.wide_image }}">
{% inline_rich_text field="card_content" value="{{ item.card_content }}" %}
<a class="{{ item.cta_visibility }} btn-sm {{ item.cta_color }}" href="{{ item.cta_link.href }}">
<div class="btn-fill-a"></div>
<div class="btn-fill-b"></div>
{% inline_rich_text field="cta_text" value="{{ item.cta_text }}" %}
</a><!-- End BTN -->
</div><!-- End Content -->
</div><!-- End Inner Card Wrapper -->
</div><!-- End Card -->
{% endfor %}
</div><!-- End Inner Grid -->
</div><!--End Inner Wrapper -->
</section><!-- End Card Grid -->

0 Upvotes