Related Blog Posts macro inserts script-tag

[FabianRichter]

Hi,
as the title says, I have an issue on our website regarding the related blog posts macro.
Until last week everything was going well, but now somehow it inserts a javascript-tag and I do not know, where it comes from.

Background information:

The module I created works this way. I have set up a macro to format the post, like:

{# Layout #}
{% macro formatter(icon, gradient, ...) %}
  <div>...</div>
{% endmacro %}

Then I have the blog_post_formatter to fill the formatter:

{% macro blog_post_formatter(blog_post, index, count) %}
  {{ formatter(blog_icon, 'blog-teaser', '#f08714', ...) }}
{% endmacro %}
     

And then I have the related blogs macro to fill the blog_post_formatter:

{% related_blog_posts tags="{{ tagNames }}", post_formatter="blog_post_formatter", limit={{ module.count_limit }}, no_wrapper=True %}

This way is nessesary to reuse the layout for other type of content with custom variables (recent blogs, popular blogs, ...) since the post_formatter in the related_blog_posts macro is limited to blog_post, index and count.

Okay.
Now I used JavaScript to display the resulting blog-posts not in list-style but in a carousel. Therefore I need to achieve this structure (simplified):

<section class="related-blogs">
  <div>Blog Post 01</div>
  <div>Blog Post 02</div>
  <div>Blog Post 03</div>
</section>

That works well. In the design manager preview I get no error, no bug, it simply works.

But since last week I don't have this structure anymore, though I didn't touch the module. It inserts a script tag like this:

<section class="related-blogs">
  <div>Blog Post 01</div>
  <div>Blog Post 02</div>
  <div>Blog Post 03</div>
  <script>fetch(...) ...</script>
</section>

This script tag causes that the carousel does not work anymore.
Does anybody know where this script tag could come from? I ran this additional script in the console and got the same related-blogs structure a second time.
I would appreciate any help. You can reproduce this issue by having a look into this page: http://systema-4223435.hs-sites.com/en/pillar/test01. I currently made the carousel invisible but you can search in the developer tools for 

<section class="related-blogs" style="display: none;">

Thanks!
Fabian

[FabianRichter · Accepted solution]

Okay let me show you something:

This is how the content carousel looks like in the design managers module preview. Everything is fine and no additional script-tag is added.

It follows my expected rule:

<div>
  <div>related post 1</div>
  <div>related post 2</div>
  <div>related post 3</div>
  ...
  <div>related post 6</div>
</div>

But on the website I get a script tag inserted right after the last carousel-item, so that it destroys my carousel.

I'm 100% sure it is somehow added by HubSpot, but I don't know how to avoid it.

I built this module for content creators to choose between popular blogs, recent blogs, related blogs (with tags either from the blog post or from custom added tags) and gave them the ability to add in additional custom pages from our website. It's a huge module and worked pretty well, but now I can only use it for popular and recent content, because there I don't get this additional script tag. 90% of our page uses this module for related content... Hope someone can help!

[Git]

Hi @FabianRichter 

I am also running into same issue like yours, just wondering if you find any solution to avoid the additional script tag from the last carousel item. 
I am using owl carousel plugin but the script tag is messing up my carousel effect in the related blog post list.

Any help on this is much appreciated.

[Kevin-C]

Hey @FabianRichter 

Shot in the dark here, but it looks like the slick-slider's initialization is causing these issues.

I'd look into the html structure that is generated, by Hubl (im assuming) before initialization to ensure that this is infact what the plugin needs.

I guess this because it looks like the plugin adds classes to the script tag which seems odd.

[FabianRichter]

Hi @Kevin-C,

---

@Kevin-C wrote:

I guess this because it looks like the plugin adds classes to the script tag which seems odd.

Yes! The JavaScript-Plugin, that generates my carousel out of this described structure, takes the additional script-tag as item for the carousel. But I was wondering, where this script-tag comes from. Seems like an update of this related_blog_posts-macro, that is adding in this script-tag, since it wasn't there the last couple of month.

Fabian