Jayakumar
Occasional Observer

Include Script from Section to Page header

Hello Team,

I have section template with the <script></script> tag and i want to include in the page header when loading the page.

Please suggest some solution.

Thank you.

0 Kudos
5 Replies
mbergmann
Crownpeak employee

Hi,

is it just a script tag with a fixed resource or does it contain JS code? 

If it contains code: Is that code using/depending on input components in that section?

What should happen when more than one of those sections are added to the same page?

 

Michael

0 Kudos

Hi,

I included third-party script in the section and it's not specific to the component  and when i add the section to the page, the script will move to the page head tag.

Do you have any sample for this.

 

0 Kudos

Hi,

in this case I'd like to "reframe" the requirement a little bit from "moving some output from the section to the page" to 

"if the page contains (at least) one section of a given type (=template), some extra code should be added on page level".

The usual solution here is not to define that code in the section template itself but handle this case from "outside".

I'd recommend adding a rendertemplate (=format template) to the page templates where the script tags should be placed to avoid having this "special logic" to be implemented in every page template - for example if you create a format template with a uid "render_section_dependent_head_content", you would call it in the page templates using

$CMS_RENDER(template:"render_section_dependent_head_content")$

Inside that rendertemplate you can then define and output the script tag as needed by checking if your current page contains at least one section based on a template with a given UID.

Just as an example, a simple version could look like this (inside the template render_section_dependent_script_tags)

$CMS_IF(#global.page.getChildren(class("de.espirit.firstspirit.access.store.pagestore.Section"), true)
.toList()
.map(section -> section.template.uid)
.contains("your_section_uid")
)$
<script src="..."></script>
$CMS_END_IF$

If you have this case just "once", that solution would be ok. If you want a more general approach later, you can extend the rendertemplate to have some kind of data structure (like a map of lists etc) where you can "centrally" define such "script dependencies".

In case you want to check not just for one template but need something like "if my page contains a section based on any of a list from section templates, I need this extra code", you could use the following version (the list contains the UIDs of the section templates for which you need that code). To be honest, I'd even recommend using that from the start as it's easier to extend in case that use case comes up later - so far you can just use a one element list 😉 

$CMS_IF(#global.page.getChildren(class("de.espirit.firstspirit.access.store.pagestore.Section"), true)
.toList()
.map(section -> section.template.uid)
.filter(uid -> ["one_template_uid","another_template_uid"].contains(uid))
.size>0
)$
...
$CMS_END_IF$

By the way: The code uses toList() recursively here which is usually not a good idea when dealing with complete folders - but just calling it on a page object is usually ok. 

Hope this helps!

Michael

0 Kudos

Hi,

Thank you for your quick response,

In my section template, i have code like below,

<script src="https://..."></script>

<div id="example"></div>

I added above section template to page.

Once i generate the page i would like to move the script tag to page html <head>..</head> tag.

So i would like to know above solution will help here.

Please provide some some code snippet here.

Thank you.

 

0 Kudos

Hi,

yes, the described way should do it. But please notice that it’s not "moving the script FROM the section template". The idea is to remove the script tag from the section template and put it as described into a rendertemplate that’s called from the page templates at the needed position in the page templates.

Michael

0 Kudos